Unable to pass the array value in the Hyperlink - javascript

Below is the code that I am using with Jquery to pass a value when a hyperlink is selected on sharepoint disp form.
for(var i=0;i<retval.length;i++)
{
strHTML = strHTML + "<a href='url.aspx?ID= '+retval[i]+' &Source= url'>" + retval[i] + "</a>";
strHTML = strHTML + " ";
}
strHTML = strHTML + "</div>";
$("textarea[Title='Test']").closest("span").find("iframe[Title='Rich Text Editor']").contents().find("body").html(strHTML);
Its unable to read the value in retval[i], its breaking right at ID. Is the syntax wrong?

If you want the variable to evaluate, it needs to be outside of the quotes (as you did with the actual hyperlink's text):
strHTML = strHTML + "<a href='url.aspx?ID=" + retval[i] + "&source=url ...";
However, I would look at using encodeURIComponent before placing it within a URL:
strHTML = strHTML + "<a href='url.aspx?ID=" + encodeURIComponent(retval[i]) + "&source=url ...";
Also, try to avoid including spaces in the URL (make sure the variable, equal sign (=) and value are close together). Also, given the href attribute's value is surrounded by single quotes (') you want to avoid using them in the middle of the URL (e.g. don't surround the ID's value within the URL with ').
var id = 'foo';
var bad = "<a href='target.aspx?ID='"+id+"''>Invalid</a>";
// bad = <a href="target.aspx?ID='foo''>Invalid</a>
// note that the single quotes now interfere
var good = "<a href='target.aspx?ID="+id+"'>Valid</a>";
// good = "<a href='target.aspx?ID=foo'>Valid</a>";
// note now that the quotes align and the value is acceptable

A bit more readable:
var atag = "url.aspx?ID="+encodeURIComponenet(retval[i])+"&Source=url";
strHTML = strHTML + "<a href='"+atag+"'>" + retval[i] + "</a> ";
Hope this helps!

Since you have the double quotes surrounding the entire string:
"<a href='url.aspx?ID= '+retval[i]+' &Source= url'>"
Its reading the +reval[i]+ as part of the string, what you want to do differentiate between string and command. You will need to use the double quote to end the string and add your command. You will need to change the above to:
"<a href='url.aspx?ID=" + retval[i] + "&Source=url'>"

Related

how do I dynamically add link text to a href in javascript?

I have this javascript code. When it renders it shows quotes around the text of the link rather than just the text. What is the syntax to properly concatinate the link text? My quotes are messed up but I cannot figure it out.
var link = "<a id=\"myLink\" href=\"\" target=\"_blank\">\"" + text + "\"</a>";
Looks like you had extra quotes. You do not need to escape those around + text +. The following should work:
var link = "<a id=\"myLink\" href=\"\" target=\"_blank\">" + text + "</a>";
I prefer single quotes:
var link = '<a id="myLink" href="" target="_blank">' + text + '</a>';
When using the + operator to concatenate a variable and a string, you just have to keep track of opening and closing quotes. It can get tricky!
Similar example:
var str1 = "string";
var str2 = "This is how to concatenate a " + str1 + ".";
console.log(str2);
Do this
var link = "<a id=\"myLink\" href=\"\" target=\"_blank\">" + text + "</a>";
Do not escape the quote before '+ text +'
Check this code :
const text = 'My awesome link'
const link = "<a href='http://google.com' target='blank'>" + text + "</a>
console.log(link);

JavaScript onclick Function call not working

text += "<button id=next onclick=calendar(nextDate)>"
text += "<button id=next onclick=calendar(prevDate)>"
This code does not seem to run normally.
I do not know what the problem is.
function calendar(date) {
...........
text += "<tr>"
text += "<td colspan=7>"
text += "<button id=prev onclick=calendar(prevDate)>"
text += "◀"
text += "</button>"
text += "<button id=next onclick=calendar(nextDate)>"
text += "▶"
text += "</button>"
text += "</tr>"
text += "</td>"
text += "</table>";
document.getElementById("cal").innerHTML = text;
}
calendar();
Assuming you have set the onClick function to this function, you are missing semicolons at the ends of your lines ";"
Problems
text += "<button id=prev onclick=calendar(prevDate)>"
text += "<button id=next onclick=calendar(nextDate)>"
You do not use quotes to surround the values of the attributes
You pass the strings prevDate and nextDate instead of their values, but since they don't have any quotes surrounding them, javascript will try to find these two variables, but it won't be able to (unless they're in the global scope)
You don not use any semicolons (;), this probably won't cause a problem but it's still a good idea to use them
Here are a couple of ways that allow you to properly pass the previous and next date:
String Concatenation
Interpolation
Event Listeners
String Concatenation
text += "<button id='prev' onclick='calendar(" + prevDate + ")'>";
text += "<button id='next' onclick='calendar(" + nextDate + ")'>";
Interpolation (ES6)
text += `<button id="prev" onclick="calendar('${prevDate}')">`;
text += `<button id="next" onclick="calendar('${nextDate}')">`;
Event Listeners
text += "<button id='prev'>";
text += "<button id='next'>";
// This goes after document.getElementById("cal").innerHTML = text;
document.getElementById("prev").addEventListener("click", function (event) {
calendar(prevDate);
});
document.getElementById("next").addEventListener("click", function (event) {
calendar(nextDate);
});

Need to display javascript variable as title without space

I have a written a javascript which will return the value in the variable, in the title property.
It is not returning the values with spaces, when i execute the below code it is returning the last value as 'ashok' instead of 'ashok sensiple'
var ltenantName = 'Sensiple,new-tenant-001,tenant-new,Tenant_1208,ashok sensiple';
var ltenantNameLength = '<div style="cursor:Pointer" title='
+ ltenantName
+'>'
+ ltenantName.split(',').length
+'</div>';
return ltenantNameLength;
HTML attribute values containing spaces must be quoted.
You are generating the title attribute without quotes around the value.
Your code:
var ltenantName = 'Sensiple,new-tenant-001,tenant-new,Tenant_1208,ashok sensiple';
var ltenantNameLength = '<div style="cursor:Pointer" title='
+ ltenantName
+'>'
+ ltenantName.split(',').length
+'</div>';
document.body.appendChild(document.createTextNode(ltenantNameLength));
As you can see sensiple is a new attribute and not part of the value of the title attribute.
Add quotes:
var ltenantName = 'Sensiple,new-tenant-001,tenant-new,Tenant_1208,ashok sensiple';
var ltenantNameLength = '<div style="cursor:Pointer" title="'
+ ltenantName
+'">'
+ ltenantName.split(',').length
+'</div>';
document.body.appendChild(document.createTextNode(ltenantNameLength));
Better yet, don't try to mash strings together in JS to make HTML:
var ltenantName = 'Sensiple,new-tenant-001,tenant-new,Tenant_1208,ashok sensiple';
var ltenantNameLength = document.createElement('div');
// This normally indicates a link. If you want a link, why not use <a>?
ltenantNameLength.style.cursor = "pointer";
ltenantNameLength.title = ltenantName;
ltenantNameLength.appendChild(
document.createTextNode(
ltenantName.split(',').length
)
);
document.body.appendChild(ltenantNameLength);

Javascript string HTML composition

I have this function that I use as a Custom Formatter in a JqGrid for ASP.NET WebForm
function formatLink(cellValue, options, rowObject) {
var res = cellValue.split(" - ");
var newLink = "";
var value = rowObject['Filter'];
var link = '<a class=\"clickCell\" href=\"#\" OnClick=\"CellClicked(\'value\')\">' + res[0] + '</a> - ' + res[1];
newLink = link.replace("value", value).replace("'", "\'");
return newLink;
}
the returned link does not work.
Here is an example:
<a onclick="CellClicked('vpd.esercizio = '2011-2012'')" href="#" class="clickCell">3</a>
As you can see, the var value contains string with quote. I will use its content to compose sql where condition.
Can you help me get things work?
Why don't you simply do
value.replace("'","\\'")
var link = '<a class="clickCell" href="#" OnClick="CellClicked('+value+')">' + res[0] + '</a> - ' + res[1];
?
With that replace you should be fine. I also removed some unnecesary back slashes because you can use double quotes inside simple quotes.
document.write(' "" '); returns ""

Using .innerhtml to input a list with links

When I use the function below the .innerHTML works. and the list appears under my ul element with the id of archive_content. The only problem is when I turn the li elements to links the function no longer works. I was wondering if anyone knew the reasoning behind this.
function art()
{
//Define art content inside list below
var archive_content =
"<li>hey</li>"+
"<li>hey</li>"+
"<li>hey</li>"+
"<li>hey</li>";
document.getElementById("archive").innerHTML='Drawings';
document.getElementById("archive_content").innerHTML= archive_content;
}
edit:
This is how I tried turning them into links
var archive_content =
"<li>hey</li>" +
"<li>hey</li>"+
"<li>hey</li>"+
"<li>hey</li>";
You can't have double-quote characters in a sting that is bounded with double-quotes.
"lorem "foo" ipsum" // throws a syntax error
"lorem 'foo' ipsum" // OK
Use single-quotes to bound strings in JavaScript.
var archive_content =
'<li>hey</li>' +
'<li>hey</li>' +
'<li>hey</li>' +
'<li>hey</li>';
You shouldn't use double quotes for both the href and the full string. Either this:
var archive_content =
'<li>hey</li>' +
'<li>hey</li>' +
'<li>hey</li>' +
'<li>hey</li>';
or this:
var archive_content =
"<li><a href='#'>hey</a></li>" +
"<li><a href='#'>hey</a></li>" +
"<li><a href='#'>hey</a></li>" +
"<li><a href='#'>hey</a></li>";
will fix the issue.

Categories

Resources