jquery accordion effect doesnt work when I use ajax

Question

When I use ajax, I noticed that Jquery effects don't work. The reason is "The new HTML you're adding to the DOM (page) didn't exist when your jquery ran the first time " another similar question

Therefore, I changed my code to following but still I don't get the jquery effects.

Where I have done the mistake?

Previous code

$("#sendemp").click(function(e) {
        e.preventDefault();
        var submit_val = $("#searchbox").val();
        //alert('submitval is ' + submit_val);


        $.ajax( {
            type : "POST",
            //dataType :"jason",
            url : "./wp-admin/admin-ajax.php",
            data : {
                action : 'employee_pimary_details',
                user_name : submit_val
            },
            success : function(data) {
            //      alert('hhh');
                $('#accordion21').html(data);
                // $( "#searchbox" ).autocomplete({
                // source: data
                // });

            }
        });

    });

New code

$("button").on( "click", "#accordion3",function(){ 

$.ajax( {
    type : "POST",
    dataType : "json",
    url : "./wp-admin/admin-ajax.php",
    data : {
        action : 'employee_deatils_search',
        user_name : submit_val
    },
    success : function(data) {
    //      alert('hhh');


        $('#accordion3').html(data);
        $("tr:odd").css("background-color", "#F8F8F8");
        $("#accordion3").accordion({ heightStyle: "fill", active: 0 });
        // $( "#searchbox" ).autocomplete({
        // source: data
        // });

    }
});



} );

I have following submit button

<input type="submit" id="sendemp" value="Search" />

score 0 · Answer 1 · answered Jul 17 '13 at 06:54

0

I don't think your click binding is correct, if you want to handle clicks on button inside #accordion3 change it to:

$("#accordion3").on( "click", "button",function(){...});

answered Jul 17 '13 at 06:54

omma2289

54,161
8
64
68

If the button that triggers the ajax call is always present on DOM then you don't need event delegation. A click handler like in your previous code is enough – omma2289 Jul 17 '13 at 07:00
1

The sintax is correct, check http://api.jquery.com/on/, the thing is I don't know if that's the actual solution to your problem. Was the ajax call in your "previous code" working correctly? if so then you shouldn't need to change `$("#sendemp").click(function(){});` unless #sendemp is inside #acoordion3 whose content is being replaced – omma2289 Jul 17 '13 at 08:35

score 0 · Answer 2 · answered Jul 17 '13 at 13:49

0

It is hard to tell without your html, but it looks like in your old code you are replacing the sendemp button. In your new code your event delegation is incorrectly specified. You are applying delegation to a button element (which doens't exist since your sendemp button is an input element).

Apply delegate to something that is the parent of #sendemp like so:

$('body').on('click', '#sendemp', function() {
     // your ajax call
});

answered Jul 17 '13 at 13:49

drizzie

3,351
2
27
32

I tried both `$('body').on("click", "#sendemp", function(e){ ` and `$(document).on("click", "#sendemp", function(e){ ` but nothing worked – wordpressm Jul 17 '13 at 14:40
1

Please add a jsFiddle so I can better understand whats going on. Mimic the response from the server in your ajax success. – drizzie Jul 17 '13 at 14:46

score 0 · Accepted Answer · answered Jul 17 '13 at 15:13

I could fix the issue, I tried the above solution that is using on method. However, it doesn't make sense to my problem.

As following artical explain I think, Accordion is already instantiated and effects are persistance. When it is called second time, it won't create again since there is already the effects.

Therefore, I needed to destroy it and recreate accordion. support link

I changed the code on success as follows

success : function(data) {
                //      alert('hhh');
                    $('#accordion3').accordion('destroy');
                    $('#accordion3').html(data);

                    $("tr:odd").css("background-color", "#F8F8F8");
                    //$("#accordion3").accordion( "disable" );
                    $("#accordion3").accordion({ active: 0 });

                }

And out of $(document).ready(function() { I added

$(function() {
    $("#accordion3").accordion({ 
    // heightStyle: "fill",
    active: 0 });
  });

Glad to hear you found the solution. Just one note, the last piece of code you say you added outside document.ready but your're using the shorthand `$(function(){});` so you're basically adding a second document.ready function, it's better to keep it in the same one — omma2289, Jul 17 '13 at 16:07

jquery accordion effect doesnt work when I use ajax

3 Answers3