jQuery "$(document).ready(function () {" equivalent in Javascript [duplicate] - javascript

This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
$(document).ready equivalent without jQuery
I want to wait until an ASP.NET datagrid is resized correctly before showing a popup message. This works great:
$(document).ready(function () { showpopup(); });
But I need to acheive it without jQuery. I've tried many ways:
$(window).bind("load", function() {showpopup();}
$(function() { showPopup();}
but this doesn't work.

My preferred method of doing such things is to start my script with:
var loadScripts = [],
loadScript = function(callback) {loadScripts.push(callback);
Then, the very last thing on the page before </body> is:
<script type="text/javascript">(function() {var x; while(x=loadScripts.shift()) x();})();</script>
Then, whenever there's something I want to defer until the DOM has loaded, I simply enclose it in:
loadScript(function() {
// do stuff here
});

Related

How do I continue executing my .js code after programmatically adding jQuery to the DOM? [duplicate]

This question already has answers here:
How to include jQuery dynamically in any website using pure javascript
(9 answers)
Closed 25 days ago.
How do I continue executing my .js code after programmatically adding jQuery to the DOM?
The 3rd answer in this post shows how to add jquery to the dom but how should you continue executing further code?
For example you can't just add code underneath the self invoked function because jQuery hasn't yet loaded. How do I continue writing my .js code so that it executes?
$(window).on('load', function() {
// jQuery hasn't yet loaded so can't use this yet.
});
Execute the code that requires jQuery in the script's load event listener.
var jQueryScript = document.createElement('script');
jQueryScript.setAttribute('src','https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js');
jQueryScript.addEventListener("load", function() {
$(document).ready(function() {
...
});
});
document.head.appendChild(jQueryScript);

jQuery working in Console but not working in js file [duplicate]

This question already has answers here:
Event binding on dynamically created elements?
(23 answers)
Closed 2 years ago.
I am using the following jQuery code in the search bar of my website. Since I am a beginner, I am unable to relate to other code examples, hence I need help in fixing the code.
jQuery(document).ready(function ($) {
//Open Link in Search Results in New Window
jQuery('div.search_result_item_content').click(function () {
console.log("I am executed");
var menuLink = $('div.col.col-9.search_result_item_content').data('link');
window.open(menuLink, "_blank");
});
});
The code without .ready() seems to work on the console. But not on the index.js file of my website. The same file has many other jQuery functions, which are all working smoothly.
Any idea, what is causing the issue?
You are generating the items dynamically so this will not work. What you can do is what I will do below.
jQuery(document).ready(function ($) {
jQuery(document).on('click','div.search_result_item_content',function () {
console.log("I am executed");
var menuLink = $(this).data('link');
window.open(menuLink, "_blank");
});
That should work for you.

Load images before jQuery function ask for them [duplicate]

This question already has answers here:
Preloading images with jQuery
(20 answers)
Closed 6 years ago.
In my wordpress site i am using a quite simple jQuery piece of code:
jQuery(".first-sq").mouseenter(function(){
jQuery(".first-sq img").attr('srcset', '/wp-content/uploads/2017/01/MachineLearning_hoverx2.png');
})
jQuery(".first-sq").mouseleave(function(){
jQuery(".first-sq img").attr('srcset' , '/wp-content/uploads/2017/01/MachineLearningx2.png');
})
Now the code works but the problem is when mouseenter called it takes some time for the image to load, and you can see it being loaded. or in other words, the image revealed in portions. Is there a way to load all the images the document might use ,when document load, so when in situations like my mouseenter the image will show immediately and wont have to load?
You could achieve this by preload images. Try something like that:
$(document).ready(function () {
$('<img src="/wp-content/uploads/2017/01/MachineLearning_hoverx2.png">');
$('<img src="/wp-content/uploads/2017/01/MachineLearningx2.png">');
});
Copy of this
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
});
}
// Usage:
preload([
'img/img1.jpg'
]);

JS onpage/window load [duplicate]

This question already has answers here:
How to run a function when the page is loaded?
(11 answers)
Closed 6 years ago.
I want to run this script on pageload or after all the elements are loaded.
JavaScript
<script type="text/javascript">
function backgroundload (){
$(".portfolio-background-color")
var color = /#[0-9\A-F]+/.exec($(this).html())[0];
$(this).css('background', color)
}
window.onload = backgroundload;
</script>
i'm new to js please check if my code is okay and is it the correct way to load the js
All Javascript runs on page load. If what you mean is that you want it to run after all the elements in the page have been initialized, there are several ways:
window.onload
document.onload
body.onload
$(document).ready
There are more in-depth explanations of the support for the first three, and the differences between them, here. Documentation for $(document).ready is here.
However, in my experience, the easiest way to ensure that a script runs after all synchronously-loaded content is simply to place the <script> element at the bottom of the <body>.

Run Javascript code on Page Load [duplicate]

This question already has answers here:
Onclick() function on working
(4 answers)
Closed 9 years ago.
I am using the jquery tool bootstrap wizard and there is a function within it to start the wizard that I want to load up automatically when I go to a page.
Here is my code:
$('#open-wizard').click(function (e) {
e.preventDefault();
wizard.show();
});
I need to have this code run whenever I load the page. I know for functions you could just add, not sure how I do this with my code, I tried to put it in a function and didn't work.
window.onload = load();
function load() {
//javascript function here
}
when using window.onload you do not need the perenthesis. change load() to load..
function load() {
//javascript function here
}
window.onload = load;
Yes,and i suggest u put the js import tags at the bottom of the page file.
eg:
<scrpit ...
<script type="text/javascript" src="../js/bootstrap.min.js"></script>
</body>
</html>
document.ready (jQuery)
$(document).ready(function()
{
// executes when HTML-Document is loaded and DOM is ready
alert("(document).ready was called - document is ready!");
});
document.ready will execute right after the HTML document is loaded property, and the DOM is ready
window.load (Built-in JavaScript)
$(window).load(function()
{
// executes when complete page is fully loaded, including all frames, objects and images
alert("(window).load was called - window is loaded!");
});
The window.load however will wait for the page to be fully loaded, this includes inner frames, images etc.
all you need is $(document).ready();
$(document).ready(function () {
wizard.show();
});

Categories