SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to insert Multiple HTML content from a single page

    Hello everyone,

    I have about 10 JQuery Books and they all talk about using Ajax(JQuery Load function) to insert either an HTML page or fragments of an HTML page into another page.

    However, amazingly none of these books mentioned getting multiple items using the same function(document.ready).

    Here is what I mean.

    I have a document.ready function which I use to get specific content from a page. However, to get additional items, I need to set up additional document.ready function.

    So if I was retrieving 3 sets of content from a page, I will set up my script like this:

    Code:
    $(document).ready(function() {
    $('.importContent1').click(function () {
    $('.importToHere').load('from-this-page.php  #fromThisDivA');
    return false;
    });
    });
    
    $(document).ready(function() {
    $('.importContent2').click(function () {
    $('.importToHere').load('from-this-page.php  #fromThisDivB');
    return false;
    });
    });
    
    $(document).ready(function() {
    $('.importContent3').click(function () {
    $('.importToHere').load('from-this-page.php  #fromThisDivC');
    return false;
    });
    });
    And the HTML

    Code:
    <a class="importContent1" href="#">Get Content 1</a>
    <a class="importContent2" href="#">Get Content 2</a>
    <a class="importContent3" href="#">Get Content 3</a>

    Is there a leaner better way to do this? Again all the books tells you how to grab a content, which I have done but do I have to create a new function for each item?


    Thanks everyone!

    IC

  2. #2
    SitePoint Evangelist speda1's Avatar
    Join Date
    Jan 2002
    Posts
    550
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You only need one document.ready function. That gets fired once the dom has loaded. So you can wrap everything you want done at that time in that function.


    $(document).ready(function() {

    $('.importContent1').click(function () {
    $('.importToHere').load('from-this-page.php #fromThisDivA');
    return false;
    });

    $('.importContent2').click(function () {
    $('.importToHere').load('from-this-page.php #fromThisDivB');
    return false;
    });

    $('.importContent3').click(function () {
    $('.importToHere').load('from-this-page.php #fromThisDivC');
    return false;
    });

    });

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by speda1 View Post
    You only need one document.ready function. That gets fired once the dom has loaded. So you can wrap everything you want done at that time in that function.
    jQuery has for a long time had a shortcut where instead of using document ready:

    Code javascript:
    $(document).ready(function () {
        ...
    });

    You can instead make use of the jQuery callback which has existed ever since version 1.0, where you pass the function to the jQuery object to achieve exactly the same result.

    Code javascript:
    $(function () {
        ...
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by speda1 View Post
    You only need one document.ready function. That gets fired once the dom has loaded. So you can wrap everything you want done at that time in that function.

    Thanks for your time and effort! You truly make a difference.

    I was not aware of that but you showed me something new, well new for me.


    IC

  5. #5
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    jQuery has for a long time had a shortcut where instead of using document ready:

    Code javascript:
    $(document).ready(function () {
        ...
    });

    You can instead make use of the jQuery callback which has existed ever since version 1.0, where you pass the function to the jQuery object to achieve exactly the same result.

    Code javascript:
    $(function () {
        ...
    });
    Thanks Paul! You're the MAN!!

    IC


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •