?
Solved

jQuery multiple document.ready

Posted on 2012-04-07
7
Medium Priority
?
656 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 

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

Technology Partners: 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!

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
A quick Powershell script I wrote to find old program installations and check versions of a specific file across the network.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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

762 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