JSF facelet page doesn't javascript string with '&' character - javascript

in a JSF facelet page (.xhtml) I have this javascript code
<script type="text/javascript">
function navigateToDetail() {
var id = document.getElementById("idElemento").value;
alert(id);
var isPratica = document.getElementById("isPratica").value;
alert(isPratica);
var box = "#{boxCtrl.idBox}";
alert(box);
if (isPratica==true)
window.location = "DettaglioRichiesta.xhtml?id=" + id + "&box=" + box;
else
window.location = "../Richieste/DettaglioRichiesta.xhtml?id=" + id + "&box=" + box;
}
</script>
It doesn't work because the jfs engine think that "&box" is relative to a bindign, and it says:
Error Parsing /Box/ListaRichieste.xhtml: Error Traced[line: 20] The reference to entity "box" must end with the ';' delimiter
I can I avoid this behaviour?

Facelets is a XML based view technology. The & is a XML special character. It's interpreted as start of a XML entity like ,  , etc. It is therefore looking for the end character ;, but it found none, so it is throwing this error.
To represent the & literally inside a XML document, you need to use & instead of &.
window.location = "DettaglioRichiesta.xhtml?id=" + id + "&box=" + box;
You can also just put that JS code in its own .js file which you include by <script src> so that you don't need to fiddle with XML special characters in the JS code.
<script type="text/javascript" src="your.js"></script>

Related

Get a string in a variable to create a dynamic link in Javascript

