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.
Related
I am trying to execute the following code:
<button onclick="increment()">Increment</button>
<div id="iframe">
<script>
var id = 139000;
var link='<iframe src="https://somewebsite.com/something.aspx?sa=1&pid=' + id + '" height="600px" width="100%" />';
function increment(){
id++;
document.getElementById('iframe').innerHTML = id + link ;
}
</script>
</div>
But while executing, the & in src="" converts to & which breaks the original URL and doesn't go to the desired destination. I looked up on the internet but as I am a noob, I was not able to figure it out. Please help me to make this work!
All you need to do is
<button onclick="increment()">Increment</button>
<div id="iframe">
<script>
var id = 139000;
var link='<iframe src="https://somewebsite.com/something.aspx?sa=1&pid=' + id +
'" height="600px" width="100%" />';
var new_link = link.replaceAll('&','&');
function increment(){
id++;
document.getElementById('iframe').innerHTML = id + new_link;
}
</script>
This is definitely a blogger issue, and the reason behind happening is :
The character "&" is an ISO HTML reserved character used to denote the start of a parameter.
To overcome this the Blogger editor translate the & you enter to the HTML entity, & , that will display & when the page or URL is rendered in a browser, so that you don't have to do it yourself.
I've an image tag with a parent div which contains image_wrap class. Now I want to download this image using javascript. I've got some solution to download this image, but this code is not working for me. Can anyone help me please?
Here is my code:
var img_wrap = $('.image_wrap'),
src = img_wrap.find('img').attr('src'),
anchor = '<a href="' + src + '" download></a>',
downloadable_tag = img_wrap.append(anchor);
downloadable_tag.click()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image_wrap">
<img height="100px" width="200px" src="https://s3.envato.com/files/248564292/01_eduma.__large_preview.__large_preview.jpg" />
</div>
You have a few problems there in your code.
First, you are appending the wrong element to img_wrap element. You should be appending the anchor element instead of the downloadable_tag.
Then, .click() should be used on dom objects, not on Jquery objects. So I think you should fix that line too.
Finally, the download attribute will show the download window only for files which are in the same domain. It doesn't work for cross origin requests for security purposes.
So with all the mentioned fixes, this is how your code should be:
<div class="image_wrap">
<img height="100px" width="200px" src="01_eduma.__large_preview.__large_preview.jpg" />
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
var img_wrap = $('.image_wrap'),
src = img_wrap.find('img').attr('src'),
anchor = $('<a href="' + src + '" download>hello</a>'),
downloadable_tag = img_wrap.append(anchor);
anchor[0].click()
Notice that I have used a local path for the image. Here's a plunker demo.
http://plnkr.co/edit/eK1yJTYPUzF5p4DVTRem?p=preview
Hope it helps :) Feel free to ask if you have any doubts!
Try following script:
http://jsfiddle.net/h4JXs/8928/
$(document).ready(function () {
var img_wrap = $('.image_wrap'),
src = img_wrap.find('img').attr('src'),
anchor = '<a href="' + src + '" download>hello</a>',
downloadable_tag = img_wrap.append(anchor);
downloadable_tag.trigger('click')
});
It seems you want to download the image rather than navigating it. The attribute download works only for same origin URLs. Check documentation here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a
You have assigned the same variable in the append statement
downloadable_tag = img_wrap.append(downloadable_tag);
Change it with the below one.
downloadable_tag = img_wrap.append(anchor);
var img_wrap = $('.image_wrap'),
src = img_wrap.find('img').attr('src'),
anchor = '<a href="' + src + '" download>hello</a>',
downloadable_tag = img_wrap.append(anchor);
downloadable_tag.click()
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="image_wrap">
<img height="100px" width="200px" src="https://s3.envato.com/files/248564292/01_eduma.__large_preview.__large_preview.jpg" />
</div>
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 + '" />';
I'm working on an application to print a page. There is ALWAYS a blank extra page. I tried those solutions listed here but the problem is still present.
My print function is as follows:
// divID1 = the base, big div
// divID2 = some iframe inside divID1 (a table)
// value = the title of the print page
function printDiv3(divID1,divID2,value)
{
var func = "<style>td,th {padding:10px}
html, body{color:#000; height: 90%}
h2{font-size:18px;}
h4{font-size:16px;text-align:center;margin-bottom:-40px}
input,select{background-color:#000;border:thin solid #999999;}
.footer{position:absolute;bottom:0px;left:0px;right:0px,text-align:center;
width:100%;font-size:12px;margin-bottom:0px}
.sign{float:right;text-align:right;direction:rtl}</style>";
var header = "<h4>" + value
+ "</h4><img align='right' width='150' src='images/logo.png'><br><br><br><br>";
var footer = "<div class='footer' align='center'>Tel. address, etc </div> ";
var sign = "";
//Get the HTML of div + uframe
var divElements = document.getElementById(divID1).innerHTML
+ "<div style='width:100%;height:900px;position:absolute;top:325px'>"
+ window[divID2].document.body.innerHTML + "</div>" ;
//Get the HTML of whole page
var oldPage = document.body.innerHTML;
//Reset the page's HTML with div's HTML only
document.body.innerHTML =
"<html><head><title></title>" + func + "</head><body>"
+ header +"<table border=1>" + divElements + "</table>"
+ sign + footer +"</body></html>";
//Print Page
window.print();
//Restore orignal HTML
document.body.innerHTML = oldPage;
window.close();
}
My page structure is as follows:
<div id="example" > <!-- base div -->
<table border='1' width="100%" class="imagetable" id="imagetable1" >
...
</table>
<!-- the iframe -->
<table border='0' width="100%" class="imagetable">
<tr><td><div>
<iframe id="iframe_form" src="S.php" frameborder=0 style="width:100%;height:400px" ></iframe>
</div></td></tr>
</table>
<table>
...
</table>
</div>
Is the cause of problem that the div contains three consequent table?
I think you shouldn't do like this. The better ay is convert your html content in pdf.
If you stay in html you should respect print format (as A4) to expect what it work...
If you don't mastered the content of iframe, take a javascript screenshot ^^:
Using HTML5/Canvas/JavaScript to take screenshots
I hope it help you.
See you.
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);
}