jquery accordion change event missing newContent

Question

Hi there,

I'm using jQuery UI accordion for the first time and I think I'm missing something here. I wrote the following code:

    <div id="theAccordion">
        <h2><a href="#">Header1</a></h2>
        <div>old content 1</div>
        <h2><a href="#">Header2</a></h2>
        <div>old content 2</div>
        <h2><a href="#">Header3</a></h2>
        <div>old content 3</div>
        <h2><a href="#">Header4</a></h2>
        <div>old content 4</div>
        <h2><a href="#">Header5</a></h2>
        <div>old content 5</div>
    </div>
<script type="text/javascript">
    var map = {
        Header1: function(jqObj) { jqObj.append("<p>new content 1</p>"); },
        Header2: function(jqObj) { jqObj.append("<p>new content 2</p>"); },
        Header3: function(jqObj) { jqObj.append("<p>new content 3</p>"); },
        Header4: function(jqObj) { jqObj.append("<p>new content 4</p>"); },
        Header5: function(jqObj) { jqObj.append("<p>new content 5</p>"); }
    };
    function accordionChange(event, ui) {
        ui.newContent.empty();
        eval("map." + ui.newHeader.text() + "(ui.newContent)");
    }
    $(function() {
        $("#theAccordion").accordion({
            change: function(event, ui) { accordionChange(event, ui); }
        });
    });
</script>

The code works as expected, it fires the map functions but no code is appended to the accordion content because the newContent object seems to be empty all the time. I was debugging it with IE8 debugging tools and jqObj.length is zero so no change is made in the newcontent. do you have an idea of what's going on here?

Thanks in advance

Answer 1

It might have something to do with binding, but I'm not sure. Have you tried putting the actual function code in the accordion initialization. Note that I also changed append() to html() since your original content wasn't wrapped in a p.

var map = {
    Header1: function(jqObj) { jqObj.html("new content 1"); },
    Header2: function(jqObj) { jqObj.html("new content 2"); },
    Header3: function(jqObj) { jqObj.html("new content 3"); },
    Header4: function(jqObj) { jqObj.html("new content 4"); },
    Header5: function(jqObj) { jqObj.html("new content 5"); }
};

$(function() {
    $("#theAccordion").accordion({
        change: function(event, ui) {
            ui.newContent.empty();
            eval( "map." + ui.newHeader.text() + "(ui.newContent)");
        }
    });
})

Answer 2

Could it be because you are emptying it before using it? i.e:

ui.newContent.empty();
eval( "map." + ui.newHeader.text() + "(ui.newContent)");

Try replacing the accordionChange callback to this:

function accordionChange(event, ui) {
    var text = ui.newContent.text();
    ui.newContent.empty();
    eval("map." + ui.newHeader.text() + "(text)");
}

Answer 3

Found the solution!

Adding a paragraph in the content solved the problem, so the code changed was this

<div id="theAccordion">
    <h2><a href="#">Header1</a></h2>
    <div><p>old content 1</p></div>
    <h2><a href="#">Header2</a></h2>
    <div><p>old content 2</p></div>
    <h2><a href="#">Header3</a></h2>
    <div><p>old content 3</p></div>
    <h2><a href="#">Header4</a></h2> 
    <div><p>old content 4</p></div>
    <h2><a href="#">Header5</a></h2>
    <div><p>old content 5</p></div>
</div>

Thanks all for your help

Answer 4

Actually -- you had trouble because there's a bug in the accordion widget. I made a patch just now: http://dev.jqueryui.com/ticket/4469#comment:4