jQuery multiple document.ready

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
Glen GibbOwnerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

BuggyCoderCommented:
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
Glen GibbOwnerAuthor Commented:
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
BuggyCoderCommented:
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
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Glen GibbOwnerAuthor Commented:
All pages reference the same .js file.

Is there no other way to handle the issue?

Capt
0
BuggyCoderCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
jjperezaguinagaCommented:
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
Glen GibbOwnerAuthor Commented:
Many thanks to both experts.  Cleared up the situation.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.