CODEWITHSUNDEEP
jqueryhtmlajax
user3688215
user3688215

Reputation: 1

Applying jQuery code to AJAX loaded content

I have these HTML lines

<h1 class="trigger">HEADLINE ONE</h1>
<div class="toggle_container">
    BODY TEXT ONE
</div>

and this jQuery code in the <head> section of my site

$(document).ready( function() {
    $('.trigger').not('.trigger_active').next('.toggle_container').hide();
    $('.trigger').click( function() {
        var trig = $(this);
        if ( trig.hasClass('trigger_active') ) {
            trig.next('.toggle_container').slideToggle('slow');
            trig.removeClass('trigger_active');
        } else {
            $('.trigger_active').next('.toggle_container').slideToggle('slow');
            $('.trigger_active').removeClass('trigger_active');
            trig.next('.toggle_container').slideToggle('slow');
            trig.addClass('trigger_active');
        };
        return false;
    });
});

After the page is loaded and the jQuery code is applied, my HTML output looks like this:

<h1 class="trigger">HEADLINE ONE</h1>
<div class="toggle_container" style="display: none;">
     BODY TEXT ONE
</div>

So far everything works fine. But here comes my problem: When I'm loading a new HTML block with AJAX - which looks like this:

<h1 class="trigger">HEADLINE TWO</h1>
<div class="toggle_container">
    BODY TEXT TWO
</div>

... it doesn't get rendered with the above jQuery code. So how can I apply the jQuery code to this new loaded HTML block?

EDIT: HERE's THE AJAX

jQuery(document).ready(function($) {

    // The number of the next page to load (/page/x/).
    var pageNum = parseInt(pbd_alp.startPage) + 1;

    // The maximum number of pages the current query can return.
    var max = parseInt(pbd_alp.maxPages);

    // The link of the next page of posts.
    var nextLink = pbd_alp.nextLink;

    /**
     * Replace the traditional navigation with our own,
     * but only if there is at least one page of new posts to load.
     */
    if(pageNum <= max) {
        // Insert the "More Posts" link.
        $('#content')
            .append('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')
            .append('<p id="pbd-alp-load-posts"><a href="#">↓ Archive</a></p>');

        // Remove the traditional navigation.
        $('.navigation').remove();
    }


    /**
     * Load new posts when the link is clicked.
     */
    $('#pbd-alp-load-posts a').click(function() {



        // Are there more posts to load?
        if(pageNum <= max) {

            // Show that we're working.
            $(this).text('...');

            $('.pbd-alp-placeholder-'+ pageNum).load(nextLink + ' .post',
                function() {
                    // Update page number and nextLink.
                    pageNum++;
                    nextLink = nextLink.replace(/\/page\/[0-9]?/, '/page/'+ pageNum);

                    // Add a new placeholder, for when user clicks again.
                    $('#pbd-alp-load-posts')
                        .before('<div class="pbd-alp-placeholder-'+ pageNum +'"></div>')

                    // Update the button message.
                    if(pageNum <= max) {
                        $('#pbd-alp-load-posts a').text('Older entries');
                    } else {
                        $('#pbd-alp-load-posts a').text('All items loaded.');
                    }
                }
            );
        } else {
            $('#pbd-alp-load-posts a').append('.');
        }   

        return false;
    });
});

Upvotes: 0

Views: 718

Answers (2)

PeterKA
PeterKA

Reputation: 24638

After the ajax content is successfully appended to the DOM you want to run the following piece of code again:

$('.trigger').not('.trigger_active').next('.toggle_container').hide();

Then you want to make sure that you use event delegation so the clicking will also work on the dynamically inserted content:

$(document).on('click', '.trigger', function() {
    //the rest of your code
});

Upvotes: 4

Mathews
Mathews

Reputation: 909

When you load the partial html with AJAX, your javascript in head won't get executed.

Potential solution

Have the following script in head

function init(){
$('.trigger').not('.trigger_active').next('.toggle_container').hide();
    $('.trigger').click( function() {
        var trig = $(this);
        if ( trig.hasClass('trigger_active') ) {
            trig.next('.toggle_container').slideToggle('slow');
            trig.removeClass('trigger_active');
        } else {
            $('.trigger_active').next('.toggle_container').slideToggle('slow');
            $('.trigger_active').removeClass('trigger_active');
            trig.next('.toggle_container').slideToggle('slow');
            trig.addClass('trigger_active');
        };
        return false;
    });
}

$(document).ready( function() {
    init();
});

And in the HTML loaded by the AJAX should look like this

<h1 class="trigger">HEADLINE TWO</h1>
<div class="toggle_container">
    BODY TEXT TWO
</div>
<script>init();</script>

Upvotes: 0

Related Questions