jQuery conflict when removing div after page load - javascript

I'm trying to remove a div from the page (preferably prevent it from loading at all)
but for now I'm settling on removing it after the page loads.
When I try the following lines of code in jsFiddle, the #content div gets removed, as expected.
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$('#content').remove();
});//]]>
</script>
However, I have also tried implementing it on an actual website, but in that case, the #content div isn't removed.
Any suggestions as to what might be wrong?

If you're sharing jQuery with another library that uses the dollar for its operation you need to guard against it like this, using an anonymous wrapper:
(function($) {
$(window).on('load', function(){
$('#content').remove();
});
}(jQuery));
Note that instead of .load() I'm using .on('load', fn).
Instead of on page load you could also bind your code on DOM ready; jQuery passes itself as the first argument to the inner function:
jQuery(function($) {
$('#content').remove();
});

Your $ variable does not point to jQuery for some reason.
<script type='text/javascript'>
window.$ = jQuery;
$(window).load(function()
{
$('#content').remove();
});
</script>

Try with this
<script type='text/javascript'>
$(document).ready(function(){
$('#content').remove();
});
</script>
or
$(function()
{
$('#content').remove();
});

It's because you have a javascript error when you call $(window).load().
Uncaught TypeError: Object [object global] has no method 'load'
Also, you should better use document.ready instead as the content will be removed faster (doesn't need to wait for all the images to load).
//shorthand for $(document).ready()
$(function(){
$('#content').remove();
});

TypeError: $(...).load is not a function
It is giving error above instead of below one as load is deprecated in new version of Jquery
$(window).load(function(){
});
use this code
$(function(){
// your code here
})

use this:
<script type="text/javascript">
var node = document.getElementById('content');
if(node.parentNode)
{
node.parentNode.removeChild(node);
}
</script>
Hope this help.

Case of jquery conflict. You have mootools framework too on the page.
Also I did a 'view source' of the page and I found out this line
$j = jQuery.noConflict(); //line 132
So try this
$j('#content').remove();
Or
jQuery('#content').remove();

You are using jQuery testing with onload,
so you have to add onload syntax in jquery, on your site the statement was not called onload, that why its not working
I have updated fiddle
http://jsfiddle.net/MarmeeK/FRYsJ/3/
The JS code under <script> tag, without adding in onload in page,
<script type="text/javascript">
$(document).ready(function(){$('#content').remove();});
</script>
this should work :)

Related

$(window).load(function() fails to execute after completely loaded document

I have failed to find the answer in the following:
I have an html document that loads a couple of other htmls.
This is done perfectly.
However, in on one of the included htmls, the "navmenu.html", I would like, after everything is comlepetly loaded, to execute a script found in load() to modify "menu1" element's class, which is in the included "navmenu.html".
After the ready() function, the load() function is executed before the "navmenu.html" is really & completely included in the document, since I get the error message that the element "menu1" is not found.
If I pause the action by an alert() at the beginning of load() - then the menu1 element is found - since this delay caused by the alert() gives time to the ready() function to complete.
So, is there a way to solve this?
Thank you in advance.
<body>
<div id="navmenu"></div>
<div id="carousel"></div>
</body>
<script language="javascript" type="text/javascript">
jQuery( document ).ready(function( $ ) {
$('#navmenu').load('navmenu.html');
$('#carousel').load('carousel.html');
});
$(window).load(function() {
var element = document.getElementById("menu1");
element.classList.add("active");
});
</script>
jQuery.load() has the following signature (url,data,callbackFunction).
You could try the followind :
jQuery( document ).ready(function( $ ) {
$('#navmenu').load('navmenu.html',[],function(){
$('#carousel').load('carousel.html',[],function(){
var element = document.getElementById("menu1");
element.classList.add("active");
});
});
});
Thank you so much Radu Toader for the reply.
It worked !!!
(I am not sure if this is the right way to answer, since it's my first question to the group.)
I also tried the following, since the element was in "navmenu.html" and had a separate line for the carousel.
$('#navmenu').load('navmenu.html',[],function(){
var element = document.getElementById("menu1");
element.classList.add("active");
});
$('#carousel').load('carousel.html');
I also tried your answer where load.carousel was called by the load.navmenu and it also worked.
Do you suggest that I should use your "more complex" solution instead of the separated line for the carousel?
Thanks again.
Dimitrios

jquery ready event not working in html

I am new to javascript and I have no idea why this code is not working in my html document. I am trying to get an alert after my document is ready. I've checked and it seems syntactically correct to me. the script is at the top of my html document. Any help is appreciated!
It works if it is invoked directly like so:
<script language="javascript" type="text/javascript">
$(function(){
alert("My First Jquery Test");
});
</script>
but doesn't work when trying to invoke after document is ready:
<script language="javascript" type="text/javascript">
function test1(){
alert("My First Jquery Test");
}
$(document).ready(function(){
test1();
});
</script>
Bracket / parentheses problem:
Last line should read });
If you pop open your dev tools (F12 most browsers) you will probably see a parse error in the console.
Change
$(document).ready(function(){
test1();
)};
to
$(document).ready(function(){
test1();
});
You need to make sure that jQuery is loaded. Otherwise,
$(document).ready(function(){
test1();
});
will not work. If you add
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>‌
as the first line of your code, jQuery will load from Google's hosted library and your code should work properly.

