Question

Long time reader, first time poster.

Working on a web site at http://www.howardpitch.com/, and I’m having a really frustrating time with the quiz on the front page. You select one of four answers and click the “Check My Answer” button. This will tell you if you were right or wrong and present you with a button for the next question. You can play this all day long in Firefox, Chrome, etc. but in Internet Explorer it keeps looping over the same question after you answer the first one.

jQuery’s live method is used with the click event to handle getting the next question and returning it to the front page via an AJAX call as the “Next Question” button doesn’t exist when the DOM is first loaded.

Any guidance/improvements to my code is greatly appreciated. Constructive and relevant criticism is how we learn.

This is what I have on the jQuery side of things.

$('.btnCheckAnswer').live('click', function(e){
    $.ajax({
        url:'/includes/quiz-check.php',
        type:'POST',
        data:$('#frm_quiz').serialize(),
        success:function(data){
            $('#game').replaceWith(data);
        }
    });
    e.preventDefault();
    return false;
});

$('.nextQuestion').live('click', function(e){
    $.ajax({
        type:'GET',
        url:'/includes/quiz.php',
        success:function(data){
            $('#game_response').replaceWith(data);
        }
    });
    return false;
});

Thanks very kindly in an advance.

Answer 1

It could be a caching issue. Try setting the cache option to false, and/or using a cache breaker (which is a random number, or timestamp, passed along with the URL):

$('.nextQuestion').live('click', function(e){
    $.ajax({
        type:'GET',
        cache: false,
        url:'/includes/quiz.php?' + Math.round(new Date().getTime() / 1000),
        success:function(data){
            $('#game_response').replaceWith(data);
        }
    });
    return false;
});

You could also try using a POST request instead.