document.getElementById("roster").innerHTML += "<button onclick=\"doSomething()\">+</button>\n" +
"<span onClick=\'$(this).remove();" +
"$(this).prev().remove();" +
"oiDelete(\"" + str + "\");" +
"removeCost(\"" + str + "\");" +
"selectedItem(\"" + str + "\");" +
"frDelete(\"" + str + "\")\';>" +
str + "</span><br>";
So this goes inside a Javascript function I'm working on. What it's supposed to do is create clickable text regions (spans) that disappear when clicked as well as generate a button right before the clickable text that is supposed to be removed when the text is clicked. I can get the text to disappear just fine, but I can't get the darn button to go away.
The code being generated is:
<button onclick="doSomething()">+</button>
<span onclick="$(this).remove();
$(this).prev().remove();
oiDelete("Marneus Calgar");
removeCost("Marneus Calgar");
selectedItem("Marneus Calgar");
frDelete("Marneus Calgar")" ;="">Marneus Calgar</span>
Why is it generating ="" at the end of the opening span tag? why is the button not deleting properly? is $(this).prev().remove() not the correct option?
If we cast aside best practice, this is the working code.
document.getElementById("roster").innerHTML += "<button onclick=\"doSomething()\">+</button>\n" +
"<span onClick=\'$(this).prev().remove();" +
"$(this).remove();" +
"oiDelete(\"" + str + "\");" +
"removeCost(\"" + str + "\");" +
"selectedItem(\"" + str + "\");" +
"frDelete(\"" + str + "\")\'>" +
str + "</span><br>";
The reason why your code doesn't work is because you are removing the span which has onclick function on the fly. It means it can't reach the $(this).prev().remove() bit.
I hope it makes sense.
If you want to go an extra mile, you should put $(this).remove(); after the frDelete() function. Otherwise those 4 functions that you call will never be called.
You messed up quotation marks and of course - call self-remove code at the end (!)
And one tip - encapsulate these additional function in one procedure - it help to keep code cleaner.
document.getElementById('roster').innerHTML += '<button onclick=\'doSomething()\'>+</button>' +
'<span onClick="doCalls(); $(this).prev().remove(); $(this).remove(); ">' + str + '</span><br>';
Related
I have tried constructing message body like below-
i am getting object object exception and it isn't working for me if i keep inside message body-
"Dear " +
$scope.emailContactinfo.name +
", \n\nPlease find attached Invoice bearing number " +
$scope.invoiceInformation.documentNo +"Paynow\n\n" +$scope.generatedUrl +
" dated " +
moment($scope.invoiceInformation.invoiceDate).format("MM-DD-YYYY") +
". \n\nThanks and Regards,\n" +
$scope.invoiceInformation.organization$_identifier +
"." + button ;`
I suggest using this format, so the code is more readable -
const button = '<button>Button</button>';
`Dear ${$scope.emailContactinfo.name}, \n\nPlease find attached Invoice bearing number ${$scope.invoiceInformation.documentNo} Paynow\n\n ${$scope.generatedUrl} dated ${ moment($scope.invoiceInformation.invoiceDate).format("MM-DD-YYYY")}. \n\nThanks and Regards,\n ${$scope.invoiceInformation.organization$_identifier}. ${button}`
You could use html in a javascript variable like this e.g.:
var button = '<button>Button</button>';
var htmlBody = '<div>' + $scope.emailContactInfo + '</div>;
htmlBody += '<div>' + button + '</div>';
I am trying to add a call specific phone number using <a href> tag inside innerHTML. I've tried with double and single quotes.
1st Case is not firing at all.
2nd Case it does appear but when clicking on the phone number rather than dialing it closes.
var popDiv = document.createElement('span');
popDiv.setAttribute('class', 'popDiv');
popDiv.innerHTML ="It seems you are looking for: " + "<span style='color:#FF0000'>" + getTitle + "</span>" + "<br />" + "Why don't you call me?" + "<a href='tel:01234567890'>01234 567 890</a>";
Please find link to the JSFiddle
Does anyone know what a possible solution would be?
You need to check the mouseup event's target and if it's h1, then only remove the popDiv. This should work :
$("#"+parentContainerId).on('mouseup', function(e){
if(event.target.tagName.toLowerCase() === 'h1') {
$('span.selectedText').contents().unwrap();
$(this).find('span.popDiv').remove();
}
});
Updated jsFiddle
Just try with that :
var popDiv = document.createElement('span');
popDiv.setAttribute('class', 'popDiv');
popDiv.innerHTML ="It seems you are looking for: " + "<span style='color:#FF0000'>" + getTitle + "</span>" + "<br />" + "Why don't you call me?" + "01234 567 890";
and be sure you have not any meta like that :
<meta name = "format-detection" content = "telephone=no">
In javascript I am creating a li element as per below which contains only the problem I am seeing.
The data-videoUrl is showing the full url, so all good there.
The issue is the entry.link and entry.title, while debugging, I verified the strings are within quotes. i.e. "This is a pod cast." The data-videoTitle and data-videoDesciption are being truncated though. i.e. "This" will show from the previous example.
I'm not sure what is occuring in the latter two data assignments as I've verified the text is not double quoted etc. What is occuring with the html5 data elements? I can provide a more complete example if needed.
var podItem = document.createElement("li");
podItem.innerHTML = entry.title
+ "<a data-videoUrl=" + entry.link + " "
+ "data-videoTitle=" + entry.title + " "
+ "data-videoDescription=" + entry.contentSnippet + " "
+ "</a>";
document.getElementById("podCastList").innerHTML += podItem.innerHTML;
Here is a the html being generated.
<a data-videourl="http://rss.cnn.com/~r/services/podcasting/studentnews/rss/~3/d3y4Nh_yiZQ/orig-sn-060614.cnn.m4v" data-videotitle="CNN" student="" news="" -="" june="" 6,="" 2014="" data-videodescription="For" our="" last="" show="" of="" the="" 2013-2014="" school="" year,="" cnn="" takes="" a="" look="" back,="" ahead,="" and="" at="" stories="" making="" ...="" <=""></a>
I'm sure there's something I'm not fully understanding. Why would the first data element get the text correctly, and the next two data elements break up the text as in: [data-videotitle="CNN" student="" news=""]. The text is a straight forward sentence quoted i.e. "CNN student news..."
Why would videoUrl work correctly and the other two not?
You need to add some quotes around the attributes...
podItem.innerHTML = entry.title
+ "<a data-videoUrl=\"" + entry.link + "\" "
+ "data-videoTitle=\"" + entry.title + "\" "
+ "data-videoDescription=\"" + entry.contentSnippet + "\" "
+ "</a>";
You'll also want to make sure you escape any quotes that are inside the attributes as well.
The code dynamically creates a listview which works but i want to make it so when a listview item is clicked it sends the a url paramater to another method. When i set a paramater it doesnt alert the paramater, but when i give no parameter it works.
var output =
"<li onclick='openURL()'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";
The above works - No parameter in openURL();
var output =
"<li onclick='openURL('" + results.rows.item(i).url + "')'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";
The above doesnt work - I have done alert(results.rows.item(i).url) and it has a value.
function openURL(url) {
alert("opening url " + url);
}
Could someone explain what i'm doing wrong, i've been trying to solve the problem for hours.
Cheers!
You are using single quotes to open the HTML attribute, you can't use it as JavaScript String because you'll be closing the HTML attribute, use double quotes:
var output =
"<li onclick='openURL(\"" + results.rows.item(i).url + "\")'><h3> Module Code: " +
results.rows.item(i).module
+ "</h3>Room: "
+ results.rows.item(i).room +
"</li>";
This looks like a trivial question, but I am not sure how to deal with it. I have a DIV tag generated from javascript that goes like this:
$('#results')
.append('<DIV id='
+ A.pid
+ ' onmouseover=function(){google.maps.event.trigger(marker, 'mouseover');};><H3>'
+ A.name
+ '</H3></DIV>');
Firebug is giving me an error "missing ) argument after list" as it does not recognise the ) immediately after 'mouseover'. How do I resolve this?
UPDATE:
I understand this is about escaping quote, just that doing \'mouseover\' produces a syntax error upon mouseover of the DIV and doing "mouseover" produces a blank document.
The syntax error reads: function(){google.maps.event.trigger(marker,
You need to escape quote if it's inside another quote:
var x = "I don't like you!";
var y = 'I don\'t like you!';
var z = 'echo "this text?";';
To implement it on your case, it would be like this:
'<DIV id='
+ A.pid
+ ' onmouseover=function(){google.maps.event.trigger(marker, \'mouseover\');};><H3>'
+ A.name
+ '</H3></DIV>'
You issue is in the use of the ' character to delimit both the function and the arguments in your call.
Either switch one set of ' out for " or use \' around the values of the argument
$('#results')
.append('<DIV id='
+ A.pid
+ ' onmouseover=function(){google.maps.event.trigger(marker, "mouseover");};><H3>'
+ A.name
+ '</H3></DIV>');
//OR
$('#results')
.append('<DIV id='
+ A.pid
+ ' onmouseover=function(){google.maps.event.trigger(marker, \'mouseover\');};><H3>'
+ A.name
+ '</H3></DIV>');
Try to generate the following string
'<DIV id=' +
A.pid +
' onmouseover=\"google.maps.event.trigger(marker, \'mouseover\');\"> <H3>' +
A.name + '</H3></DIV>'
You need to put " around the values of your html attributes. Otherwise the browser thinks the attribute ends at the next whitespace and that is exactly right after the (marker, part.
$('#results')
.append('<DIV id="'
+ A.pid + '"'
+ ' onmouseover="function(){google.maps.event.trigger(marker, \'mouseover\');};"><H3>'
+ A.name
+ '</H3></DIV>');
Several things
Stop putting HTML in all caps. This is the 21st century not the 20th century.
You don't need an anonymous function for the onmouseover event.
Wrap attribute values in either single or double quotes (I use double below).
Read about JavaScript strings and quotes. Here is a tutorial.
Try this
$('#results').append('<div id="' +
A.pid +
'" onmouseover="google.maps.event.trigger(marker, \'mouseover\');"><h3>' +
A.name +
'</h3></div>');