0

I have this sample HTML, that needs to be passed through ajax to a server side function, replace some variables and then passed back to be displayed AS HTML.

But it gets encoded, and html sanitised so many times I get confused!

The html is being passed in this form:

"<style type="text/css">* {↵    margin-top: 0px;↵  …↵       etc

in the BackEnd it appears like this: (RAW- obviously url encoded)

%22%3Cstyle+type%3D%5C%22text%2Fcss%5C%22%3E*+%7B%5Cn++++margin-top%3A+0px%3B%5Cn++++margin-

then its urlDecoded: 

"<style type=\"text/css\">* {\n    margin-top: 0px;\n    margin-bottom: 0px;\n    padding: 0px;\n    border: none;\n    line-height: normal;\n    outline: none;\n

Then its sent back to the ajax and received from the ajax like this:

"'"<style type=\\"text/css\\">* {\\n margin-top: 0px;\\n margin-bottom: 0px;\\n padding: 0px;\\n border: none;\\n line-height: normal;\\n outline: none;\\n list-

What do I have to do, so that I can take this string that Ajax receives and display it normal as HTML within a div? why are there so many \n and \t? Even when I parsed the HTML it just replaced them with HTML special characters but still wasn't rendered by the browser.

Ajax:

        $.ajax({
        type: "POST",
        async: false,
        url: "url",
        data: {htmlTemplate: JSON.stringify(data.html)},
        success: function (Data) {
            ajaxOutput = Data;
        },
        error: function (err) {

        }
    });
czioutas
  • 1,032
  • 2
  • 11
  • 37
  • Can you describe a little more about what you're doing on the server side? While it's a bit unorthodox to JSON.strinify naked HTML (as opposed to some JS object/data), my tests show that JSON.stringify is returning the HTML pretty much untouched. The data will be encoded enroute. But it's more important to know what happens to it code-wise before you return the result. – Stephen Farmer Oct 21 '14 at 01:16
  • How should i pass naked html to the server side? just url encode it and pass it without JSON? (I am really asking). Well the server side code, decodes the url encoding, replaces some variables and then sends it back as json again. – czioutas Oct 21 '14 at 06:43
  • Why not use Ajax to fetch the variables you're injecting on the server and modify the HTML on the client? Does the server need to process the original HTML before knowing what changes need to be made? If so, you could give the server the information it needs in a JSON object instead of HTML. Scraping away the markup from the Ajax calls is not only performant, it'll allow you to debug easier because it'll be easier to read. – Stephen Farmer Oct 21 '14 at 15:03
  • Why send HTML at all? Why not just send only the pertinent data? – Mike Brant Oct 21 '14 at 15:21
  • Because I need it to be generic and only the server side code knows which variables need to be replaced, the front-end is unaware of them. But in the end I removed the JSON transformation and managed to get the raw HTML back. – czioutas Oct 22 '14 at 09:08

1 Answers1

0

Why not use Ajax to fetch the variables you're injecting on the server and modify the HTML on the client? Does the server need to process the original HTML before knowing what changes need to be made? If so, you could give the server the information it needs in a JSON object instead of HTML. Scraping away the markup from the Ajax calls is not only performant, it'll allow you to debug easier because it'll be easier to read

Stephen Farmer
  • 549
  • 4
  • 9
  • the front-end is unaware of what variables need to change, and the variables should not be revealed on the front-end. The problem was the json, probably the encoding of the string of HTML. as per comment, I passed the string purely as HTML – czioutas Oct 22 '14 at 09:10