CODEWITHSUNDEEP
javascriptphphtmlajaxjquery-ui
Mirko Fogazzi
Mirko Fogazzi

Reputation: 183

jquery ui accordion from div loaded with ajax

I have a problem with a div loaded dynamically via ajax.

This is my code:

js:

function CaricaListaParametriRicerca(CandidateFamiglie)
{
    var dati = {nome : "caricaListaParametriRicerca", famiglieCandidate : CandidateFamiglie, userId : $("#userID").val()};
    $.ajax({
       type: "GET",
       url: "Ricerca/elaboraRicerca.php",
       data: dati,
       error: function(data) {alert(data);},
       success: function(result) {
            $("#accordion").html("");
            $("#accordion").html(result);
            $("#accordion").accordion({
                collapsible: true
            });
        }
    });
}

$(document).ready(function(){
    $("#famiglieCandidate").selectmenu({
        change: function(){CaricaListaParametriRicerca($(this).val());}
    });
    CaricaListaParametriRicerca("Candidate");
});

I have a select like this:

<label for="famiglieCandidate" id="famiglieCandidateLabel">Classe di ricerca: </label>
<select name="famiglieCandidate" id="famiglieCandidate">
    <option selected='selected'>Candidate</option>
    <option>Famiglie</option>
</select>

As you can see from the js file, I call an ajax request on the "select" change event, and on its success I reload #accordion div.

My problem is: When I load the page for the first time all works great. But if I change the select value, the data loads but accordion fails(it looks in standard style, without jquery ui style ).

Thanks

EDIT: Complete html code

<input type="hidden" id="userID" value='<?php echo($menuLaterale_userID) ?>'>

<script type='text/javascript' src='Ricerca/ricercaScript.js'></script>
<link rel='stylesheet' type='text/css' href='Ricerca/styleRicerca.css'>
<link rel="stylesheet" href="jqueryUi/jquery-ui.css">
<script src="jqueryUi/jquery-ui.js"></script>

<form action="#">

    <label for="famiglieCandidate" id="famiglieCandidateLabel">Classe di ricerca: </label>
    <select name="famiglieCandidate" id="famiglieCandidate">
        <option selected='selected'>Candidate</option>
        <option>Famiglie</option>
    </select>

    </br></br>    

    <label for="accordion">Parametri ricerca:</label>
    <div name="accordion" id="accordion"></div>

</form>

Upvotes: 0

Views: 964

Answers (1)

Alexandr Lazarev
Alexandr Lazarev

Reputation: 12882

You have to destroy accordion instance before initialising it once again.

So your function will look like: 

function CaricaListaParametriRicerca(CandidateFamiglie)
{
    var dati = {nome : "caricaListaParametriRicerca", famiglieCandidate : CandidateFamiglie, userId : $("#userID").val()};
    $.ajax({
       type: "GET",
       url: "Ricerca/elaboraRicerca.php",
       data: dati,
       error: function(data) {alert(data);},
       success: function(result) {
            $("#accordion").html("");
            $("#accordion").html(result);
            if ( typeof $("#accordion").accordion('instance') != 'undefined') {
                $("#accordion").accordion('destroy');
            }   
            $("#accordion").accordion({
                collapsible: true
            });
        }
    });
}

Upvotes: 2

Related Questions