This question already has answers here:
Encode URL in JavaScript
(22 answers)
Closed 6 years ago.
I have a jQuery code where I am trying to append to an existing div a label tag which contains a URL. Below is the code:
var strURL = 'http://financials.morningstar.com/ratios/r.htmlt=tup®ion=usa&culture=en-US';
var str = '<li>';
str += '<label style="font-family:Arial;">' + strURL + '</label>';
str += '</li>';
$('#existingDiv').append(str);
When the page is actually displayed it shows the URL as:
http://financials.morningstar.com/ratios/r.html?t=tup®ion=usa&culture=en-US
A quick fix would be to add the label as a text as a second step after appending the html to the existingDiv - see demo below:
var strURL = 'http://financials.morningstar.com/ratios/r.htmlt=tup®ion=usa&culture=en-US';
var str = '<li>';
str += '<label style="font-family:Arial;">' + '</label>';
str += '</li>';
$('#existingDiv').append(str);
$('#existingDiv label').text(strURL);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="existingDiv"></div>
Related
This question already has answers here:
How can I apply a variable as an element ID with JavaScript?
(5 answers)
How can I pass an element to a function from onclick?
(2 answers)
Closed 7 months ago.
I have this function:
function displayInputIntro() {
var submitbutton = document.getElementById('submitbutton')
var intro = document.getElementById('Intro')
var introNewSection = document.getElementById('intro-row')
introNewSection.innerHTML += '<div class="col-lg-5 mb-lg-0 mb-4" id="intro">';
submitbutton.style.display = ''
}
This function displayInputIntro() can be called multiple times, and it will insert this new section into the body of the HTML as many times as one decides to do so. Problem is, I want to add a unique identifier, so that if I were to add something like this:
introNewSection.innerHTML += '<div class="col-lg-5 mb-lg-0 mb-4" id="intro">Remove Input';,
and click on Remove Input, then it would delete the input, not all of them.
I have tried something like this:
var uniqueID = new Date()
introNewSection.innerHTML += '<div class="col-lg-5 mb-lg-0 mb-4" id="' + uniqueID '"'>Remove Input';, and click on `Remove Input`, then it would delete the input, not all of them.
but that doesn't work. How can I do this?
you are passing an string to html code, not the real JS variable.
You can try something like this thant I found in How can I apply a variable as an element ID with JavaScript?:
var id = new Date();
var html ='<li id="' + id + '">'
+ '<input type="image" id="' + id + '" src="images/subtract.png" onclick="javascript:deleteProduct(this.id)" href="#">'
+ id
+ '</li>';
This question already has answers here:
How can I do string interpolation in JavaScript?
(21 answers)
Closed 3 years ago.
I am trying to add a variable inside another variable which is a block of html code. It seems that you cannot just type in the name of the variable into the html code.
<body>
<div id="wrapper"></div>
<script>
var link = "https://google.com"
var codeBlock = '<a href="link">' +
'LINK TO GOOGLE' +
'</a>';
document.getElementById("wrapper").innerHTML = codeBlock
</script>
</body>
I want the result to be a link to https://google.com.
You can use template literals for that:
const link = 'https://stackoverflow.com';
const linktext = 'stackoverflow';
const link1 = 'https://google.com';
const linktext1 = 'google.com';
// template literals
let codeblock = `${linktext}`;
// or string concatenation
codeblock += '' + linktext1 + '';
document.getElementById('wrapper').innerHTML = codeblock;
a { margin: 10px; }
<div id="wrapper"></div>
Best way to replace XML string into the body tag rather than using jQuery $('body').html(string)
Trying to replace the body element on click event with the XML string below.
xmlStringReplace() {
let xmlString = '<xml id="POSCMD" LateProcessing="true"><commands>
<injectfieldmacro type="field" name="FIELD_CLEAR"></injectfieldmacro>';
for (let item of itemCode) {
xmlString += '<injectdata type="literal" data="' + item + '">
</injectdata>';
xmlString += '<injectfieldmacro type="field" name="FIELD_UPC">
</injectfieldmacro>';
}
xmlString += '</commands></xml>';
$('body').html(xmlString);
}
Is there a better way of doing the above code in Angular2?
Can try this, but this is just appending to div and I get sanitizing HTML stripped.. in the console.log as well.
this.xmlStringPOS = '<xml id="POSCMD" LateProcessing="true"><commands><injectfieldmacro type="field" name="FIELD_CLEAR"></injectfieldmacro>';
for (let item of itemCode) {
this.xmlStringPOS += '<injectdata type="literal" data="' + item + '"></injectdata>';
this.xmlStringPOS += '<injectfieldmacro type="field" name="FIELD_UPC"></injectfieldmacro>';
}
this.xmlStringPOS += '</commands></xml>';
`<div [innerHtml]="xmlString "></div>`
I am developing application using jQuery Mobile and Phonegap and this application i want to integrate twitter.
i try this.
<script type="https://twitter.com/status/user_timeline/'user'.json?count=30&callback=listTweets" type="text/javascript"></script>
JAVASCRIPT IS:
function listTweets(data){
console.log(data);
var output = '<ul data-role="listview">';
$.each(data, function(key, val){
var text = data[key].text;
var thumbnail = data[key].user.profile_image_url;
var name = data[key].user.name;
output += '<li>';
output += '<img src="' +thumbnail+ '" alt="Photo Of ' +name+ '">';
output += '<div>' +text+ '</div>';
output += '</li>';
});
output += '</ul>';
$('#tweetlist').html(output);
}
html is:
<div data-role="page" id="tweets">
<div data-role="content" id="tweetlist">
</div>
</div>
it give me blank screen and when I inspect element it give me:
Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: only screen and (-webkit-min-device-pixel-ratio: 1.5), not all, only screen and (min-resolution: 240dpi)
Any suggestion
Thanks in advanced.
Use the refresh call as specified here : http://api.jquerymobile.com/listview/#method-refresh
$("#tweetlist").listview('refresh');
should works.
EDIT
My apologies. I didn't read your code carefully. The main problem is your $.each loop. You close the ultag and you display the result before the end of the loop (JS is functionnal don't you remember?) Try this:
function listTweets(data){
console.log(data);
var output = '<ul data-role="listview">';
var text, thumbnail, name;
// Use a loop instead a $.each
for(var i=0, _len=data.length; i < length; i++) {
text = data[i].text;
thumbnail = data[i].user.profile_image_url;
name = data[i].user.name;
output += '<li>';
output += '<img src="' +thumbnail+ '" alt="Photo Of ' +name+ '">';
output += '<div>' +text+ '</div>';
output += '</li>';
}
output += '</ul>';
$('#tweetlist').html(output);
$("#tweetlist").listview('refresh'); // In case of
}
I'm adding some amount of div based on the xml list which contain some data and url
Currently trying to use onClick but it doesn't seems right on the js that loads the div part.
//retrieve each of the data field from ITEM
var url = item.find('url').text();
var image = item.find('project-img').text();
var title = item.find('id').text();
var desc = item.find('desc').text();
var html;
//Embed them into HTML code
html = '<div class="project"><img src="' + image + '" alt="' + title + '" />';
html += '<div class="info">';
html += '<div class="title">'+title+'</div>';
html += '<div role="button" class="launch" onclick="window.open('+url+',"mywindow");">Launch Website</div>';
html += '<div role="button" class="more">View More</div>';
html += '</div></div>';
I think it somehow get mess up on the adding 'url' part with ' or "
Or there would be a much easier way to call a link on such situation?
as per your requirement correct syntax would be
html += '<div role="button" class="launch" onclick="window.open(\''+url+'\',\'mywindow\');">Launch Website</div>';
I think you have an error (the only one i could spot), so try the following:
onclick="window.open('+url+',\'mywindow\');"