Attach script to jQuery ready method before jQuery is loaded

For example, bootstrap put the jQuery at the end of the html, e.g. http://twitter.github.com/bootstrap/examples/starter-template.html
What if, you want to insert a code block before the loading of jQuery script itself, e.g.
<div id="test1"></div>
<div id="test2"></div>
<script>
$(document).ready(function() {
$('#test1').html('test1'); // not work, any workaround? the code must be put before..
});
</script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function() {
$('#test2').html('test2'); // work
});
</script>
Test: http://jsfiddle.net/e5HKZ/
I want both test1 & test2 also displayed.
Any idea?
If you really have to put jQuery code before the line that loads jQuery itself, assign the function to document.ready.
window.document.ready = function() {
$('#test1').html('test1');
};
When jQuery has been loaded, it reads the variable and executes the function at DOM ready.
Note that this is most likely undocumented behavior and might not work reliably or in future jQuery versions.
Demo: http://jsfiddle.net/e5HKZ/1/

Inserting javascript in to html file

How can I run this script, tried to run it in html file, but it doesn't seem to work..
I want this code to be in single html file, is it possible? or do I need different files?
http://jsfiddle.net/ambiguous/jcnMa/1/
<script type="text/javascript">
$('.question, .answer')
.css("display", "none");
$('.section')
.click(function ()
{
var $others = $('.question:visible')
.not(this);
$others.next('.answer')
.hide();
$others.slideToggle(500);
$(this)
.next('.question')
.slideToggle(500);
});
$('.question')
.click(function ()
{
$(this)
.next('.answer')
.slideToggle(500);
});​
</script>
First make sure you're including the jQuery library:
<script src="path/to/jquery.min.js"></script>
Make sure you're not including the jQuery within those tags, so you've got:
<script src="path/to/jquery.min.js"></script>
<script>
/* Your jQuery here */
</script>
And then ensure you're using a $(document).ready(), or $(window).load(), handler:
<script src="path/to/jquery.min.js"></script>
<script>
$(document).ready(
function(){
/* Your jQuery here */
});
</script>
The requirement for the $(document).ready() (or $(window).load()) is to ensure that the DOM is constructed, and the elements to which you want to bind events are present. Without those handlers the browser will try to bind events as soon as it encounters your script, without waiting for the elements to exist or be created, which results in non-functioning event-binding.
put this code before the body close tag
Your Code
</body>
I would go this way:
<head>
...
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.question, .answer').css("display", "none");
$('.section').click(function ()
{
var $others = $('.question:visible').not(this);
$others.next('.answer').hide();
$others.slideToggle(500);
$(this).next('.question').slideToggle(500);
});
$('.question').click(function ()
{
$(this).next('.answer').slideToggle(500);
});​
});
</script>
...
</head>
First you need to ensure jquery lib is loaded, then you might notice that your code is referring to object in DOM, so you can access them only when the page is loaded (or after they are entered in the body code). I prefer to store my js code in the head section whenever it's possible.

jQuery not loading at all

I'm trying out jQuery for the first time, and I'm not sure how to make it work properly. I've included the following code near my opening <head> tag:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
Followed by the following jQuery code:
<script>
$('.darkmask > img').hover(function(){
$(this).parent().toggleClass('darkmask-hover');
})​
</script>
Unfortunately, this code doesn't work when I try it in a browser, or in JSFiddle. However, when I set JSFiddle's framework to load jQuery itself, rather than loading jQuery through my own code, the animation works properly.
Am I loading jQuery wrong? If so, what's the right way?
PRoblem is, your code in JSFiddle is executed on the loading on the page. In your code instead, the execution happens when the HTML elements are not yet loaded because it's in the HEAD, so the selectors like .darkmask actually refer to... nothing.
The solution is to use:
$(document).ready(
function()
{
... your code here
}
To ensure that it is executed when the page is loaded and ready, all the HTML elements are there and therefore JQuery selectors can operate on something.
Are there any HTML elements when the code is executed?
Try:
$(function () { // this function executes when the page loads
alert(x);
// put your code here
});
Wrap your entire code in the following:
$(document).ready(function() {
//ALL CODE GOES HERE
});
Wrap your code in:
$(function() {
.... Your code here ...
});
It will mean your code is executed after the DOM tree is loaded.
You do need to wrap your jQuery code within the ready function, like this:
$(document).ready(function(){
// put your code here.
});
Also make sure your script tags have type="text/javascript" as an attribute otherwise it won't get run as javascript.

Categories