I have a problem with my jQuery. So, I want to remove a script who is inside a <div>.
My html is :
<div id="right-bloc">
<div class="right-bloc-pub-1">
<script type="text/javascript" src="http://firstScript.com"></script>
</div>
<div class="right-bloc-pub-2">
<script type="text/javascript" src="http://secondScript.com"></script>
</div>
</div>
My jQuery :
var stringOfHtml = '<script type="text/javascript" src="http://firstScript.com"></script>';
var html = $(stringOfHtml);
html.find('script').remove();
I want to remove the script witch contains http://firsttScript.com, but not working. It's possible to remove this script and add after? Because I need to refresh this script
You can specify it as the following code:
html.find('script[src="http://firstScript.com"]').remove();
Assuming the <script> tags are actually in your html DOM and you have jQuery reference included.
You can use .filter() to get the script with src as 'http://firstScript.com' and the .remove().
$('html').find('script').filter(function(){
return $(this).attr('src') === 'http://firstScript.com'
}).remove();
Also,
var stringOfHtml = '<script type="text/javascript" src="http://firstScript.com"></script>';
var html = $(stringOfHtml);
This is Not allowed and would throw error Unexpected Token Illegal
Try This:
$(document).ready(function(){
$('.right-bloc-pub-1').find('script[src="http://firstScript.com"]').remove();
});
OR
$(document).ready(function(){
$('.right-bloc-pub-1').find('script').attr('src', 'http://firstScript.com').remove();
});
The only need changes
var html = $(stringOfHtml);
html.remove();
To select and remove your first script you can do this way : $('script[src="http://firstScript.com"]').remove()
Just know that this will remove the script from your DOM but not the library loaded within this script. For example if your first script load jQuery, the $ variable will still contains jQuery. To remove completely jQuery you can add $ = undefined; jQuery = undefined;
$(document).ready(function(){
$('.right-bloc-pub-1').html().remove();
});
try this
You need to delete events related with that script.
So you must look for events that belong to that script.
The $._data(document,'events') is best choice to start with.
Related
This is a question from a noob in javascript. I tried to find something similar the last two days but I didn't find. I try to pass an html image element to an external javascript file which I include to the rest html code. The javascript fade in and fade out an image. Because I want to use different images everytime, thus I want to have a function in an external javascript file.
What I did so far:
PHP and HTML:
<?php
if ($success){
echo"<link rel='stylesheet' href='js/jquery-ui-1.11.4-smoothness.css'>
<script src='js/jquery-1.11.3.js'></script>
<script src='js/jquery-ui-1.11.4.js'></script>
<img id='tick' src='tick.png'>
<script type='text/javascript' src='js/success_failure_signs.js'>
success_failure(tick);
</script>";
}?>
Javascript file has this code:
function success_failure(tick){
var x = tick;
x.fadeIn();
x.fadeOut(1000);
}
The browser's console doesn't give any error.
It seems that the function success_failure doesn't get the image.
What is wrong on this code and how can I fix it?
Thank you in advance!
You haven't defined tick when you make your function call. Try this...
<script type="text/javascript" src="js/success_failure_signs.js">
</script>
<script type="text/javascript">
var tick = $("#tick");
success_failure(tick);
</script>
EDIT: I've also separated the inclusion of the script and your code to call it into two separate script tags.
maybe passing the image to the script is the wrong way of thinking here.
Most of the time with Javascript for web pages the JS gets the image from the HTML site itself.
You are already including jQuery so look into how to get an element from the page with jQuery.
is possbile to run code that previosly were of an ignored content type. Example:
<script type="jquery">alert('WORKING!')</script>
Of course this tag will be ignored and not i would like to enable it. I tried with this:
$(document).ready(function() {
$('script[type=jquery]').attr('type','text/javascript');
});
But nothing happens :/
Thanks for help!
Yes you can do it, but your only option is recreate new script tag and remove existing:
$(document).ready(function() {
$('script[type=jquery]').each(function(){
$(this).after(this.outerHTML.replace('jquery','text/javascript')).remove();
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="jquery">alert('WORKING!')</script>
I am trying to update the DOM with some HTML and scripts that use jQuery. The section of the DOM that is being updated is BEFORE the jQuery code is called (within the DOM), but since the jQuery is what places this code the code is placed after the jQuery is called.
Can this work? I cannot get it to right now.
Here's my HTML:
<div id="readThisData">
Some data
</div>
<div id="addScript">
No script yet
</div>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script>
$( document ).ready(function() {
$('#addScript').html(console.log($('#readThisData').html()));
}
</script>
First of all, console.log() display things on the console, it does not run code.
Second, jQuery has a very nice method to run scripts more info here : http://api.jquery.com/jquery.getscript/
It's just because console.log return undefined, try this:
$('#addScript').html($('#readThisData').html());
Here's what I'm trying to do;
I have this HTML code:
<div id="background-color-random">
DIV CONTENT
</div>
And this javascript:
$(document).ready(function() {
var colors = ["#FFA347", "#FF5050", "#FF66FF", "#6699FF", "#00FF99"],
selectedColor = colors[Math.floor(Math.random()*colors.length)]
header = $("div#background-color-random");
header.css("background-color", selectedColor);
});
I want to impliment this on an HTML page. I know that you can load up a *.js file by using the script tags with src="..". But that doesn't seem to work.
The javascript creates a random color and then applies that to the background of a given 'div' in the HTML.
Now, I'm not good with javascript, so please be patient with me and simple answers are needed :)
I need to be able to get the javascript to load when requested from the HTML and then apply itself to the div with id="..".
You have a syntax error (missing a comma):
selectedColor = colors[Math.floor(Math.random()*colors.length)]
header = $("div#background-color-random");
Should be
selectedColor = colors[Math.floor(Math.random()*colors.length)],
header = $("div#background-color-random");
You are using jQuery, not pure javascript. That's a good thing...
but you also must add the jQuery library in your head tags, like this:
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
You also need to put semi-colons (or commas, as RobM has corrected me, if between var assignments) at the end of each instruction. See line 3 in your code example.
If you want your js/jQuery code in a separate file, you can load the script code like this (again, usually done in the <head> tags):
<script src="filename.js" type="text/javascript"></script>
Or, you can include the js/jQ in the <head> tags of your document, like this:
<script type="text/javascript">
$(document).ready(function() {
var colors = ["#FFA347", "#FF5050", "#FF66FF", "#6699FF", "#00FF99"],
selectedColor = colors[Math.floor(Math.random()*colors.length)],
header = $("div#background-color-random");
header.css("background-color", selectedColor);
});
</script>
If including the script as an external file, you leave out the <script></script> wrapper from that file.
I have some javascript which will create some sort of widget on a page. I will be giving this snippet to clients so I want them to have to do very little.
The most obvious solution which I have work right now looks something like this:
<div id="divContent"></div>
<script type="text/javascript">
MakeWidget('divContent');
</script>
Make widget basically looks for the divContent div and fill it with my widget's html.
Is there a better way to do this?
Can you replace a Script Tag with a Div using Javascript in that Script Tag?
I would really like it if I could reduce the code down to only the MakeWidget function and it would replace itself and the script tag with the html the function generates.
Edit - I essentially want to generate HTML exactly where the MakeWidget function is called on the page.
Can you replace a Script Tag with a Div using Javascript in that Script Tag?
Yes. When the <script> element is reached, assuming it is not a defer or async script, it will be the last script element in the page so far. So you can say, either inline or in an external script:
<script type="text/javascript">
(function() {
var scripts= document.getElementsByTagName('script');
var script= scripts[scripts.length-1];
var div= document.createElement('div');
div.innerHTML= 'Whatever content is going to be inserted';
script.parentNode.insertBefore(div, script);
})();
</script>
You have to have MakeWidget defined somewhere, right? Presumably this is going to be in an external script. Why not just have the external script source just attach itself to the divContent using the window.onload method?
This would result in this code on your client's page:
<script src="http://foo.com/makewidget.js"></script>
Your makewidget.js code could then look like this:
window.onload = function() { MakeWidget('divContent') }
There may some issues with other scripts loading and probably some cross-browser compatibility issues but that should get you pointed in the right direction.
So you want to have a script element which replaces itself with div.
Your initial code is like this:
<div id="divContent"></div>
<script>
MakeWidget('divContent');
</script>
You can rewrite it like this (I am using JQuery):
<script id="scriptContent">
$('#scriptContent').after('<div id="divContent"></div>');
MakeWidget('divContent');
$('#scriptContent').remove();
</script>
I have not tried it though!
I would think it would be possible to do it as follows:
<div id="divWidgets">
<script type="text/javascript">
MakeWidgets("divWidgets");
</script>
</div>
The end result should be (if I understand your description correctly) that MakeWidgets will replace the contents of the DIV, which, in this case, is the script itself.