Using .innerhtml to input a list with links - javascript

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.

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

attempting to split string dynamically keep getting error?

I'm attempting to split a string I'm passing into
$("#groupUL").append("<li>" + "<h2>About Item:</h2> " + response.data[i].message + "<br /> " + "<h2>Posted By:</h2> <a href='#' onclick='splitName('" + response.data[i].from.name + "');'>" + response.data[i].from.name + "</a>" + "<br />");
Seems to be passing me the error
SyntaxError: syntax error
splitName(
Not sure how that's wrong...Here is the splitname function if that helps
function splitName(txt){
var myString = txt;
var mySplitResult = myString.split(" ");
console.log("The first element is " + mySplitResult[0]);
console.log("<br /> The second element is " + mySplitResult[1]);
console.log("<br /> The third element is " + mySplitResult[2]);
};
It's too hard to get it right when you put quotes in quotes in quotes and you try to escape it right. You got it wrong.
A solution is to make it in small parts :
var action = "splitName('" + response.data[i].from.name + "');";
$("#groupUL").append("<li>" + "<h2>About ... onclick=\""+action+"\">...");
But the best solution would be to follow best practice, that is not inline the javascript but use jQuery's binding function :
$("#groupUL").append("... <a id=myid ...");
$("#myid").click(function(){ splitName(response.data[i].from.name) });
I think the only problem with your code is with your readability issue. So I would suggest please improve it. Lets have a look at it. My code example # JSbin.
Here is the code :- (which i think is better)
var response = {
data : {
message: 'Cleaning code',
from: {
name: 'Clean Code works'
}
}
};
var li = $('<li>'); //Create empty li (Not Appending to DOM now due to performance issues)
$('<h2>').html('About Item:' + response.data.message + '<br />').appendTo(li);
$('<h2>').html('Posted By:').appendTo(li);
$('<a>').attr('href', '#')
.html(response.data.from.name)
.appendTo(li)
.click(function() {
splitName(response.data.from.name);
});
$('<br>').appendTo(li);
// Append li to ul (Final operation to DOM)
li.appendTo('#groupUL');
function splitName(txt){
var myString = txt;
var mySplitResult = myString.split(" ");
console.log("The first element is " + mySplitResult[0]);
console.log("The second element is " + mySplitResult[1]);
console.log("The third element is " + mySplitResult[2]);
}

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 ""

javascript insert text in specific place in text area

I write a form that inserts some xml tags into textarea. I use this function:
(function ($) {
addCustomTag = function (name, param, value) {
var code = "<" + name + " " + param + "=\"" + value + "\">\n</" + name + ">";
document.getElementById("codeArea").value += code;
};
})(jQuery);
How can I make that some other function will insert subtags into tags that were created before?
XML code will never be used on server. All I need is to insert tex in specific line which is depends on what was on this line before not cutting it. Something like this:
addCustomSubtag = function(name,param,value,parent) {
document.getElementById("codeArea").selectionStart = document.getElementById("codeArea").value - parent.length;
var code = "<" + name + " " + param + "=\"" + value + "\">\n</" + name + ">";
document.getElementById("codeArea").value += code;
};
Javascript isn't necessary. It also can be written on jQuery.
Thanks.
You can any of these jQuery functions
http://api.jquery.com/append/
http://api.jquery.com/appendTo/
http://api.jquery.com/prepend/
Update:
Actually we can use jQuery DOM manipulation methods to manipulate XML also.
var xml = "<main/>";
alert(xml); // <main/>
var $xml = $(xml).append($("<sub1/>"));
alert($xml.html()); // <sub1></sub1>
$xml.find("sub1").append($("<sub2/>"));
alert($xml.html()); // <sub1><sub2></sub2></sub1>
alert($xml.get(0).outerHTML); // <main><sub1><sub2></sub2></sub1></main>

Unable to pass the array value in the Hyperlink

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'>"

Categories

Resources