encoding textbox data for jquery json ajax call

Question

I have a page saving some data from textboxes to the back end using a jquery ajax call thus:

function saveAsYouGo(){
     $.ajax({
        type: "POST",
        url: "Report.aspx/SaveReport",
        data: "{'EditorHTML': '" + _sftabs_rTxtRep.GetHTML() + "', 'Actions' : '" + GetActions() + "', 'Notes': '" + GetNotes() + "'}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function(msg) {
            lastHTMLVal = _sftabs_rTxtRep.GetHTML();
            alert(msg.d);
        }
      });
}

the GetActions and GetNotes basically just grab the text from a number of textboxes along the lines of this

function GetActions(){
    var na = [];
    $('#optionsTable :checkbox:checked').each(function(){
        var textVal, idVal;
        textVal = $(this).parent().parent().next("td").find("textarea").val();
        idVal = $(this).attr("id");
        if(textVal != ""){
            na.push(idVal, textVal);
        }
    });
    return na;
}

but when there are quotes etc in the textareas it busts the ajax call. I have looked a bit for JSON.stringify but this doesnt seem to make any difference. I assume that there is a way to encode the text before sending , so that I can unencode it at the other end before doing what needs doing..?

as ever any help very happily received thanks

EDIT found these little gems which help for most things

function htmlEncode(value){
  return $('<div/>').text(value).html();
}

function htmlDecode(value){
  return $('<div/>').html(value).text();
}

however the above DO NOT WORK for dealing with quotes as far as I can tell and the below which suggested ditching the quotes around the data elements, didn't work at all.

data: {'EditorHTML': _sftabs_rTxtRep.GetHTML() , 'Actions' : GetActions(), 'Notes':GetNotes()},

any other ideas? this is driving me potty

EDIT 2

just ended up wrapping the textVal in an escape thus:

if(textVal != ""){
    cn.push(idVal, escape(textVal));
}

thanks

nat

karim79 · Accepted Answer · 2011-07-26 11:40:16Z

2

Instead of passing a JSON string, just pass an object and jQuery should correctly encode it for submission:

data: {'EditorHTML': _sftabs_rTxtRep.GetHTML(), 'Actions' : GetActions() , 'Notes': GetNotes() }

From the $.ajax manual (under the data option):

Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).

edited Jul 26, 2011 at 11:40

answered Jul 26, 2011 at 11:30

karim79

343k67 gold badges420 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

nat Over a year ago

hi karim, thanks for the reply but it doesn't like that at all..Request Payload EditorHTML=&Notes=tabs_txtCurrentH&Notes=sdgsdgs+dg+''' Response Headers Cache-Control:private Connection:Close Content-Length:91 Content-Type:application/json; charset=utf-8 Date:Tue, 26 Jul 2011 11:57:55 GMT Server:ASP.NET Development Server/10.0.0.0 X-AspNet-Version:2.0.50727 jsonerror:true

nat Over a year ago

slightly red faced didn't realise .net would be helpful and accept the JSON array as an array, changed the WebMethod to accept string[] 's and all is well as that is what the GetActions and GetNotes() return javascript [] arrays.. did end up removing the string wrapping around the data and wrapped it all in a JSON.stringify.. doh!

Collectives™ on Stack Overflow

encoding textbox data for jquery json ajax call

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related