JQuery function suddenly stopped working with error converting Javascript argument

Question

about a year ago I wrote a JQuery/Javascript script which makes an ajax call to a PHP page to change a user password, and it has been working wonderfully ever since. Earlier today I started getting complaints that the ajax call is no longer working. When I go to submit the password change form I get the following error:

Could not convert JavaScript argument arg 0 [nsIDOMDocumentFragment.appendChild] http://www.site.com/js/jquery-1.4.4.min.js Line 124

Even though this error occurs, the user's password is changed, and the ouput from the PHP is exactly as it should be... a properly formatted json string:

{"Authenticated":{"0":"false"},"MessageString":{"0":"Your User Password Was Changed Successfully."},"PasswordChanged":{"0":"true"}}

None of the files associated with this project have been changed in several months, and this form gets used at least a few times a day, so I'm not sure why it suddenly stopped working.

Here is the script I am running, and I am running it with JQuery 1.4.4:

function makePasswordRequest() {
    email = jQuery("#email").val();
    currentPassword = jQuery("#currentPassword").val();
    newPassword = jQuery("#newPassword").val();
    newPasswordRetype = jQuery("#newPasswordRetype").val();
    jQuery.post("../changeUserPassword.php", { 
            email: email, 
            currentPassword: currentPassword, 
            newPassword: newPassword, 
            newPasswordRetype: newPasswordRetype 
        },
         function(data){
           if(data.PasswordChanged[0] == true || data.PasswordChanged[0] == "true"){
                jQuery("#notificationArea").removeClass("failure");
                jQuery("#notificationArea").addClass("success");
           }
           else{
                jQuery("#notificationArea").removeClass("success");
                jQuery("#notificationArea").addClass("failure");
           }
           jQuery("#notificationArea").html(data.MessageString);
         }, "json");
};
function resetPasswordRequest() {
    email = jQuery("#email2").val();
    jQuery.post("../resetUserPassword.php", { 
            email: email,  
        },
         function(data){
           if(data.PasswordChanged[0] == true || data.PasswordChanged[0] == "true"){
                jQuery("#notificationArea2").removeClass("failure");
                jQuery("#notificationArea2").addClass("success");
           }
           else{
                jQuery("#notificationArea2").removeClass("success");
                jQuery("#notificationArea2").addClass("failure");
           }
           jQuery("#notificationArea2").html(data.MessageString);
         }, "json");
};
jQuery(document).ready(function(){
    jQuery("#passwordChangeForm").submit(function(e){
        e.preventDefault();
        makePasswordRequest();
    });
    jQuery("#passwordResetForm").submit(function(e){
        e.preventDefault();
        resetPasswordRequest();
    });
});

I can't figure out what the problem is, especially since this has been working well for the last year. Any help would be greatly appreciated!

Answer 1

I don't know if this would be a problem, but when you're setting the inner HTML of the one element with:

jQuery("#notificationArea").html(data.MessageString);

data.MessageString is {"0":"Your User Password Was Changed Successfully."}, so I wonder if that could be a problem? Wouldn't you want data.MessageString[0]?

Answer 2

Im pretty sure the problem lies in jquery not detecting it's JSON and not converting JSON properly. Try sending the proper headers right before the output.

header('Content-Type: application/json');

What must have changed is your server's config. Which doesn't really depend on you