Question

A quiz form is completed by the user and the “Score Quiz” link is clicked. What is wanted is for the score to be tallied, results sent to server via jQuery ajax call, and the fancybox presenting the user notice.

What is happening is the tally is done and the ajax call is initiated and the page reloads. If I comment out the ajax call, the fancybox appears as desired. Using WordPress 3.4.2.

What might be going on?

    jQuery('#checkQuiz').click(function(){
        var ajaxurl = '<?php echo admin_url('admin-ajax.php'); ?>';
        // tally correct answers
        var quizData = tallyScore();
        // display user notice
        jQuery('a#hiddenAnchor').trigger('click');
        // store the data while the user is reading the results display
        jQuery.ajax({
            type:"post", 
            url:ajaxurl, 
            data:quizData
        });
        return false;
    });

NOTE 1: I was able to catch an error in the Firebug console:

NS_ERROR_XPC_NOT_ENOUGH_ARGS: Not enough arguments [nsIDOMLocation.replace]

The file reported is jQuery.js and that appears to be a version 1.7.2. I noted that jQuery current release is 1.8.1. I wonder if that is part of the problem.

NOTE 2: I forgot to mention that this code is part of page template in a child theme. Similar ajax calls made on other pages in the web app work fine. I added a post to the WordPress.org troubleshooting forum in case someone there doesn’t visit stackoverflow.

NOTE 3: I tested this with the standard theme for wordpress “twentyeleven”. The same error occurred. I am running out of options to test.

Answer 1

After testing and decomposing the code involved, the error was found in the data array passed into the ajax call. To aid anyone seeking answers for a similar error here is what I found in the code.

quizData is an array structured for the WordPress ajax handler.

Code As Found

var quizData = {
    action: 'save_quiz',
    item: invoice_item,
    lesson: jQuery("#lesson"),
    score: ratio };

There are two problems with this code. First, the jQuery call is assigning a jQuery object to the array value element “lesson”. This results in an “undefined” value in the array that creates the error condition. The missing bit here is the “.val()” function invocation.

The second one may be the code architecture of the project, but it appears that a jQuery call within array assembly block does not work as expected. In my tests, the data array contained an empty value.

Resolution

var lesson_id = jQuery("#lesson").val();
var quizData = {
    action: 'save_quiz',
    item: invoice_item,
    lesson: lesson_id,
    score: ratio };

I hope this helps someone.