How to correctly make return button in Ajax?

user_9497826 0
Viewed 229

I created a side panel with buttons. On click I load specific php file assigned to each button. How to correctly add functionality that will return us to the default button list?

HTML:

<div class="sidemenu">
    <div class="content">
        <button data-content="first">Load first content</button>
        <button data-content="second">Load second content</button>
        <button data-content="third">Load third content</button>
    </div>
</div>

Script:

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

    $( '.sidemenu button' ).on('click', function( event ) {
        event.preventDefault();

        var content = $( this ).data( 'content' );

        $( '.sidemenu .content' ).empty();

        $.ajax( {
            url: ajaxobject.ajaxurl,
            type: 'get',
            dataType: 'html',
            data: { 
                action: 'sidemenu_content',
                content: content,
            },
            success: function( result) {
                $( '.sidemenu .content' ).append( result );
                console.log(result);

            }
        });

    });
});

PHP:

function sidemenu_content() {
if( isset( $_GET['content'] ) ) {
    $content= $_GET['content'];
    if ( $content == 'first' ) {
        require_once( get_template_directory() . '/sidemenu/first.php' );
    } elseif ( $content == 'second' ) {
        require_once( get_template_directory() . '/sidemenu/second.php' );
    } elseif ( $content == 'third' ) {
        require_once( get_template_directory() . '/sidemenu/third.php' );
    }
}
wp_die();
}

I tried to add <button data-content="return">Return</button> in each of three php files and in the sidemenu_content function:

if ( $content == 'return' ) {
    require_once( get_template_directory() . '/sidemenu/return.php' );
}

But unfortunately it doesn't work.

UPDATE

Almost everything works with this code. "Return" button appear but onclick doesn't really return to the button list.

var backup;
jQuery( document ).ready( function( $ ) {

    $('.sidemenu button').on('click', function( event ) {
        event.preventDefault();

        var content = $( this ).data( 'content' );
        $.ajax( {
            url: ajaxobject.ajaxurl,
            type: 'get',
            dataType: 'html',
            data: { 
                action: 'sidemenu_content',
                content: content,
            },
            success: function( result) {
                backup = $( '.sidemenu .content' ).innerHTML;
                $( '.sidemenu .content' ).innerHTML = result;
                $( '.sidemenu .content' ).empty();
                $( '.sidemenu .content' ).append( '<button class="return">Return</button>' + result );
                $( '.sidemenu button.return').on('click', function( event ) {
                    event.preventDefault();
                    $( '.sidemenu .content' ).innerHTML = backup;
                })
            }
        })
    })
});
php jquery ajax
1 Answers

I think it's good for performance if when clicked on return button browser doesn't send AJAX to get already have code. I add hidden block to backup buttons for reuse after click on return

<div class="sidemenu">
    <div class="content">
        <button data-content="first">Load first content</button>
        <button data-content="second">Load second content</button>
        <button data-content="third">Load third content</button>
    </div>
    <div class="hidden" style="display:none;"></div>
</div>

And jQuery:

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

    $('.sidemenu button').on('click', function( event ) {
        event.preventDefault();

        var content = $( this ).data( 'content' );
        $.ajax( {
            url: ajaxobject.ajaxurl,
            type: 'get',
            dataType: 'html',
            data: { 
                action: 'sidemenu_content',
                content: content,
            },
            success: function( result) {
                $( '.sidemenu .hidden' ).append($( '.sidemenu .content button' ));
                $( '.sidemenu .content' ).html(result);
                $( '.sidemenu .content' ).append('<button class="return">Return</button>');
                $('.sidemenu button.return').on('click', function( event ) {
                    event.preventDefault();
                    $( '.sidemenu .content' ).empty();
                    $( '.sidemenu .content' ).append($( '.sidemenu .hidden button' ));
                })
            }
        })
    })
});

How it Works: Before empty all data I backupped and after successfull ajax response I empty data end append response data. After response data I append return button. If you click this button all data in .content empty and append backupped code. P.S You can optimize this code

user_38342390
Related