Ajax submit errors contain html formatting

Question

SO I'm using Solsapce's User for usersto edit their profile and have discovered something I'm not sure how to describe or fix.

I have a normal edit profile with a few fields, I have declared certain fields to be required, the syntax is identical to SAFE forms required="fielda|fieldb" etc.

When the form is submitted with all things filled in correctly, the ajax does its thing nicely, if one of the required fields is missing content, then I cannot get it to show anything meaningful.

 $('.user-edit').ajaxForm({  
     target: '#confirmation',
     dataType: 'json', 
     success: function(result) {
         $("#confirmation").html("<div class='success'>" +result.content+"</div>");
         $("#confirmation").hide();
         $("#confirmation").fadeIn(500);
     },

    error: function(jqxhr) {
        $("#confirmation").html("<div class='alert'>" +jqxhr.responseText+"</div>");
        //$("#confirmation").html("<div class='alert'>" +jqxhr.error+"</div>"); //Gives strange Javascript error (see comment below)
        $("#confirmation").hide();
        $("#confirmation").fadeIn(500);
     }
 });

Here's the kicker, Firebug shows this is the error response

{"error":"<p>The following fields are required: <ul><li>Birthday<\/li><\/ul><\/p>"}

This is whats displayed on the page, it includes the "error" and brackets and everything!

<div class="alert">{"error":"<p>The following fields are required: </p><ul><li>Birthday&lt;\/li&gt;&lt;\/ul&gt;&lt;\/p&gt;"}</li></ul></div>

On a successful post, this is the Firebug response and as I'm targeting "result.message" it displays fine:

{"success":true,"heading":"Successful Submission!","message":"Your profile has been successfully updated","content":"Your profile has been successfully updated"}

I've tried all manner of variations to get this ajax error displaying only the error content and am now doubtful that it ever will. Of course I could be a huge dumbass and missed something :)

Answer 1

Looks like it's outputting the JSON object as a string because you've not specified the specific content to display. If you look at the one that's working, you're getting back

{ "success":true,
  "heading":"Successful Submission!",
  "message":"Your profile has been successfully updated",
  "content":"Your profile has been successfully updated"
}

and you're calling it with

$("#confirmation").html("<div class='success'>" +result.content+"</div>");

(i.e. you're specifying you want the content part of the object). The error you're getting back seems to be OK, but is a JSON object, not an HTML entity, i.e.

{"error":"<p>The following fields are required: </p><ul><li>Birthday&lt;\/li&gt;&lt;\/ul&gt;&lt;\/p&gt;"}

So you probably need to just reference it:

$("#confirmation").html("<div class='alert'>" +jqxhr.error+"</div>");

Answer 2

For my future self and others trying to work ajax into EE, when editing your profile via front end (I'm using Solspace User with Malsup Ajax Form) but also applies when using PM (Messaging Module)

IF everything is filled in EE returns a proper Ajax/JSON reply yet if required fields are empty then EE returns a 200 success message with a plain text error. This is the reply if required field iss missing:

Error: Message must contain at least one recipient.

You have to break apart the message, like this

$('#compose').ajaxForm({
    target: '#confirmation',
    dataType: 'text',
        success: function(result) {
        //Fuckin EE, even when no fields filled in, returns "success", gotta break it up
        var data = result.split(":"); // The magic !!
        //console.log(data[0]);
        if (data[0] == 'Error'){//Use the first part of the split
            $("#confirmation").html("<div class='alert'><p>Ah c'mon man, "+data[1]+"</p></div>");
            $("#confirmation").hide();
            $("#confirmation").fadeIn(500);
        }else{ 
        //In this case proper success needs redirect but you could do whatever
        document.location.href = '/inbox';
            //$("#confirmation").html("<div class='alert'>"+result+"</div>");
            //$("#confirmation").hide();
            //$("#confirmation").fadeIn(500);
        }
        }
});

So when EE replies back with plain text, it can be useful. Using the exact same ajax behaviour above, when dealing with HTML formatted response like in my original question, use this to convert it into a JSON response

error: function(event) {
var data = eval("(" + event.responseText + ")");
$("#confirmation").html("<div class='alert'>"+data.error+"</div>");

I taught myself a lot trying to figure this out and hopefully this may help someone else :)