Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jQuery multiple document.ready

Posted on 2012-04-07
7
Medium Priority
?
662 Views
Last Modified: 2012-08-14
Experts,

I have found several sites that suggest you can have more than one document.ready function.

I need to load a table using Ajax when a particular page opens.  Here is the code:

---
$('#adm_output').ready(function()
{
      getAgentTable();
});
---

There is no "adm_output" div on any of the other pages, but Ajax loads the table on EVERY page.

The logic seems foolproof, but I obviously have missed something.

Can you help?

Capt
0
Comment
Question by:Glen Gibb
  • 3
  • 3
7 Comments
 
LVL 20

Expert Comment

by:BuggyCoder
ID: 37820019
using  the below code ensures that your page loads Table as soon as dom is ready.
In your getAgentTable, you can get the table html in a variable and then you can append it to an existing div using the code below:-
$('document').ready(function()
{
      var tblHtml = getAgentTable();
      $('#adm_output').append(tblHtml);
});

Open in new window

0
 

Author Comment

by:Glen Gibb
ID: 37820213
Tnx, BC, for the prompt reply.

However, as far as importing the table, the original code works just fine.  The example provided does the same basic thing, and imports the table.

My issue, however, is that the function is called when ANY page is loaded.  It is only needed for ONE particular page when the div in question is loaded.  It does not exist on any other pages.   Why does it load here?

I'm trying to prevent unnecessary calls to the server for data.

Capt
0
 
LVL 20

Expert Comment

by:BuggyCoder
ID: 37820217
make sure that you are not referring to the script in all the pages.
If the script is part of js file, include that js in the where it is required and not any other page...
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:Glen Gibb
ID: 37820602
All pages reference the same .js file.

Is there no other way to handle the issue?

Capt
0
 
LVL 20

Accepted Solution

by:
BuggyCoder earned 1000 total points
ID: 37820651
see, if all your pages refer to the same js that means all the pages have this method called on their document.ready.
I would suggest you remove document.ready code from js and put it explicitely in script section on the page where required like this:-

<head>
<script type="javascript">
$('document').ready(function()
{
var tblHtml = getAgentTable();
$('#adm_output').append(tblHtml);
});
</script>

Open in new window

</head>
0
 
LVL 6

Assisted Solution

by:jjperezaguinaga
jjperezaguinaga earned 1000 total points
ID: 37821368
Greetings capt_alberta,

A suggestion doesn't mean it's that "OK" to do it. Multiple readys can affect the readibility of your script, increase the time you take to maintain your code, separate your variables from each other (variables within a ready can't access each other) and for instance, the way they are added doesn't always mean they are called at the same time (that even sounds weird, I'll research more about it).

Anyway, if I were you, this is what I would do:

// ONE ready to rule them all! All the DOM has been loaded.
$(document).ready(function() {
   var page1 = $("#page1_widget");
   var page2 = $("#page2_widget");

   if (page1.length) call_function_only_for_page_1();
   if (page2.length) call_function_only_for_page_2();

});

Open in new window


As you see, the length property can tell you if there's a an specific element within the DOM, and since we are using one ready only, that checks ALL the document, we won't have any problems to see which one is best. Here's a little proof of the test: http://jsfiddle.net/TXkHV/

Cheers!
-JJ
0
 

Author Closing Comment

by:Glen Gibb
ID: 37822479
Many thanks to both experts.  Cleared up the situation.
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article will show, step by step, how to integrate R code into a R Sweave document
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Suggested Courses

916 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question