Solved

jQuery multiple document.ready

Posted on 2012-04-07
7
647 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
Forrester Webinar: xMatters Delivers 261% ROI

Guest speaker Dean Davison, Forrester Principal Consultant, explains how a Fortune 500 communication company using xMatters found these results: Achieved a 261% ROI, Experienced $753,280 in net present value benefits over 3 years and Reduced MTTR by 91% for tier 1 incidents.

 

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

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

Suggested Solutions

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
The Windows functions GetTickCount and timeGetTime retrieve the number of milliseconds since the system was started. However, the value is stored in a DWORD, which means that it wraps around to zero every 49.7 days. This article shows how to solve t…
Learn the basics of modules and packages in Python. Every Python file is a module, ending in the suffix: .py: Modules are a collection of functions and variables.: Packages are a collection of modules.: Module functions and variables are accessed us…
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…

749 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