Find your content:

Search form

You are here

Building HTML with JavaScript remoting


I wrote a little @RemoteAction method that returns a string. And the string is nothing but an HTML snippet that I want inserted on my page.

Callback method on the page receives the result and uses jquery .html(result) to stick it in the right place.

Problem: it's appending the string as a string, surrounded by double quotes so that all my tags are showing up on the page.

I think the problem is that the HTML string contains double-quotes (for things like IDs, data-role, classes). I think this because jquery will work if I hardcode in the string but surround it by single quotes in the .html().

Can I: Have sf return a string surrounded by single instead of double quotes? Have some sort of escaping or method to fix the string before calling .html()?

If so, how?


global static string getRewardsText(id therateid){
    ControllerForCustomerRewardsView CFCRV=new ControllerForCustomerRewardsView();
    CFCRV.therateid = therateid;
    list<rewards__c> rewardlist = CFCRV.getTheRewards();
    string output = '<div data-role=\"collapsible-set\">';
    for (rewards__c r:rewardlist){
        output=output+'<div data-role=\"collapsible\">'; //open the collapsible
        if (!r.Program__c){ //if it's not a program                
            if (!r.Choice__c){//if it's included
                    + '<h3>Included:' + r.Name + '</h3>' //collapsible section header
                    + '<p>'+r.Reward_Description__c+'</p>'; //content for that reward                        
                    + '<h3>Choice:' + r.Name + '</h3>' //collapsible section header
                    + '<p>'+r.Reward_Description__c+'</p>'; //content for that reward
            }//if it's a choice

       output=output+'</div>'; //close the collapsible section
    output=output+'</div>';  //wrapup the big list div

    return output;

JS on page, wrapped inside a function called by an onclick event:
MobileShop.getRewardsText(requestedrateid, function(result, event){                    
                if (event.status){ 

naked html tags

Attribution to: Shane McLaughlin

Possible Suggestion/Solution #1

I just tried this and the problem seems to be that that Visualforce is escaping < and > as the HTML entities &lt; and &gt;. You can use jQuery to do the decoding for you (credit to Chris Fulstow):

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


MobileShop.getRewardsText(requestedrateid, function(result, event){                    
    if (event.status){ 

Attribution to: metadaddy

Possible Suggestion/Solution #2

Why are you constructing the html inside the controller?

You can just use the jquery template instead.

Attribution to: Avidev9
This content is remixed from stackoverflow or stackexchange. Please visit

My Block Status

My Block Content