What I am trying to accomplish is to have a map that has a few locations. Whenever users click on each location, a popup will emerge with some information. I am trying to create a dynamic link inside that popup.
Below is my code in Javascript
function parseDescription(message){
var string=""
for(var i in message){
if (i=="CommunityPartner"){
string+='<span style="font-weight:bold">'+i+'</span>'+": "+message[i]+'</a>'+"<br>"
} else if (i=="WeitzCECPartner"){
string+='<span style="font-weight:bold">'+i+'</span>'+": "+message[i]+'</a>'+"<br>"
} else if (i=="PhoneNumber"){
string+='<span style="font-weight:bold">'+i+'</span>'+": "+message[i]+'</a>'+"<br>"
} else if (i=="Website"){
var link = "http://www."+message[i];
string+='<span style="font-weight:bold">'+i+'</span>'+": "+'<a href="{{link}}" >'+link+'</a>'+"<br>"
}
//string+='<span style="font-weight:bold">'+i+'</span>'+": "+message[i]+"<br>"
}
return string;
}
I keep getting this error. I think it's related to the value passed into "a href" :
Request Method: GET
Request URL: http://127.0.0.1:8000/%7B%7Blink%7D%7D
Please help
Instead of using {{link}} in the string, you can try this:
var link = "http://www." + message[i];
string += '<span style="font-weight:bold">' + i + '</span>: ' + link + '<br>';
The following syntax:
{{link}}
is incorrect, because this part was inside a string it was interpreted by the JS engine as a string.
You can use template strings (backticks `) to insert variables as string into another string. For example:
`<span style="font-weight:bold">${i}</span>:<a href="${link}" >${link}</a><br>`;
This example assumes that link and i are both variables which you want to insert dynamically into your string. If you have more questions leave a comment.
I think the problem lies in the {{link}}. Your code looks like native js and not angular or any other framework. Thus, the characters {{}} inside a string do not mean anything. The url that you get is exactly those characters, escaped. Use plain old string concatination to enter your href value.

Why am I getting an error when trying to add the src attribute to an img tag using JavaScript within Colfusion?

I am using ColdFusion to connect to and execute methods from a Web Service. I store the contents of the returned xml string in to a ColdFusion array then I convert the ColdFusion array into a JavaScript array, so that I may populate the content of my HTML document.
My problem arises when trying to add a photo to a unordered list called "agent_photo_list". Specifically when I call the .setAttribute method. It seems to involve the 'src' parameter. The JavaScript code works as I expect when it is not inside the cfscript tag and WriteOutput method. I have researched the problem, I haven't been able to find a reference that is sufficiently similar. I am still having trouble understanding what my problem is. I have included my code below:
cfscript>
WriteOutput('
<script language = "JavaScript">
var #ToScript(array, "jsArray")#
var agent = jsArray[0];
document.getElementById("output").innerHTML = agent.firstname + " " + agent.lastname;
var imgurl = "_images/agentphoto.jpg";
var node = document.createElement("LI");
var imgnode = (document.createElement("IMG"));
imgnode.setAttribute('src', "imgurl");
node.appendChild(imgnode);
document.getElementById("agent_photo_list").appendChild(node);
</script>
')
</cfscript>
I am using a jpg file located in my _images folder for testing purposes, I will later change it to agent.photourl.
The error I get is provided below:
Invalid CFML construct found on line 117 at column 35.ColdFusion was
looking at the following text:<p>src</p><p>The CFML
compiler was processing:<ul><li>An expression beginning
with WriteOutput, on line 111, column 17.This message is usually
caused by a problem in the expressions structure.<li>A script
statement beginning with WriteOutput on line 111, column
17.<li>A cfscript tag beginning on line 102, column 10.</ul> The specific sequence of files included or processed is: C:\inetpub\wwwroot\webservice.cfm, line: 117
I am curious to why my JavaScript is functional inside the cfscript tag until calling the setAttribute method and why it is functional outside the cfscript tag.
I will appreciate your insight. Thank you.
You need to wrap the src in "". Also, add the ";" at the end of WriteOutput closure. The below code should work for you.
<cfscript>
WriteOutput('
<script language = "JavaScript">
var #ToScript(array, "jsArray")#
var agent = jsArray[0];
document.getElementById("output").innerHTML = agent.firstname + " " + agent.lastname;
var imgurl = "_images/agentphoto.jpg";
var node = document.createElement("LI");
var imgnode = (document.createElement("IMG"));
imgnode.setAttribute("src", "imgurl");
node.appendChild(imgnode);
document.getElementById("agent_photo_list").appendChild(node);
</script>
');
</cfscript>

Injecting and executing JavaScript string in a specific HTML element

I have received the latest Disqus comments string (JavaScript code) from the server using ajax call that has document.write code in it.
I want the page to execute this code inside a specific DIV (by it Id, which is '#recent-comments') in the page, how do I do that?
I use jQuery 2.1.1.
Its a bit nasty but you could eval it inside a closure function:
var message =" document.write('hello'); ";
eval("(function(){"+
"var document = {write:function(text){$('#divName').html(text)}}; " +
message +
" })();");
JSFiddle DEMO (I've had to change write to wrie otherwise jsfiddle disallows it, just need to change back for your case)
Since it is coming as a string, you need to create a script element and put the string (inside document.write) as a element to the div.
var sampleStr = "document.write(\"Hello World\");";
var str, scriptElement = document.createElement('script');
str = sampleStr.replace(/["']/g, '"');
str = str.replace(/"document.write/g, "");
scriptElement.innerHTML = str;
$('#div1').append(scriptElement);
Updated Fiddle

Send a variable containing "&" or "%" to a PHP page using Javascript

I've got a Javascript script that sends 4 variables to a php page.
The fact is that, if one (or more) of these variables contain a character such as "&" or "%", it just
won't work, it only sends what there was before "&" or "%". For instance, if the content of a variable is
"Bolliger&Mabillard", the result will be "Bolliger". Obviously, this happens because the script separate each
variable with an "&", how can I solve this?
Here's the script I'm talking about
<script type="text/javascript">
function save()
{
var shortname=location.hostname.replace(/^(www.|)([\w]+)(\..+|)/g, "$2");
var url="http://"+window.location.hostname+"/";
var link=window.location.href;
var link_title="Bolliger&Mabillard";
window.open("http://www.example.com/add.php?url=" + url + "&shortname="+shortname + "&link="+link + "&link_title="+link_title);
}
</script>
You need to URL-encode the values using encodeURIComponent().

how to escape single quote in dynamically created HTML tag content

In my javascript code,
I have a variable which have a string. String contains ' or quote in it. Example
var name= "hi's";
I am creating a link dynamically in a code. where it is written as a string i.e a variable content will be used dynamically to create a link on html page.
content= '<a onclick="javascript:fun(\'' + name + '\');">'
Here it is giving problem that quote in variable name completes the string in content. and hence rest portion of content is not recognised..
similar problem arises if var name = 'hi"s';
i.e. if double quote is present in it.
plz help
This is how you would create an anchor properly and completely avoid the need to escape anything.
var name = "Hi's",
anchor = document.createElement('a');
// should have an href
// links will be displayed differently by some browsers without it
anchor.href = '#';
// using onclick for pragmatic reasons
anchor.onclick = function() {
fun(name);
return false;
}
anchor.innerHTML = 'hello world';
// later
mydiv.appendChild(anchor);
Btw, the onclick attribute shouldn't start with "javascript:" at all; that's already implied.
Update
If you're still interested in the inline version, variables need two steps of encoding:
The first is to serialize the variable properly; I would use JSON.stringify() for that
The second is HTML escaping; the simplest form is simply to replace double quotes with their proper encoded values.
For example:
var content = '<a href="#" onclick="fun(' +
JSON.serialize(name).replace(/"/g, '"') + ');">hello</a>';

Categories