5

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);
                }
});

naked html tags

6
  • Before returning the result, in the controller replace all double quotes with escape characters. So from " to \" and see how you go. Aug 22, 2012 at 5:27
  • yourHtmlStringVariable = yourHtmlStringVariable.replace('"', '\\"'); Aug 22, 2012 at 5:34
  • 2
    How bout paste the code here, so we can see?
    – Saariko
    Aug 22, 2012 at 8:49
  • 1
    Saariko made me learn how to do the code formatting trick. Helpful? Aug 22, 2012 at 14:34
  • I tried result.replace('"', '\\"'); No difference. Also tried using both \\" and \" in the controller method...no luck, but interestingly, both show back up as \" in the output. Aug 22, 2012 at 14:38

2 Answers 2

6

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(); 
  }

Then

MobileShop.getRewardsText(requestedrateid, function(result, event){                    
    if (event.status){ 
        $j("#rewards").html(htmlDecode(result));
    }
});
3
  • Thanks, Pat! That was the trick. Would recommend adding that to the javascript remoting documentation since I could see a lot of use for this. Aug 24, 2012 at 13:16
  • 1
    Hi @ShaneMcLaughlin - although that jQuery one-liner fixes the problem at hand, I think Avidev9 is correct in his answer - rendering HTML in the controller violates the MVC pattern. A better architecture would be to emit JSON from the controller and render that in the page using jQuery Templates or some other mechanism.
    – metadaddy
    Aug 24, 2012 at 20:56
  • 1
    Just a reminder - Do not use this for user-generated content other than content generated by this user. If there's a <script> tag in the value, the contents of the script will be executed. Repeated from a comment on the original answer thread, just thought it was a good reminder. Aug 12, 2014 at 15:42
3

Why are you constructing the html inside the controller?

You can just use the jquery template instead.

1

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .