CODEWITHSUNDEEP
jqueryajax
NaN
NaN

Reputation: 1306

Dynamically added content no longer opens accordion

I have an accordion that opens within a modal window. The accordion is no longer working because I'm creating the content for the modal dynamically now, where before, the data was hard coded in my HTML, so everything functioned as expected.

This is what I have now for my AJAX call:

      ...
      success : function(data)
      {
        $('<div/>', {
          id:'modal'
        }).html(data).appendTo('body');

        $('#modal').popup({
          autoopen  : true,
        });
      },

And this is the call for the accordion:

$('.accordion').accordion({
    collapsible: true
});

The modal window opens no problem, but the accordion does not collapse or open anymore. I can also see that there are no events tied to the accordion, and before the changes, there were.

Because the content for my modal is being created dynamically now, is there a way to get the accordion functioning again?

Upvotes: 1

Views: 218

Answers (2)

Eddie
Eddie

Reputation: 26854

You have to refresh the accordion every time you do an edit.

$('.accordion').accordion("refresh");

Upvotes: 1

Ivan Gajic
Ivan Gajic

Reputation: 486

It's probably because when you do $('.accordion').accordion({..., you don't have ".accordion" class, because AJAX is not done yet, and you set up accordion on on non existing class. It's similar with click events in jquery. Quick workaround for this is to setup your accordion in "success" function of AJAX. Like this:

success : function(data)
  {
    $('<div/>', {
      id:'modal'
    }).html(data).appendTo('body');

    $('.accordion').accordion({
        collapsible: true
    });

    $('#modal').popup({
      autoopen  : true,
    });
  },

Or like Eddie said, you can use $('.accordion').accordion("refresh");, Like this:

success : function(data)
    {
        $('<div/>', {
            id:'modal'
        }).html(data).appendTo('body');

        $('.accordion').accordion("refresh");
        $('#modal').popup({
            autoopen  : true,
        });
    },

And it's important to put it after html(data).appendTo('body');. I hope I helped to understand the problem.

Upvotes: 0

Related Questions