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?

Controller:

@RemoteAction
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
                output=output
                    + '<h3>Included:' + r.Name + '</h3>' //collapsible section header
                    + '<p>'+r.Reward_Description__c+'</p>'; //content for that reward                        
                }
            else{
                    output=output
                    + '<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){ 
                    $j("#rewards").html(result);
                }
});

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 < and >. You can use jQuery to do the decoding for you (credit to Chris Fulstow):

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

Then

MobileShop.getRewardsText(requestedrateid, function(result, event){                    
    if (event.status){ 
        $j("#rewards").html(htmlDecode(result));
    }
});

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 https://salesforce.stackexchange.com/questions/763