I am getting a response from an API like so (This is a part of it)
{
"Content": "<span class="PubAPIAd"><script type="text/javascript" src="http://ru.gwallet.com/r1/ad/MTAuMTAyLjIuNzQgODg4OA==/c366792T246999B22980F24848R13t2?data=zmxnsak48w9msqkeq9hbz4dja7u4sstqxoircsqutictr7inboxhwujhu8n1c9scn5t53xs396h6re6nz4u1a1brbnmzzxjt7qy8difcdkgk9g34ngknd9qky7w5udgzrhm64h74abbpyh47djbgb5acp3f1ghb1kfeysy716j133gqhydk3au6ydj8h14aztefkrjfp7fj3mqj54sntbrhosseh397g7g7ns75ja3rhwcq9gzao5m6g8h9zph5sckzeoahibtru5cbda7bpcfmrra&auction_price=0.05"></script></span> <img src="http://aktrack.pubmatic.com/AdServer/AdDisplayTrackerServlet?operId=1&pubId=51762&siteId=51766&adId=95947&adServerId=243&kefact=0.050000&kaxefact=0.050000&kadNetFrequecy=1&kadwidth=320&kadheight=50&kadsizeid=31&kltstamp=1416004675&indirectAdId=0&adServerOptimizerId=2&ranreq=0.05247270006223126&kpbmtpfact=0.050000&dcId=2&tldId=80779&passback=0&imprId=139A6406-07A0-4DD1-8B76-81C35E5EA412&mobflag=1&ismobileapp=1&modelid=604&osid=7&udidtype=0&campaignId=6575&creativeId=0&pctr=0.000000&wDSPByrId=11&imprCap=1&pageURL=http%3A%2F%2Fatt_1617ee24-7ff6-4402-9e8b-77dcb53f880f.com" width="1" height="1" />"
}
I am trying to append the "content" to a div on my web page using Jquery append or js innerHTML to display an ad. However i do not see an image.
document.getElementById('myDiv').innerHTML = response.Content;
But if i hard code this into my HTML to start with it displays an image.
Would really like to know why this is happening and how i can fix it
Note: I have no control over the backend. Also this image is an ad i am trying to load so please disable ad blocker to try viewing it.
EDIT: This is what is see in the console
Resource interpreted as Image but transferred with MIME type text/html: "http://aktrack.pubmatic.com/AdServer/AdDisplayTrackerServlet?operId=1&pubId…mprCap=1&pageURL=http%3A%2F%2Fatt_1617ee24-7ff6-4402-9e8b-77dcb53f880f.com".
EDIT 2 : Here is an example of it Hard Coded (where it renders properly). Need to disable ad blocker to view --> http://jsfiddle.net/0z1cybrf/
I'm assuming that response.Content returns html that you want to insert into myDiv. In this case you can simply use jQuery.
$('#myDiv').append(response.Content);
also as Samuel Liew pointed out in the comments, your string isn't valid. You can fix this by changing the quotes next to the attributes to ' (single quotes).
EDIT - Try this:
$('#myDiv').append('<span class="PubAPIAd"><script type="text/javascript" src="http://ru.gwallet.com/r1/ad/MTAuMTAyLjIuNzQgODg4OA==/c366792T246999B22980F24848R13t2?data=yydr8ogr3e5zsn1cacgexhma83oaf1xzjfyna3mgdwi473hf3wjcwujhu8n1c9scn5t53xs396h6re6nz4u1a1brbnmzzxjt7qy8difcdkgk9g34ngknd9qky7w5udgzrhm64h74abbpyh47djbgb5acp3f1ghb1kfeysy716j133gqhydksc3h869rc47kzse66wx4hpx4uiqj54sntbrhosseh397g7g7ns75ja3rhwcq9gzao5m6g8h9zph5sckzeoahibtru5cbda7bpcfmrra&auction_price=0.05"></script></span><img src="http://aktrack.pubmatic.com/AdServer/AdDisplayTrackerServlet?operId=1&pubId=51762&siteId=51766&adId=95947&adServerId=243&kefact=0.050000&kaxefact=0.050000&kadNetFrequecy=1&kadwidth=320&kadheight=50&kadsizeid=31&kltstamp=1416004779&indirectAdId=0&adServerOptimizerId=2&ranreq=0.20811005185761733&kpbmtpfact=0.050000&dcId=2&tldId=0&passback=0&imprId=E1FB9573-FF52-4CAC-BFE1-92EDBDC23FD2&mobflag=1&ismobileapp=1&modelid=604&osid=7&udidtype=0&campaignId=6575&creativeId=0&pctr=0.000000&wDSPByrId=11&imprCap=1&pageURL=http%3A%2F%2Fatt_1617ee24-7ff6-4402-9e8b-77dcb53f880f.com" width="1" height="1" />');
Tell me if you get the same result.
### Final Edit ###
It seems the javascript in the script tag isn't executing and that's why the image isn't showing up. To prove this you can insert the Content like you were doing before, and then visit the link given in the <script> src attribute. Copy the script and go to your console. Paste the code into the console and press enter. The image should show up. At least it did for me. You can try hardcoding the script tag into your html, because that wont change.
HTML code
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script>
<script src="functions.js></script>
<script type='text/javascript' src='http://ru.gwallet.com/r1/ad/MTAuMTAyLjIuNzQgODg4OA==/c366792T246999B22980F24848R13t2?data=yydr8ogr3e5zsn1cacgexhma83oaf1xzjfyna3mgdwi473hf3wjcwujhu8n1c9scn5t53xs396h6re6nz4u1a1brbnmzzxjt7qy8difcdkgk9g34ngknd9qky7w5udgzrhm64h74abbpyh47djbgb5acp3f1ghb1kfeysy716j133gqhydksc3h869rc47kzse66wx4hpx4uiqj54sntbrhosseh397g7g7ns75ja3rhwcq9gzao5m6g8h9zph5sckzeoahibtru5cbda7bpcfmrra&auction_price=0.05'></script>
</head>
<body>
<DIV id="myDiv" ></DIV>
</body>
</html>
jQuery Code functions.js
$(document).ready(function() {
$(window).load(function() {
$('#myDiv').append("<img src='http://aktrack.pubmatic.com/AdServer/AdDisplayTrackerServlet?operId=1&pubId=51762&siteId=51766&adId=95947&adServerId=243&kefact=0.050000&kaxefact=0.050000&kadNetFrequecy=1&kadwidth=320&kadheight=50&kadsizeid=31&kltstamp=1416004779&indirectAdId=0&adServerOptimizerId=2&ranreq=0.20811005185761733&kpbmtpfact=0.050000&dcId=2&tldId=0&passback=0&imprId=E1FB9573-FF52-4CAC-BFE1-92EDBDC23FD2&mobflag=1&ismobileapp=1&modelid=604&osid=7&udidtype=0&campaignId=6575&creativeId=0&pctr=0.000000&wDSPByrId=11&imprCap=1&pageURL=http%3A%2F%2Fatt_1617ee24-7ff6-4402-9e8b-77dcb53f880f.com' width='1' height='1' />");
});
});
Related
I am trying to convert HTML to word (.docx) by using JavaScript. I am using this http://www.jqueryscript.net/other/Export-Html-To-Word-Document-With-Images-Using-jQuery-Word-Export-Plugin.html plug-in for conversion. But this one is just converting every thing inside the HTML file. i mean with head tag all elements even with some content inside. output file looks like this
Mime-Version: 1.0 Content-Base:
file:///home/userprofile/JsWs/sample.html Content-Type:
Multipart/related; boundary="NEXT.ITEM-BOUNDARY";type="text/html"
--NEXT.ITEM-BOUNDARY Content-Type: text/html; charset="utf-8" Content-Location: file:///home/userprofile/JsWs/sample.html
<p>this is going to be paragraph </p>
</body></html>
--NEXT.ITEM-BOUNDARY--
and my html is
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="FileSaver.js"></script>
<script src="jquery.wordexport.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery(document).ready(function($) {
$("a.word-export").click(function(event) {
$("#export-content").wordExport();
});
});
</script>
<div id="export-content">
<p>this is going to be paragraph </p>
</div>
<a class="word-export" href="javascript:void(0)"> Export as .doc </a>
</body>
</html>
Help me out how can i convert content of HTML in word.
I don't believe this will open in Microsoft Word consistently on all devices. I've actually been working on a similar project googoose. It is meant to convert html to word documents as well. This does work for me on both my desktop and mobile phone version of Microsoft Word.
From my testing, Word will have problems with MIME header, and also the fact that there are no html, body tags, etc.
You should look into this project if you're still trying to do this. It should be supported for some time, as there's also a Wordpress Plugin that uses googoose, which is linked to on the readme. The default action is to download the document on page load, but you can set it to be run onClick. For example,
Just include jquery and this plugin.
<script type="text/javascript" src="http://github.com/aadel112/googoose/jquery.googoose.js"></script>
Then to invoke onClick
jQuery(document).ready(function($) {
$("a.word-export").click(function(event) {
$(document).googoose({
area: '#export-content'
});
});
});
With googoose you can include a table of contents, header, footer, automatic page numbering, etc. You can open the document up in Print view, set the margins, and page size. It's way more configurable than the referenced script, which is not configurable at all.
Try this,
function ConvertToHtml()
{
var div = document.createElement("div");
div.id = "export-content";
div.innerHTML = "<p>this is going to be paragraph </p>";
document.body.appendChild(div);
$("#export-content").wordExport();
}
I've been struggling with this one for a few hours now.
I am trying to attach click listeners to elements within an iframe with no src attribute. The entire page is basically inside that bad boy.
When I use "inspect element", the body of iframe looks empty (dunno if that has to do with the fact it has no src attribute.
<iframe id="CoverIframe" name="CoverIframe">
#document
<html>
<head></head>
<body></body>
</html>
</iframe>
When I enter the ID of the iframe in the console, it simply returns null, which prevents me from checking the elements it contains via contents().find() or anything else for that matter. I can only see its content (and by extension the elements on the page) by showing the source code (right click>see source).
Any thoughts on this? Is it because of the absence of src attribute? Any way I can get around it?
Thanks,
Alexis
As you noticed, you can't just set the innerDocument of an iframe like that.
However, you can use its (html-5 only)srcDoc attribute to set it,
<iframe id="CoverIframe" name="CoverIframe" srcdoc="
<html>
<head></head>
<body>hello</body>
</html>"
></iframe>
or use a data:text/html;charset=utf-8,<html><head></head><body>hello</body></html>".
<iframe id="CoverIframe" name="CoverIframe" src="data:text/html;charset=utf-8,<html>
<head></head>
<body>hello</body>
</html>"
></iframe>
But for the later, you will soon need to encodeURI() your page.
So the best is probably using javascript :
<script>
var yourHTML = "<html><head></head><body>hello</body></html>";
function loadFrame(e){e.contentDocument.write(yourHTML)};
</script>
<iframe id="CoverIframe" name="CoverIframe" onload="loadFrame(this)">
► Show code fiddle
I have been trying to wrap a link around an image. I have searched and found that wrap() in jQuery would help me. When I tried it, nothing seems to work. Is there something that I am doing wrong?
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://a1.mzstatic.com/us/r30/Music3/v4/fb/af/59/fbaf5908-0839-abc6-9f6a-bc7cc5b84f27/cover170x170.jpeg" class="YTimgs">
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript' />
<script>
$('.YTimgs').wrap('');
</script>
Your code seems to be ok as it works in this fiddle http://jsfiddle.net/pqqyoakm/
It could be that the javascript is executing before the image has loaded try:
$(document).ready(function(){
$(".YTimgs").wrap("<a href='http://www.chordzone.org'></a>'")
})
The problem is that you are missing the closing tag for the script that loads jQuery, so the script tag after it will be swallowed up and ignored.
A script tag can not be self-closed, so the second script tag ends up part of the first one, and as there is a src attribute in the script tag, the content inside the tag is ignored.
Add an ending tag to the script tag:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>
My problem seems pretty easy but I'm kinda new to web programming, so here it is :
I want my button to refresh the page, pass some GET parameters to trigger a PHP action and I don't want the screen to scroll on top of the page.
What I'm using at the moment is a mix of ajax and javascript, it does what I want but it's not reliable. Here's what I remember of the code (I don't have the code at hand)
<?php
echo '
<span href="$.ajax(\''.$_SERVER['PHP_SELF'].'?do=dosomestuff\'); setTimeout(function(){windows.location.reload()},100);)> ... </span>';
?>
I have three issues with this implementation :
I feel it's overkill to use ajax when a href would maybe do the job
A friend of mine tested it and he got the firefox pop up ("To display this page, Firefox must send information that will repeat any action (such as a search or order confirmation) that was performed earlier") everytime he hits the button. I read it comes from POST data passing, but I only use GET data.
On some computers, the button doesn't work everytime. It's random, maybe the delay is not big enough. How big can the delay be so that I'm 100% positive it will work everytime but at the same time it's not noticeable for the user ?
Thank you for your help and advices !
Edit : following Tularis' advice, here's the code I came up with, but I can't manage to make it work
<?php
if (isset($_GET['do']) and $_GET['do'] == 'swap')
{
rename('img1.jpg', 'img3.jpg');
rename('img2.jpg', 'img1.jpg');
rename('img3.jpg', 'img2.jpg');
}
?>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#spanLink").click(function() {
$.ajax('<?php echo $_SERVER['PHP_SELF'];?>?do=swap');
});
});
</script>
</head><body>
<img src="img1.jpg" width="300" height="300" alt="cat">
<img src="img2.jpg" width="300" height="300" alt="dog">
<span style="cursor:hand;" id="spanLink">Some text to click</span>
</body></html>
First of all, don't combine html-links with javascript inside them. That's bad form (and leads to exactly the problem you're having). Instead I suggest using jQuery and linking the onClick event handler to the span element like so:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function() {
$.('#spanLink').click(function() {
$.ajax('<?php echo $_SERVER['PHP_SELF'];?>?do=somestuff');
});
});
</script>
</head><body>
<span id="spanLink">Some text to click</span>
</body></html>
I suggest you to use ajax and jQuery where you can easily get the new content and update it anywhere you want in page without reloading the complete page.
I hope you're well.
Short:
My HTML reads:
<img id="JavImage">
<script language="JavaScript" type="text/javascript"
src="http://www.foobar.com/Contents.js"></script>
</img>
and my Contents.js reads:
document.getElementById("JavImage").src="https://www.foobar.com/imgURL.jpg";
It displays the image imgURL correctly in FF15, but doesn't display it at all in IE8. I checked the source and FF added the 'src' attribute appropriately, whereas the 'src' attribute had not been appended in IE8.
From my research on these forums, IE has issues with the getElementById and getElementsByName, however <img id="JavImage" name="JavImage"></img> also didn't work.
Please advise. For more information, see below.
Long:
I have a simple HTML page reading:
<script language="JavaScript" type="text/javascript" src="http://www.foobar.com/JavPage.js"></script>`
and JavPage.js reads:
document.write('<!DOCTYPE html><html><head>...<body><a id="JavHeader"><script language="JavaScript" type="text/javascript" src="http://www.foobar.com/Contents.js"></script></a>...</html>');
and Contents.js reads:
document.getElementById("JavHeader").href="www.foobar.com";
document.getElementById("JavHeader").innerHTML="Foobar";
There are various such elements with corresponding IDs in Contents.js.
My intention was to allow the HTML to be written by an external file, so that it can be edited remotely. Is there a more efficient way of doing this?
The simple HTML page renders the entirety of the Javascript, but some elements work in Firefox/Chrome that don't work in IE (See Short). Please advise.
for
<img id="JavImage"><script language="JavaScript" type="text/javascript" src="http://www.foobar.com/Contents.js"></script></img>
image object might not be rendered by browser when your javascript is being called.
so you can make your function to be called after load of page