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>
Related
I have an HTML page with a typical structure:
<html>
<head>
<script src="..." ></script>
<style>...</style>
</head>
<body>
content
</body>
<script>
var success_callback = function(data) {
// REPLACE PAGE CONTENT & STRUCTURE WITH "data"
}
ajax(url, params, success_callback);
</script>
</html>
Do you think it is possible ? I've already tried to give the html tag an id and doing $(id).replace(data); with no success.
Don't ask me why, but that is what I need (I'm working with a special "mashup builder" site... it is a long story).
EDIT : I forgot to say that scripts in the received content have to be executed, even external scripts included using <script src="...">.
The simplest way is to set the new HTML content using:
document.open();
document.write(newContent);
document.close();
try this with jQuery:
$('body').load( url,[data],[callback] );
Read more at docs.jquery.com / Ajax / load
Here's how to do it in Prototype: $(id).update(data)
And jQuery: $('#id').replaceWith(data)
But document.getElementById(id).innerHTML=data should work too.
EDIT: Prototype and jQuery automatically evaluate scripts for you.
You could try doing
document.getElementById(id).innerHTML = ajax_response
the simplest way is
$("body").html(data);
Can't you just try to replace the body content with the document.body handler?
if your page is this:
<html>
<body>
blablabla
<script type="text/javascript">
document.body.innerHTML="hi!";
</script>
</body>
</html>
Just use the document.body to replace the body.
This works for me. All the content of the BODY tag is replaced by the innerHTML you specify.
If you need to even change the html tag and all childs you should check out which tags of the 'document.' are capable of doing so.
An example with javascript scripting inside it:
<html>
<body>
blablabla
<script type="text/javascript">
var changeme = "<button onClick=\"document.bgColor = \'#000000\'\">click</button>";
document.body.innerHTML=changeme;
</script>
</body>
This way you can do javascript scripting inside the new content. Don't forget to escape all double and single quotes though, or it won't work. escaping in javascript can be done by traversing your code and putting a backslash in front of all singe and double quotes.
Bare in mind that server side scripting like php doesn't work this way. Since PHP is server-side scripting it has to be processed before a page is loaded. Javascript is a language which works on client-side and thus can not activate the re-processing of php code.
I'm assuming you are using jQuery or something similar. If you are using jQuery, then the following should work:
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
</head>
<body>
content
</body>
<script type="text/javascript">
$("body").load(url);
</script>
</html>
How to get two scripts src from iframe using jquery or javascript
<div id="mytesting">
<iframe src="index.html" id="testing" >
<html>
<head>
<script src="http://google.com/javascript.js"></script>
<!-- i want to get below src the src will change every time -->
<script src="http://testing.com"></script>
<!-- i want to get above src the src will change every time -->
</head>
<body>
</body>
</html>
</iframe>
</div>
In this I want to get second src using jquery or javascript.
There's different ways you can select the src attribute in your code, I'd recommend you first give it an id like this:
<script id="myscript" src="http://testing.com/javascript.js"></script>
You can then select that element by its id using $("#myscript"). The code for getting the src attribute is
var source = $("#myscript").attr('src');
If you don't want to add an id attribute, you can use a different selector, for example, you can select the second script tag in the head like this: $("head script:nth-child(2)"). Be careful though, because if someone adds another script element in the head above this element, this will no longer work.
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' />");
});
});
I have this working code:
<html>
<head>
<title>Bandom</title>
<script src="jquery-latest.js"></script>
<link href="bandom.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="container">
<textarea maxlength="50" id="field1"></textarea>
<div id="field2"></div>
<script src="bandom.js" type="text/javascript"></script>
</div>
</body>
</html>
But when I call my .js file in the beginning in the head tag, javascript is not working. Why?
All my javascript do, is counting symbols.
$('#field1').keyup(function () {
var left = 50 - $(this).val().length;
$('#field2').text('Characters left: ' + left);
});
I had like plenty of projects, in some the position of javascript doesn't matter, but in some it does. Can anyone explain this to me.
But when I call my .js file in the beginning in the head tag, javascript is not working. Why?
The code within a script tag is run immediately when that tag is encountered in the markup (unless you use the defer or async attributes on the script tag.)
So if the script tag is in the head and you're trying to make use of elements defined later in the body, they don't exist when the code runs. In your case, the code:
$("#field1").keyup(function() { /*...*/});
...doesn't find any elements, and so doesn't hook up any handlers.
When the script tag is below the element in the markup (as in your quoted code), the element exists and so it can be found and used.
Best practice is to put your script tags at the bottom of the body, just before the closing </body> element. If you can't do that for some reason, second choice is to use jQuery's ready function.
Change to:
$(document).ready(function() {
$('#field1').keyup(function () {
var left = 50 - $(this).val().length;
$('#field2').text('Characters left: ' + left);
});
}
I have a script tag like
<div id='CommentBox'></div>
<script src="http://www.mywebsite.com/widget.js" type="text/javascript" />
This javascript creates a comment box. (like facebook comment box)
But when users copy/paste same exact script tag more than once Chrome and IE9 does not request 2nd, 3rd file again, because it is cached. But actually people want to use comment box more than once in the same page. How can I break browser cache and force it to download as many as people pasted in their blog?
You're doing it wrong.
If you want two or more comment boxes just call the code twice. A script include is not like a function call.
Instead of Code that you write use this code:
Main HTML File:
<html>
<head>
<script src="http://www.mywebsite.com/widget.js" type="text/javascript" />
</head>
<body>
<div id="CommentBox"></div>
<script type="text/javascript">
Func1();
</script>
</body>
</html>
widget.js File:
function FUNC1(){
alert("Hello");
}