jQuery .insertAfter() and .append() not working with AJAX call - javascript

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

Image is not showing in div using JavaScript

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 + '" />';

How to remove jQuery [object Object] message

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

How to populate an image as a link which are both stored in an array as JSON objects?

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.

Problem with .html() function in jQuery

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.

How to wrap text with an image tag?

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()+"'/>");
});

Categories