Question

I have a problem with an accordion not working when receiving contents from another page via AJAX. THe page is this one: http://jbm.utad.pt/testes/tempo/index.php

As soon as the page loads it sends a default city name to processtempo.php which with AJAX shoots the results back to a div:

In the processtempo.php I have the HTML for an accordion but the jQuery for it is in index.php. Is this accordion not working because the HTML have to be in the main page or did I screw up with the jQuery?

You can view the accordion jQuery script in the source… I haven’t yet put it in specific js file.

Thanks so much for all the help possible and sorry for this vague question

Cheers

Answer 1

You are assigning a click() event to .tempo-head, and doing a bunch of other things to elements before they are loaded onto the page by the ajax routine.

You’ll need to get the latest version of JQuery for the following to work. I noticed that you have an outdated version currently (1.4.2)

Try changing this:

$('.tempo-head').click(function () {

to

$('#sidebar').on('click', '.tempo-head').click(function () {

OR

Move all your accordion routines to inside the success callback in your ajax call like below.

$(document).ready(function(){

    var cidade2='penafiel';
    var dataString = 'cidade='+ cidade2;
    $.ajax({ type: "POST", url: "processtempo.php", data: dataString, cache: false,
        success: function(html){
            $("#exibe_tempo").html(html);
        }
    });

    $(".cidade").change(function(){
        var cidade=$(this).val();
        var dataString = 'cidade='+ cidade;

        $.ajax({ type: "POST", url: "processtempo.php", data: dataString, cache: false,
            success: function(html){
                $("#exibe_tempo").html(html);

                //Add Inactive Class To All Accordion Headers
                $('.tempo-head').toggleClass('head-off');

                //Set The Accordion Content Width
                var contentwidth = $('.tempo-head').width();
                $('.tempo-cont').css({'width' : contentwidth });

                //Open The First Accordion Section When Page Loads
                //$('.tempo-head').first().toggleClass('head-on').toggleClass('head-off');
                //$('.tempo-cont').first().slideDown().toggleClass('tempo-cont');

                // The Accordion Effect
                $('.tempo-head').click(function () {        
                        if($(this).is('.head-off')) {
                            $('.head-on').toggleClass('head-on').toggleClass('head-off').next().slideToggle().toggleClass('tempo-cont');
                            $(this).toggleClass('head-on').toggleClass('head-off');
                            $(this).next().slideToggle().toggleClass('tempo-cont');
                        }

                        else {
                                $(this).toggleClass('head-on').toggleClass('head-off');
                                $(this).next().slideToggle().toggleClass('tempo-cont');
                        }

                });


            }
        });
    });


    return false;

}); // END DOC READY