function on javascript can't remove - javascript

how to remove ALL DOM in specific id, we know http://jsfiddle.net can test javascript for all condition.
directory file:
\root
\root\index.php
\root\load.php
index.php have script tag id='index' and this index.php using .load() (jQuery) for load.php, in load.php have script tag id='load',
i try use this method (in load.php for clean DOM from index.php):
$(document).ready(function(){
$("#index").remove();
});
but this not remove DOM Function, why??
EDIT :
This trouble is DOM cant be remove
i needed is delete a < script id='index' > and DOM Function (ALL FROM THIS TAG) if i loaded "load.php"

You can't use multiple elements with same id if you want to do so you need to use classes instead:
$(document).ready(function(){
$(".index").remove();
});
UPDATE
if what you want to hide your script when you load another file you could do so by surrounding your script between a div to hide for example:
<div class="divtohide">
<script>
$(document).ready(function(){
$("button").click(function(){
$(".test").load("load.php");
});
});
</script>
</div>
and in your load.php you could create a script to remove the .divtohide div:
<script>
$(document).ready(function(){
$(".divtohide").remove();
});
</script>

Your JavaScript will be run at .load(). So, we need to remove the string before loading the content into the webpage. I decided to use $.get, which will fetch the information as text. Then I run the data through a regex that will remove script#index. From there, I then append it to the page (for testing). If you notice there is no console.log's despite it being in the source of removeIndex.html, that's because we have successfully removed the JavaScript at script#index.
$.get("http://neil.computer/stack/removeIndex.html", function (data) {
data = data.replace(/<script.+?id=["']index["'](.|[\r\n])*?<\/script>/gi,"");
$("#container").html(data);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>
removeIndex.html
This file has some sample input:
<div>
Testing stuff
</div>
<script id="index">
console.log("ignore me");
</script>
<div>
Testing more stuff
</div>

Related

js code is not working in an external file, but works file when placed in the same html page

I have this code in the footer of my html page
<script type="text/javascript">
// using jQuery
$('video,audio').mediaelementplayer();
</script>
the above code is adding video player on the html page.
Now I have created a separate js file in which I have already have some line of code which is creating owl sliders, tooltips, number counters etc.
When I add the above code into that separate js file it does not work, instead when I keep it in the footer of the html page it works fine.
Try placing your code within $(function(){ ... }. This will execute when the DOM is loaded (currently your code is being executed before jQuery is loaded, if you check the JavaScript console, you will see an error something like $ is not defined)
$(function(){
$('video,audio').mediaelementplayer();
});
or
$( document ).ready(function() {
$('video,audio').mediaelementplayer();
});
You can read about what that is doing here. $(function() is the same as $( document ).ready()
your html(basically) should look like this:
<html>
<head>
</head>
<body>
<!-- html code here -->
<!-- add jquery lib -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- your script -->
<script src="you/file/path.js"></script>
</body>
</html>
and your jquery file:
jQuery(function($) {
// your functions here
$('video,audio').mediaelementplayer();
});
Do you have a proper link to the separate js file in your page, generally at the bottom of the body? It should look something like this:
<script type="text/javascript" src="/joyride_odoo_models/static/js/scripts.js"/>
If you've done that properly, have you tried clearing your browser cache? You may need to do that to detect new javascript files.
How do you call your external js file ?
You must add your references js before your external js file.
you must add your function on document.ready.
You may wait until jQuery is full loaded or ready.
Ex.
$(document).ready(function($) {
// Your code goes here
$('video,audio').mediaelementplayer();
});
This code goes in external js file, then you need to include the file in the HTML
<script type="text/javascript" src="path/to/your/js/file"></script>

get link post use script 'data:post.url' blogger not work

I want to show URLs on my blog with javascript or jQuery, but it did not work.
My code:
$('.elementDIV').html("<a href='data:post.url'>Link</a>")
How to change it to work?
Try to wrap your code with ready function:
$(document).ready(function() {
$('.elementDIV').html("<a href='data:post.url'>Link</a>");
});
Well as your script is in the head and the <div class="elementDIV"> </div> is in the body. when your code runs, the div hasn't loaded yet and doesn't exist. put your script somewhere after the div. the best place would be before closing the body tag:
<script type="text/javascript">
$('.elementDIV').html("<a href='data:post.url'>Link</a>")
</script>
</body>

Using separated .js javascript file to print to document

JS:
document.getElementById("terminal_text").innerHTML = "hello";
HTML:
<p id="terminal_text"></p>
<script type="text/javascript" src="js1.js"></script>
1st line inside js file.
2nd line and 3rd line(inside head) in html file.
I'm trying to use a javascript file to print to a paragraph tag using the ID and it's not printing. Any ideas? Thank you ! :)
Put the script tag after your element in the body:
<body>
.. stuff
<p id="terminal_text"></p>
<script type="text/javascript" src="js1.js"></script>
.. more stuff
</body>
You must place the <script> tag after the <p> tag, otherwise you <p> tag does not exist when your javascript code runs.
If you don't want to do this you can execute your code on the load event when your page is fully loaded:
window.addEventListener('load', function () {
document.getElementById("terminal_text").innerHTML = "hello";
});

add horizontal rule at the end of a and div #ID

I'm trying to add a horizontal rule as the last item in a div container. I tried
<script>
var rule = '<hr />';
$('#content-nav').append(rule);
</script>
I added this code into the header.php section of my website which is added onto multiple php files using php include. But jQuery files are also added and work fine for other jQuery plugins that have been implemented.
I'm never sure where in my html js is supposed to go. Am I putting this in the wrong place? Or is there something wrong with the code?
As long as your script comes after the jQuery script AND after the DOM is ready (or after the element is declared, but on DOM ready is preferable) your code will work:
<script src="pathToJQuery.js" />
<script>
$(function() {
$('#content-nav').append('<hr />');
});
</script>
...
<div id="content-nav">
...
</div>
NB in the above the $(function() { ... }); is shorthand for $(document).ready(function() {...});

Run javascript after page load

setup_account ui-mobile-viewport ui-overlay-c
When a page i make loads like this:
var location = location.href+"&rndm="+2*Math.random()+" #updatecomment0>*"
$("#updatecomment0").load(location, function(){});
I have multiple scripts running on the updatecomment0 div:
<div id="updatecomment0">
<div id="javascript1">hi</div>
<div style="float:right;" class="javascript2">delete</div>
</div>
I don't know how to make this other JavaScripts run after page load.
Can someone please tell me how to with this.
Thank you
Use $(document).ready().
Use jQuery, you can do this very easily.
jQuery(document).ready(function(){
alert('Your DOM is ready.Now below this u can run all ur javascript');
});
Here is a sample layout for you
<script type="text/javascript">
$(document).ready(function(){
/// here you can put all the code that you want to run after page load
function Javascript1(){
//code here
}
function Javascript2(){
// code here
}
$("#btnOK").live('click',function(){
// some codes here
Javascript1();
Javascript2();
});
});
</script>
<div id="MyDiv">
<input type="button" id="btnOK" value="OK"/>
</div>
write code inside ready
jQuery(document).ready(function(){
// write here
});
suggestion : use live or bind
Unless you need javascript to do something before the page is loaded, add your scripts to the bottom om the html document, just before the body end tag.
The page will load faster, and you can do whatever you need to, right in the js file, without the document ready functions.
If the scripts is the last to load, the DOM is already guaranteed to be "ready".
$(window).load(function() {
// code here
});
$(document).ready() is all you needed.
You can make JavaScript wait for a specified time using the setTimeout method:
.setTimeout("name_of_function()",time_in_millis);
I hope this can help you too, I had a similar issue and I fixed it by calling the following just after loading the content in the page (like after an AJAX request for a page to be shown inside a div):
(function($) {
$(document).ready(function() {
// your pretty function call, or generic code
});
}(jQuery));
Remember to not call this in the document you load, but in the function that load it, after it as been loaded.
Using vanilla Javascript, this can done thusly:
<html>
<head>
<script type="text/javascript">
// other javascript here
function onAfterLoad() { /*...*/ }
// other javascript here
</script>
</head>
<body>
<!-- HTML content here -->
<!-- onAfterLoad event handling -->
<div style="display:none;"><iframe onload="onAfterLoad();"></iframe></div>
</body>
</html>

Categories