Solved

jQuery multiple document.ready

Posted on 2012-04-07
7
646 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
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

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 250 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 250 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
In this fourth video of the Xpdf series, we discuss and demonstrate the PDFinfo utility, which retrieves the contents of a PDF's Info Dictionary, as well as some other information, including the page count. We show how to isolate the page count in a…

856 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