开发者

Jquery toggle fails on the data retrieved from Ajax Post

开发者 https://www.devze.com 2023-03-26 03:19 出处:网络
I am trying to use a jQuery plugin to implement Expand all Divs/ Collapse All Divs/ expand or collapse individual Divs, Here is the Jquery plugin : http://www.adipalaz.com/experiments/jquery/multiple_

I am trying to use a jQuery plugin to implement Expand all Divs/ Collapse All Divs/ expand or collapse individual Divs, Here is the Jquery plugin : http://www.adipalaz.com/experiments/jquery/multiple_expand_all_collapse_all.html. The only diferrence is i am trying to apply these effects to the Divs retrieved from AJAX post.

Below is my current flow:

Post开发者_JAVA百科 data to a url(getData.php) fromindex.php and retrieve Html DIVs-> perform toggles on the Divs. CSS required for te DIVs are loaded on Index.PHP already.

A toggle button is attached using jquery and CSS to the retrieved DIV, on the index Page. The java script required to toggle the div is already present on the index.php Page. But the toggle buttons doesn't appear on the retrieved div because they are fired even before the content is retrieved. I tried using ajaxStop, to trigger ajax completion and then fireing the toggle functions but no use.below is my sample code.

     $.ajax({
                                type: 'POST',
                                url: 'getTicketSummary.php', 
                                data: {ref_no: ref_no},
                                success: function(data) {
                                    $('#wrapper').hide().html(data).slideDown('slow');
                                    $(function() {
     $("#content h3.expand").toggler();
        $("#content div.demo").expandAll({trigger: "h3.expand", ref: "h3.expand"});
    });
                            }
                        });
                    }
                });

$(function() {
     $("#content h3.expand").toggler();
        $("#content div.demo").expandAll({trigger: "h3.expand", ref: "h3.expand"});
    });

//this is my toggle function, as am using a jquery plugin, expand.js, now I tried adding the function after Post request but it doest seem to work.


following code is enough for this

 $.ajax({
       type: 'POST',
       url: 'getTicketSummary.php', 
       data: {ref_no: ref_no},
       success: function(data) {
                $('#wrapper').hide().html(data).slideDown('slow',function(){
                  $("#content h3.expand").toggler();
                  $("#content div.demo").expandAll({trigger: "h3.expand", ref: "h3.expand"});
                });
       }
  });


Never mind,

I figured itout. I used $('#wrapper').ajaxStop to trigger the completion of ajax request and fired a function to enable toggles on completion.

my code is

    $.ajax({
                                type: 'POST',
                                url: 'getTicketSummary.php', 
                                data: {ref_no: ref_no},
                                success: function(data) {
                                    $('#wrapper').hide().html(data).slideDown('slow');
                                    $(function() {
     $("#content h3.expand").toggler();
        $("#content div.demo").expandAll({trigger: "h3.expand", ref: "h3.expand"});
    });
                            }
                        });
                    }
                });

$('#wrapper').ajaxStop(function() { 
     $("#content h3.expand").toggler();
        $("#content div.demo").expandAll({trigger: "h3.expand", ref: "h3.expand"});
    });

Hope this helps some one with a similar problem,Thanks!

0

精彩评论

暂无评论...
验证码 换一张
取 消