0

Hello I have a function that loops around and then eventually a string gets sent to a DIV tag class...

   $(document).ready(function addcopy() {
         /* global */
         $(".Bands").append('<div style="display: inline-block;">[EDIT]&nbsp;<a href="[LINK]"><h7 style="color:#7A0029;line-height: 110%;text-transform: uppercase;">[Custom:Name]</h7></a>&nbsp;</div>');
     });

It works fine... however the token [Custom:Name] may contain special characters such as single or double quotes etc...

I've looked around these forums and tried to adapt my code to various solutions offered and it never seems to work, could somebody help me?

Thanks for your help!

Alex

EDIT(1):

Getting somewhere, from Ockert's and LeFex's answer I've adapted it below but it still does not work (replace speech marks and special characters from token which html can't handle)...

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

$(document).ready(function (){
    /* global */
    var band = $("<div style='display: inline-block;'>[EDIT]&nbsp;<a href='[LINK]'><h7 class='name' style='color:#7A0029;line-height: 110%;text-transform: uppercase;'>[Custom:Name]</h7></a>&nbsp;</div>");


    band.appendTo(htmlEncode('.Bands'))

});
ScriptAlexS
  • 31
  • 5
  • And so what's the problem? What would be the issue with [Custom:Name] being a double quote? – KJ Price Mar 18 '15 at 20:53
  • [Custom:Name] is something that comes from the backend and you are printing this javascript inside a template? If yes, search in this template's engine docs how to escape characters for javascript. – Christian Benseler Mar 18 '15 at 20:55
  • Check EDIT1 in first post.. I have no idea what text the [Custom:Name] token will contain... The html won't parse with special characters such as quotes within this token.. – ScriptAlexS Mar 18 '15 at 21:30

2 Answers2

0

You can change your script too 

$(document).ready(function (){    
    var band = $("<div style='display: inline-block;'>[EDIT]&nbsp;<a class='link' href='[LINK]'><h7 class='name' style='color:#7A0029;line-height: 110%;text-transform: uppercase;'>[Custom:Name]</h7></a>&nbsp;</div>");

    band.find('.name').html("some weird name !@#$%^&*");
    band.find('.link').attr("href","http://www.google.com");
    band.appendTo('.Bands');

});

By splitting it up like that, enables you to set the name to anything you want. You can easily select the name element

Have a look at this jsfiddle http://jsfiddle.net/fL3gn056/2/

Trekco
  • 1,246
  • 6
  • 17
  • Looks almost there but not quite what I want to do, please see (EDIT 1) in the first post... Thanks... – ScriptAlexS Mar 18 '15 at 21:28
  • @ScriptAlexS your solution in Edit 1 don't make sence to me. Can you please create a jsfiddle with an example of what you want to do, even if it does not work. We can then work from there – Trekco Mar 19 '15 at 17:34
0

You could use document.createElement instead of just appending a string.

http://www.w3schools.com/jsref/met_document_createelement.asp

If you just create your div, a and h7-elements, use the appendChild function, and add style and attributes and content by setting element properties, you should end up with a sollution that allows any special characters.

Edit:

I could'nt get it working using that method; however, with the approach I suggested above, i got some working code:

var element = document.createElement("div");

element.style.display = "inline-block";

var link = document.createElement("a");
link.setAttribute('href', "[LINK]");

var text = document.createElement("h7");

text.style.color = "#7A0029";
text.style.lineHeight = "110%";
text.style.textTransform = "uppercase";
text.innerHTML = "[CUSTOM:NAME]";

//not sure what you're appending it all to, but do it here
document.getElementsByClassName("Bands")[0].appendChild(element);
element.appendChild(link);
link.appendChild(text);

With this snippet, all input special characters are interpreted as a string, not as code. Some calls I could have put in the same line, but this way you get an easy to read overview.

Here's an earlier thread on the subject, and the top answer brings the issue of performance of different approaches to discussion.

jQuery document.createElement equivalent?

Community
  • 1
  • 1
LeFex
  • 258
  • 1
  • 10