Script loading before jQuery - javascript

I have a script in my custom meta-boxes and wish to use jQuery, the problem is that the admin page loads my script before it loads jQuery, rendering my script useless, when I inspect the page it looks like this:
jQuery(document).ready(function($) {
// use $
});
<!DOCTYPE html>
and then the rest of the document loads, with header and all that sweet jazz. Is there anyway I can get my <script>jquery here</script> load AFTER my jQuery gets loaded?

you have to insert your script into this way:
function load_custom_scripts()
{
wp_enqueue_script('custom_script', 'COMPLETE_PATH_TO_YOUR_SCRIPT');
}
do_action ( 'admin_enqueue_scripts', 'load_custom_scripts' );
I suggest you to put all of your custom scripts in a separate JS file and then load to the WP.

Right, you cannot use jQuery until it has loaded..
But you can use plain JS:
window.addEventListener('load', function() {
// $ should be available
}, false);

Related

JQuery: Change image on page based on class in body

I have a wordpress page where I want to display a featured image on the header of the homepage, but no other pages. I set up a script to read whether the body tag contains the "home" class and display an image based on that. The code looks like this:
<script>
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
</script>
What's wrong with this script?
Try to wrap your code into function fired on DOM ready:
<script>
$(function() {
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
});
</script>
More info
jQuery needs to know when to start the function. Start it after the document is ready.
$(document).ready(function(){
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
});
Did you include jQuery library in your header section? Also some times $ symbol may conflict in wordpress, write full jQuery term when initialize jQuery this way:
jQuery(document).ready(function(){
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
});

Troubleshoot jquery error with dropdown menu

There is some sort of jquery conflict that I can't get my head around. I have a script that's working by itself here:
http://www.pitestiretailpark.ro/working.html
When the same script is inserted into a Joomla page (along with html/css code), the dropdown menus don't work.
http://www.pitestiretailpark.ro/test/
I am not a programmer, I know my HTML but have little knowledge of jquery. The standalone script has been copied from another page, stripped bare (but working!) and when I try to insert into Joomla, it stops working.
there is another lib using the $ sign as a function.Use the jQuery.noConflict() method like this;
jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
// your code
});
replace $ in your scripts with jQuery, also call it on document ready :
jQuery(document).ready(function() {
jQuery('.div_btn_menu').hover(
function() {
jQuery(this).children('.div_sous-menu').css('top',$(this).children('.btn_menu').height()+'px')
jQuery(this).css('z-index',10000000)
jQuery(this).children('.div_sous-menu').stop(true,true).fadeIn(200)
},
function() {
jQuery(this).css('z-index',1)
jQuery(this).children('.div_sous-menu').stop(true,true).fadeOut(200)
}
);
})

Run javascript from external location after jQuery(document).ready()

An external javascript loads like this in a div in the page content:
<script type="text/javascript" src="http://example.com/example.js"></script>
The external script prints a sign up form for newsletter, like this:
document.write("<body>\n<form method=\"post\" action ETC....");
The problem is that the external server is slow and this third party script loads before jQuery(document).ready(), which deleays slideshows facebook plugins etc.
How can I make this script to render at it´s current position in the page content after the entire page has loaded?
(I have tried lot´s of suggested sollutions in different threads, but none worked for me...)
Use $(window).load it will be triggered after all the files/assets being downloaded.
$(window).load(function () {
// run code
});
What you need to do is "inject" the script one the page has loaded:
$(function () {
$('body').append('<script src="example.com/script.js"></script>');
});
This will execute on document ready but it's not a problem since the script will be loaded asynchronously.
<body onload="RunScript();">
function RunScript()
{
document.write("<body>\n<form method=\"post\" action ETC....");
}
or
document.onload=function ...

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.

jQuery not working in external JavaScript

I am new to jQuery and am stuck at some strange issue. I am using jQuery's change and click methods. They are working fine when used in my HTML file in the <script> tag.
Like:
<script>
$("select,input").change(function ()
{
// My code and some alerts
});
</script>
When I copied the same in external JavaScript code without <script> and imported that in my HTML it was not at all working.
Are there any changes which are needed to use jQuery in external JavaScript code?
PS: Some other non-jQuery functions present in same external JavaScript code are successfully called from HTML.
First off, you don't want a <script> tag in an external JavaScript file, if that's how I'm reading your post.
The trick with jQuery is that your code is set to execute immediately.
You want to wrap your script so that it loads when the document is ready, in something like:
$(document).ready(function(){
$("select,input").change(function ()
{
// My code and some alerts
})
});
And you want to make sure that your file is loaded after jQuery (otherwise the $ global will not be set).
Additions:
Here is what your HTML should look like:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="jscript/myExternalJs.js"></script>
Here is what your JavaScript code should look like (note there is no script tag inside the JavaScript file):
$(document).ready(function(){
$("select,input").change(function ()
{
// My code and some alerts
})
// Other event handlers.
});
As far as your other script... it sort of depends on what you're doing. The most important thing is to not try to hook event listeners up to objects that don't yet exist, which is why we use document.ready.
Did you make sure jquery is defined before your own jquery code?
You should also make sure the DOM is ready when dealing with jquery:
$(document).ready(function() {
$("select,input").change(function() {
// my code and some alerts
});
// more code here if needed, etc.
});

Categories