Javascript method argument escape - javascript

The below span tag containing an onclick event is not working
var test="<span onClick="gotoNode(\'' + result.name + '\',\'' + result.xaxis + '\',\'' + result.yaxis + '\',\'' + result.detail + '\',\'' + result.status + '\')" />"
the above escaped string has some problems with the method call.
How can I fix it?

If you're creating this in JavaScript to create an element, then the first single-quote needs to be escaped.
function gotoNode(name, xaxis, yaxis, detail, status) {
alert("name = " + name + "\r\nxaxis = " + xaxis + "\r\nyaxis = " + yaxis + "\r\ndetail = " + detail + "\r\nstatus = " + status);
}
var result = { name: "name", xaxis: "xaxis", yaxis: "yaxis", detail: "detail", status: "status" };
var htmlText = '<input value="Button" type="button" onclick="gotoNode(\'' + result.name + '\',\'' + result.xaxis + '\',\'' + result.yaxis + '\',\'' + result.detail + '\',\'' + result.status + '\')" />';
$("#lonely").append(htmlText);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="lonely"></div>
Generally speaking, whatever quote type you begin with (out of ' or "), you need to escape the same type that you want to use within the string and not escape the same type to terminate the string. You can leave the other type without escapes.
For your edited version, this should work if you want those result variables to be replaced with their values.
var test = "<span onclick=\"gotoNode('" + result.name + "','" + result.xaxis + "','" + result.yaxis + "','" + result.detail + "','" + result.status + "')\" />";

Do you use php to generate the output?
Then you should try
echo "<input type=\"button\" onClick=\"gotoNode(\" + result.name + \",\" +
result.xaxis + \",\" + result.yaxis + \",\" + result.detail + \",\" +
result.status + \")\" />";

Related

Posting from multiple dynamically created HTML textarea elements

Given the following snippet:
out.println("<form action=" + "./post" + " " + "method=" + "post" + " " + "id=" + "tweetForm" + ">");
for (int i = 1; i <= twParser.currentTweetIndex; i++) {
output = twParser.tweetArray[i] + newLine;
out.println("<p>");
out.println("<textarea" + " " + "name=text" + " " + "id=\"styled\"" + " " + "maxlength=140" + " " + "cols=" + "140" + " " + "rows=" + "1" + " " + "tag=" + "text_" + String.valueOf(i) + " " + "form=" + "tweetForm" + " " + "onfocus=\"setbg('#e5fff3');\" onblur=\"setbg('white')\"" + ">" + output + "</textarea>");
out.println("<span class=label-style-countdown" + " " + "id=" + "chars" + String.valueOf(i) + ">" + String.valueOf(140 - twParser.tweetArray[i].length()) + "</span> characters remaining");
out.println("<p>");
}
out.println("<input type=" + "submit" + " " + "name=" + "post" + " " + "value=" + "post" + " " + "style=\"float: left;\"" + "/>");
out.println("<button type=\"reset\" value=\"Reset\">Reset</button>"
...that creates HTML multiple textarea elements and posts them to a servlet. But since all the textareas have the same name, only the contents of the first textarea are posted.
Is there a way to post them all?
Thanks
To have multiple inputs from same name you can use name array like
<textarea name="text[]">You text here</textarea>
which will post all the values having same name as an array.
PS: This can be done with any input types expect radio buttons
On this line:
out.println("<textarea" + " " + "name=text" + " " ...
Append i to the name of the textarea, such that the names increase as text1, text2 etc.
out.println("<textarea" + " " + "name=text" + i.toString() + " " ...
Perform the same loop on the server when receiving the POST request to receive from each textarea.

JavaScript function is supposed to be undefined when created and called from ASP.net code-behind

I want to execute a JavaScript function from code-behind, (e.g. as a server-side button click event) and the firing button is inside an UpdatePanel. I've written two methods for it:
public static void Redirect(UpdatePanel updatePanelOrThis, string destinationUrl,
NameValueCollection data)
{
string strForm = PreparePOSTForm(destinationUrl, data);
ScriptManager.RegisterClientScriptBlock(updatePanelOrThis, updatePanelOrThis.GetType(), "redirectscript",
"<script language='javascript' type='text/javascript'> postToPage();</script>", false);
}
private static String PreparePOSTForm(string url, NameValueCollection data)
{
string jscriptString = "<script language=" + "\"" + "javascript" + "\"" + " type=" + "\"" + "text/javascript" + "\"" + ">" +
"function postToPage() " + "{" + "var form = document.createElement(" + "\"" + "form" + "\"" + ");" +
"form.setAttribute(" + "\"" + "method" + "\"" + ", " + "\"" + "POST" + "\"" + ");" +
"form.setAttribute(" + "\"" + "action" + "\"" + ", " + "\"" + url + "\"" + ");" +
"form.setAttribute(" + "\"" + "target" + "\"" + ", " + "\"" + "_self" + "\"" + ");";
int counter = 0;
foreach (string key in data)
{
jscriptString += "var hiddenField" + counter.ToString() + " = document.createElement(" + "\"" + "input" + "\"" + ");" +
"hiddenField" + counter.ToString() + ".setAttribute(" + "\"" + "name" + "\"" + ", " + "\"" + key + "\"" + ");" +
"hiddenField" + counter.ToString() + ".setAttribute(" + "\"" + "value" + "\"" + ", " + "\"" + data[key] + "\"" + ");" +
"form.appendChild(hiddenField" + counter.ToString() + ");";
counter++;
}
jscriptString += "document.body.appendChild(form);form.submit();document.body.removeChild(form);}</script>";
return jscriptString;
}
When I call Redirect method, I see a
Uncaught ReferenceError: postToPage is not defined
error in browser console.
I also tested Redirect method with RegisterStartupScript but the error did not disappear.
What is wrong with my approach?
One "bug" I see on the code is that you do not use anywhere the Final String that contains the script, on this line:
string strForm = PreparePOSTForm(destinationUrl, data);

onclick event and json data not meshing together

I've got a silly error which I cant seem to fix some how. I'm simply looking to do the following:
onclick="CreatePro('x','y','z')"
I basically want to pass text to the CreatePro function. Now my values of x,y and z are json data. As such here is what I am using for the javascript:
var Provision = "'" + data[i].ProvisionID + "'";
var Title = "'" + data[i].Title + "'";
var Author = "'" + data[i].Author + "'";
var Edition = "'" + data[i].Edition + "'";
var Publisher = "'" + data[i].Publisher+ "'";
var ISBN = "'" + data[i].ISBN + "'";
var UserID = "'" +data[i].UserID + "'";
var Price = "'" + data[i].Price+ "'";
var Condition = "'" +data[i].Condition +"'";
Row = Row + "<td><input type='button' onclick='CreatePro(" + Provision + "," + Title+ "," + Author + "," + Edition + "," + Publisher +"," + ISBN + ","+ UserID + ","+ Price + "," + Condition + ")' value='Create'></td></tr>";
console.log(Row);
Now when I use console.log I get the following:
<td><input type='button' onclick='CreatePro('19','dfjeryj','ertj','0','tj','0000000000000','4','0','0')' value='Create'></td>
But when I inspect the element I have :
<input type="button" onclick="CreatePro(" 19','dfjeryj','ertj','0','tj','0000000000000','4','0','0')'="" value="Create">
The problem is suspect is the " on the above line. But I dont know why this is happening? As from the console log. My quotes seem to match up. So I'm not sure why the browser is mixing them up? Perhaps I've gone wrong somewhere? (Frankly I can;t see the error). Every time I click the create button the event doesn't call my CreatePro function. I'm really not sure what I'm doing wrong or perhaps a better way of doing what I'm doing
You have got your quotes wrong. It should be:
Row = Row + "<td><input type='button' onclick=\"CreatePro('" + Provision + "','" + Title+ "','" + Author + "','" + Edition + "','" + Publisher +"','" + ISBN + "','"+ UserID + "','"+ Price + "','" + Condition + "')\" value='Create'></td></tr>";

How to use single quotation in string manipulation in javascript

As you can understand in the title, I want use single quotation in string manupulation. Here is my code:
headline += '<article><h5><a class="headline" onmouseover="headLineDetail(' + this.HeadCaption + ',' + this.ShortDescription + ',' + this.PicUrl + ',' + this.NewsId + ')" href="NewsDetail.aspx?nid=' + this.NewsId + '"' + '">' + this.HeadCaption + this.time + '</a></h5>';
I have to give string parameters of headLineDetail with quotation. But I append headline to a div as inner html. How can I use single quotation in this case.
You could use a \' to escape it.
Just escape using a \'
headline += '<article><h5><a class="headline" onmouseover="headLineDetail(\'' + this.HeadCaption + '\',\'' + this.ShortDescription + '\',\'' + this.PicUrl + '\',\'' + this.NewsId + '\')" href="NewsDetail.aspx?nid=' + this.NewsId + '"' + '">' + this.HeadCaption + this.time + '</a></h5>';

Javascript innerHTML not allowing onClick on javascript function

I am not sure why, but the following
href='javascript:"+ openextlink('http://www.ipetfindr.com/shop/product/' + item._id.$id);+"'
seems to run automatically without the user clicking.
document.getElementById("shop-items").innerHTML += "<div class='product " + cssclass + "'><div class='product-images-smaller'><span class='shop-large-image'><img src='" + item.pictures[0] + "'/></span></div><h1>" + item.name + "</h1><div class='prodtext'><b>Status:</b> " + item.status + "<br><b>Price:</b> $" + item.price + "<br><a id='shop_" + item._id.$id + "' href='javascript:"+ openextlink('http://www.ipetfindr.com/shop/product/' + item._id.$id);+"'><h3 id='dshop_" + item._id.$id + "' class='green_button'>Buy Now</h3></a></div></div>";
could anyone please tell me why.
href='javascript:"+ openextlink('http://www.ipetfindr.com/shop/product/'
I see a double quote , is it a typo, change to
href='javascript:'+ openextlink('http://www.ipetfindr.com/shop/product/'

Categories