I am trying to do something that I thought I've done 100 times already... I'm getting and making a new image after an ajax call and am trying to insert it into an appropriate, pre-existing div
The HTML looks like this
<div class="preload">
<div class="createYourOwn">...</div>
<img src="source.com"/>
<img src="source.com"/>
<img src="source.com"/>
<img src="source.com"/>
<img src="source.com"/>
</div?
The AJAX call does this:
$.post("script.php", {phone:phone}, function(data){
if(data){
var newImage = "<img src='https://api.twilio.com" + data + "/>";
$(newImage).insertAfter('.createYourOwn');
}
});
I've tried this as well:
$("<img src='https://api.twilio.com" + data + "/>").insertAfter('.createYourOwn');
And this:
$(newImage).append('.preload');
even though that doesn't have the desired outcome.
I'd like to insert the image that I receive with the data just after the .createYourOwn div inside of .preload.
Not sure what's going on. But nothing is happening, no errors, not even an image with a borked src. Nothing at all happens.
Anyone have any ideas?
Thank you!
Concatenate string properly:
Replace this:
var newImage = "<img src='https://api.twilio.com" + data + "/>";
// you're missing to close quote for src here ^^
With this:
var newImage = "<img src='https://api.twilio.com" + data + "' />";
Or switch the quotes:
var newImage = '<img src="https://api.twilio.com' + data + '" />';
Related
I am trying to do image light box using JavaScript. Here is my html code
<div id="lightbox2">
</div>
<div id="lightbox">
<button onclick="lgBox('www.w3schools.com/howto/img_fjords_wide.jpg')"><img src="https://www.w3schools.com/howto/img_fjords_wide.jpg" alt=""></button>
</div>
I am sending current clicked link as a parameter in lgBox function.
Here is my Js function.
function lgBox(url){
var u = url;
alert(u);
document.getElementById("lightbox2").innerHTML="<img src='u' />";
document.getElementById("lightbox").style.display="none";
}
It shows the url in alert box properly that I passed.
But why this link is not working here "<img src='u' />";
Thanks in advance.
The method what you are using is wrong as it places the string u as it is in the src tag. You want to replace this u with the actual value of that variable. See below:
function lgBox(url){
var u = url;
alert(u);
//this is wrong and will throw an error in console (404)
document.getElementById("lightbox2").innerHTML="<img src='u' />";
document.getElementById("lightbox").style.display="none";
}
Instead of the above you should do something like this
function lgBox(url){
var u = url;
alert(u);
//ES6 template literals or if this is not supported then you can use
//concatenation also.
document.getElementById("lightbox2").innerHTML=`<img src=${u} />`;
document.getElementById("lightbox").style.display="none";
}
You need to concat the var u to the string with + like this:
'<img src="' + u + '" />'
In your code:
function lgBox(url){
var u = url;
alert(u);
document.getElementById("lightbox2").innerHTML='<img src="' + u + '" />';
document.getElementById("lightbox").style.display="none";
}
You simply passe the u string in the html tag, you have to actually concatenate the url like this :
document.getElementById("lightbox2").innerHTML = '<img src="' + u + '" />';
I created a java variable called 'html' in which I add a div with anchor inside using jQuery which I use for a revel modal popup. When I launch the site the modal works fine but I get this [object Object] message next to it and I don't really know why. Is there a way to remove it or do I need to modidy the code? You can find an example here Website Example by clicking on any marker. I am using ajax jquery 1.8.0.
html = '<div id="infoWindow">';
if (paddimg) {var html = html + '<a class="infoa" data-reveal-id="modal2" href="#" data-animation="fade"></a>'};
if (paddimg) {var div = $('<div id="modal2" class="modal"><p>Public address: '+padd+'</p><br/><img width="200px" src="'+paddimg+'"><a class="close-reveal-modal">×</a></div>')};
$('body').append(div);
if (paddimg) {var html = html + div};
var html = html + '<\/div>';
Your problem is you have a JQuery object, var div = $('<div id="modal2" class="modal"><p>Public address: '+padd+'</p><br/><img width="200px" src="'+paddimg+'"><a class="close-reveal-modal">×</a></div>') (regardless of how valid it is) and you are concatenating it to a string if (paddimg) {var html = html + div};
you would see the same [object Object] if you just printed div to the console
without seeing the rest of your code (or really understanding why you have done things like this) I assume this segment should look like :
html = '<div id="infoWindow">'
if (paddimg) {
html = html + '<a class="infoa" data-reveal-id="modal2" href="#" data-animation="fade"></a>'
var div = '<div id="modal2" class="modal"><p>Public address: '+padd+'</p><br/><img width="200px" src="'+paddimg+'"><a class="close-reveal-modal">×</a></div>'
$('body').append(div)
}
html = html + '<\/div>'
this is your immediate problem:
if (paddimg) {var html = html + div};
you are using div as a string
maybe try this:
html = $('<div id="infoWindow"></div>');
if (paddimg) {
var _a = $('<a class="infoa" data-reveal-id="modal2" href="#" data-animation="fade"></a>')
var div = $('<div id="modal2" class="modal"><p>Public address: ' + padd + '</p><br/><img width="200px" src="' + paddimg + '"><a class="close-reveal-modal">×</a></div>')
html.append(_a).append(div);
} else {
$('body').append(div);
}
Please click on my JSFiddle link to see the code in action for what I am trying do. As you will notice, I have the tile, image, and link stored as JSON objects, but when you run my code, it does not display my title and image as a link as specified in my HTML file, along with the specified in attributes. I've been working on this for a while now, and I can't figure it out, when it seems like something that should be rather obvious. Does anyone have any ideas, suggestions, or a solution for me? I tried setting the output in JavaScript to be "" but that did not work.
HTML:
<a id="food" class="thumbnail" target="_blank">
<img width="200" class="img-shadow">
<hr>
<h3></h3>
</a>
JavaScript:
var data={"food":[
{
"title":"Pumpkin Spice Bread Recipe",
"image":"img/bread.jpg",
"link":"http://willowbirdbaking.com/2011/09/18/pumpkin-spice-pull-apart-
bread-with-butter-rum-glaze/"
}
]}
var output="<ul>";
// Create a variable to temporarily store the data
for (var i in data.food) {
output+="<li>" + data.food[i].title + data.food[i].image + data.food[i].link + "</li>";
}
output+="</ul>";
// Once we go through all of the elements in the array,
// we use the output variable to populate the placeholder div.
document.getElementById("food").innerHTML=output;
JSFiddle
Thanks in advance, much appreciated for any bit of help.
You have to use <img /> tag to output image. Your mistake is you just outputted image link.
Use image link tag: var bob = "some text <img src='"+data.food[i].image+"' />";
Try this:
var data={"food":[
{
"title":"Pumpkin Spice Bread Recipe",
"image":"img/bread.jpg",
"link":"http://willowbirdbaking.com/2011/09/18/pumpkin-spice-pull-apart-
bread-with-butter-rum-glaze/"
}
]}
var output="<ul>";
// Create a variable to temporarily store the data
for (var i in data.food) {
output+="<li>" + data.food[i].title + "<img src='"+data.food[i].image+"' /> " + data.food[i].link + "</li>";
}
output+="</ul>";
// Once we go through all of the elements in the array,
// we use the output variable to populate the placeholder div.
document.getElementById("food").innerHTML=output;
If you want your image be the link you have to put your image into <a></a> tag like this:
for (var i in data.food) {
output+="<li><a title='" + data.food[i].title + "' href='"+data.food[i].link+"'><img title='" + data.food[i].title + "' src='"+data.food[i].image+"' /></li>";
}
So final code:
var data={"food":[
{
"title":"Pumpkin Spice Bread Recipe",
"image":"img/bread.jpg",
"link":"http://willowbirdbaking.com/2011/09/18/pumpkin-spice-pull-apart-
bread-with-butter-rum-glaze/"
}
]}
var output="<ul>";
// Create a variable to temporarily store the data
for (var i in data.food) {
output+="<li><a title='" + data.food[i].title + "' href='"+data.food[i].link+"'>" + data.food[i].title + "<img title='" + data.food[i].title + "' src='"+data.food[i].image+"' /></li>";
}
output+="</ul>";
// Once we go through all of the elements in the array,
// we use the output variable to populate the placeholder div.
document.getElementById("food").innerHTML=output;
And jsfiddle.
It is inside the <a> tag. You just need a href attribute on it for it to look like a real link.
Can anyone explain why this jQuery .html() function is not outputting anything?
I'm new too jQuery and cant seam to spot anything, if you can please tell me :D
I'll just include the html, nothing else:
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.scrollTo-1.4.2.js"></script>
<script type="text/javascript">
//when the DOM is ready
$(document).ready(function(){
var like_count = <?php print "23"; ?>;
//Scripts for getting number of comments for this post
var comment_count = <?php print "12"; ?>
var thumnail_path - "";
var time_ago - "";
//settings on top
var doindex = 'comments.php?item_id=';
var initialPosts = <?php echo get_posts(0,$_SESSION['posts_start']); ?>;
//function that creates posts
var postHandler = function(postsJSON) {
$.each(postsJSON,function(i,post) {
//post url
var postURL = '' + doindex + post.item_id;
var id = 'post-' + post.ID;
//create the HTML
$('<div></div>')
.addClass('post')
.attr('id',id)
//Script for getting the number of likes for this post
//generate the HTML
.html('<table width="244" height="121" border="0" cellpadding="0" cellspacing="2" ><tr><td height="24" colspan="2" bgcolor="#0270B7"><table width="410" border="0"><tr> <td width="404" height="20" class="username"> ' + post.username + '<span class="name"> ' + post.name + '</span></td></tr></table></td></tr><tr> <td width="51" bgcolor="#Edeff4"><span class="thum"><img src="' + thumnail_path + '" alt="" width="50" height="50" /></span></td><td width="355" height="50" bgcolor="#Edeff4" class="content"> ' + post.item_content + '</td></tr><tr><td height="19" colspan="2" bgcolor="#Edeff4" class="content"> <span class="post-title">comment </span>(' + likecount + '<span class="post-title">)</span> <span class="post-title">likes (' + likecount + ') ' + time_ago + '</span></td></tr><tr><td height="18" colspan="2" class="content"> </td></tr></table>')
Thanks :))
Assuming you haven't left out part of your script, it doesn't look like you're ever adding your div to the body somewhere.
After your html call, put .appendTo('body'). Example:
$('<div></div>').html("Some stuff...").appendTo('body');
Of course, you can use whatever function you want to place it in the document.
Why would it output anything?
I'm not a jquery wizard, but I believe if you give .html information (as you are doing) it doesn't output anything, instead it loads that into the item specified.
aka:
$('body').html('<h1>TEST</h1>');
if you want to retrieve the html don't put anything between the parenthesis
var body = $('body').html();
Note: Not tested
I would look up information about jquery on visualjquery.com and http://api.jquery.com/category/selectors/basic-css-selectors/
<div id='output'></div>
<script>
$('#output').html('<your content>');
</script>
You must call the .html() function on something.
Check out this link :
.html()
I usually add HTML within a DIV by selecting it by its id. You might wanna try adding the html on another line, selecting the div by its id like that:
$('<div></div>').addClass('post').attr('id',id);
$('#'+id).html('blablabla');
I've not tested this. It it doesn't work, you can create an empty DIV like Arun David just said before and append the new DIV in.
Basically I have a html output in the format:
<div class="qtip-content">http://www.urlgoeshere.com/image.jpg</div>
What I want to do is use jQuery to wrap this in an image tag so the output is
<div class="qtip-content"><img src="http://www.urlgoeshere.com/image.jpg" /></div>
I have multiple instances of these on the page, and each url is different.
How can I do this?
This will handle each element on your page
$(".qtip-content").each(function() {
$(this).html("<img src='" + $(this).html() + "' />");
}
$('.qtip-content').each(function(){
$(this).html("<img src='"+$(this).html()+"'/>");
});