I'm trying to add Ajax to my theme so I can load my posts dynamically. The following code works but for some reason when I wrap the button that fires the loading with another div it doesn't do anything.

Full Code:

JS

jQuery(function($){ 
    $('.loadmore').click(function(){

        var button = $(this),
            data = {
            'action': 'loadmore',
            'query': loadmore_params.posts, 
            'page' : loadmore_params.current_page
        };

        $.ajax({ 
            url : '/wp-admin/admin-ajax.php',
            data : data,
            type : 'POST',
            beforeSend : function ( xhr ) {
                button.text('Loading...'); 
                $('.loadmore').addClass('newcomment');
            },
            success : function( data ){
                if( data ) { 
                    button.text( 'More posts' ).prev().before(data); 
                    $('.loadmore').removeClass('newcomment');
                    loadmore_params.current_page++;

                    if ( loadmore_params.current_page == loadmore_params.max_page ) 
                        button.remove(); 

                } else {
                    button.remove();
                }
            }
        });
    });
});

The problem:

<div><button class="loadmore">Load More</button></div>

It works without the div class

Finally this is the first time I'm using admin-ajax.php in the frontend is it safe to use for my approach?

Thank you

I'm trying to add Ajax to my theme so I can load my posts dynamically. The following code works but for some reason when I wrap the button that fires the loading with another div it doesn't do anything.

Full Code: https://pastebin/8DhmC32R

JS

jQuery(function($){ 
    $('.loadmore').click(function(){

        var button = $(this),
            data = {
            'action': 'loadmore',
            'query': loadmore_params.posts, 
            'page' : loadmore_params.current_page
        };

        $.ajax({ 
            url : '/wp-admin/admin-ajax.php',
            data : data,
            type : 'POST',
            beforeSend : function ( xhr ) {
                button.text('Loading...'); 
                $('.loadmore').addClass('newcomment');
            },
            success : function( data ){
                if( data ) { 
                    button.text( 'More posts' ).prev().before(data); 
                    $('.loadmore').removeClass('newcomment');
                    loadmore_params.current_page++;

                    if ( loadmore_params.current_page == loadmore_params.max_page ) 
                        button.remove(); 

                } else {
                    button.remove();
                }
            }
        });
    });
});

The problem:

<div><button class="loadmore">Load More</button></div>

It works without the div class

Finally this is the first time I'm using admin-ajax.php in the frontend is it safe to use for my approach?

Thank you

• wp-query
• ajax
• jquery
• security

• So it works, just not when you put it in a <div>? That's an odd behaviour. When you check your dev tools is it still sending the data? – Tony Djukic Commented May 10, 2020 at 18:22
• @TonyDjukic thanks for the reply, yes it works only if I have the <button> outside in anything not only in a <div>, <button class="loadmore">Load More</button>. It shows me the message in the console when the data POST successfully. I'm trying to figure out what's wrong hours now. – trunks Commented May 10, 2020 at 18:31
• This is a shot in the dark and I can't even begin to 'guess' why it might help, but can you try adding an id="loadmore" to the button and then modifying your JS to match? Maybe there's an ambiguity in the targeting if you wrap it. I can't imagine there would be, but it's a small change. – Tony Djukic Commented May 10, 2020 at 18:37
• @TonyDjukic Unfortunately it didn't work, here is what I'm trying to show. <div class="show-more col-12"><button class="loadmore">Load More</button></div> Thank you – trunks Commented May 10, 2020 at 18:43
• It was worth a shot... ...this is mind boggling - it makes no sense that it doesn't work. The only thing I'm wondering is if there's something in the success statement that prevents the returned items from being loaded if the button is wrapped in a div. I don't see the instruction where you tell it to where to load the returned results. Am I missing something? – Tony Djukic Commented May 10, 2020 at 18:46

1 Answer 1

After a chat session between trunks (the OP) and I, here's what we discerned the issue was.

In success within the AJAX there was a chained series of instructions. .text().prev().before();

Once the button was added into a div, this presented itself as a problem because the new posts were appearing before the button, but the button was changing, etc.

So instead, this is what works to address it, separating the actions taken and targeting both the parent div and the button. (This is just the 'success' portion of the AJAX, the rest is all valid as it was.)

success : function( data ){
    if( data ) {
        //this loads the new posts from the ajax callback
        $( '.show-more' ).prev().before(data);
        //this modifies the button
        button.text( 'More posts' ); 
        $('.loadmore').removeClass('newcomment');
        loadmore_params.current_page++;
        if ( loadmore_params.current_page == loadmore_params.max_page ) 
        button.remove(); 
    } else {
        button.remove();
    }
}