Optimized my website with WP Rocket and delayed javascript execution with some exclusions. Excluded: /jquery-?0-9.(.min|.slim|.slim.min)?.js and js-(before|after) and my script which has code:
jQuery(document).ready(function() {
console.log('F Loaded');
jQuery('#div_id').bind('click', function() {
jQuery('#desired_element').css('display','block');
console.log('Clicked')
});
});
When I'm loading a website - getting first message in console "F loaded", but after click - action happens only after all rest scripts are loaded. Is there any way to avoid waiting for all other scripts and make that action (style add after click) immediately ? Tried with plain javascript but got same result.
You can use modern way to write click event outside the document ready you will be able to perform click outside document ready.
$(document).ready(function() {
console.log('F Loaded');
});
$(document).on('click', '#div_id', function(event){
jQuery('#desired_element').css('display','block');
console.log('Clicked')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div_id">Click me</div>
<div id="desired_element" style="display:none">TEST CONTENT</div>
<html>
<head><title>test</title></head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="Clickme">Click me</div>
<div id="Contentsection" style="display:none">Test Content content....</div>
<script>
$('#Clickme').on('click', function(event){
$('#Contentsection').show();
console.log('Clicked')
});
</script>
</body>
</html>
Related
ON the display page, I'm loading contents into a container div using ("#mydiv").load("myphpfile.php"); This works fine. My question is, how do I work with elements inside that loaded div?
Here is the code sample:
<div id="contents"></div>
<script type="text/javascript">
$("#contents").load("___server_side.php");
$("#message").click(function(){
console.log('clicked');
});
</script>
"#message" is an element in the loaded div. How do I access it and assign functions to it from the display page?
You can use your code as is, yet I would add a .ready().
<div id="contents"></div>
<script type="text/javascript">
$("#contents").load("___server_side.php");
$("#message").ready(function(){
$(this).click(function(){
console.log('clicked');
});
});
</script>
Another option is to add the event callback once loading is finished.
<div id="contents"></div>
<script type="text/javascript">
$("#contents").load("___server_side.php", function(){
$("#message", this).click(function(){
console.log('clicked');
});
});
</script>
Otherwise I would use the .on() option.
<script type="text/javascript">
$("#contents").on("click", "#message", function(){
console.log('clicked');
});
$("#contents").load("___server_side.php");
</script>
<div id="contents"></div>
See More:
https://api.jquery.com/load/
https://api.jquery.com/on/
My code won't work. It's supposed to alert whenever a user presses a key while focused inside of a textbox element!
$("#yourcode").keyup(function() {
alert("I found Hogwarts.");
});
You need to wait until the DOM is ready before adding the keyup handler. This can be achieved by calling .ready() after using $() to get a DOM reference to the document (i.e. $(document)). Also make sure you load jQuery before you load the script:
JS:
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("#yourcode").keyup(function() {
alert("I found Hogwarts.");
});
});
</script>
HTML:
<textarea id="yourcode"></textarea>
Here is a working example (also available in this jsFiddle):
$(document).ready(function(){
$("#yourcode").keyup(function() {
alert("I found Hogwarts.");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea id="yourcode"></textarea>
For example I have the following HTML named index.html:
<html>
<head>
<style>
#content { float:left; }
#sub { float:right; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="action.js"></script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">
Sub content
</div>
</body>
</html>
And a simple JS file named action.js:
$(document).ready(function(){
$('button.loadSub').click(function(){
$('#sub').load('test.html');
});
$('button.hide').click(function(){
$('#sub').fadeOut('slow');
});
});
As you can see, when I click the button .loadSub the div #sub will be loaded with the new content from test.html:
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
I got two problems here:
Firstly, the .loadSub button did successfully load the the div of id subcontent, but the .hide button did not work.
Secondly, after I had tried inserting
script type="text/javascript" src="action.js"
inside test.html, the hide button worked and faded out its content. But then in turn, I found out that the button loadSub no longer functioned. I couldn't load the subcontent again.
Is there any other way around to just once declare source of js file and make my button.loadSub work whenever I click it? Could anybody please explain the problem and give me a hint to fix it.
You're loading dynamic HTML into your page. This means that at the time you called $('button.hide').click(), the button.hide element did not exist in your page yet, so the click handler could not be attached.
You might want to try doing a delegate attachment instead.
$('#sub').on('click', 'button.hide', function () {
$('#sub').fadeOut('slow');
});
On the first page, put this. You can insert my JQQuery code into your action.js file. On the second page, the one you are loading into your div, put the second Jquery code I added.
On First page:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
#content{float:left;}
#sub{float:right;}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.loadSub').click(function(){
$('#sub').show();
$('#sub').load('test.html');
});
});
});
</script>
</head>
<body>
<h2>Test de</h2>
<div id="content">
Content
<button class="loadSub">Load</button>
</div>
<div id="sub">Sub content</div>
</body>
</html>
On the second page (the page that's loaded into the div, add this:
<script type="text/javascript">
$(document).ready(function(){
$(function(){
$('.hide').unbind("click").click(function(){
$('#sub').fadeOut('slow');
});
});
});
</script>
<h2>This is the sub content</h2>
<button class="hide">Hide</button>
The hide button isn't on the page when you try to bind the event so it is never registered.
Change it to use on like this (assuming version 1.7+)
$(document).on('click', 'button.hide', function(){
$('#sub').fadeOut('slow');
});
or delegate if an older version:
$(document).delegate('button.hide', 'click', function(){
$('#sub').fadeOut('slow');
});
This attaches the event handler at the document level so will work for any new content added to the page.
I am working on a ASP.NET MVC 3 application that is using JQuery. In this application, I have my _Layout.cshtml file and MyView.cshtml. In _Layout.cshtml I have something like the following:
<div id="wrapper" style="background-color:Gray; height:100%;">
<div id="content" style="background-color:Silver;">
#RenderBody()
</div>
<div id="footer" style="background-color:Silver;">
Footer
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
// Do stuff
alert("Root Loaded");
});
</script>
In MyView.cshtml, I have the following:
<div id="contentDiv">
<!-- Page content is here -->
</div>
<script type="text/javascript">
$().ready(function () {
alert("Page Loaded");
});
</script>
At this time, the "Page Loaded" message box appears before the "Root Loaded" message. I kind of understand why this is happening. However, I would like to write a method in MyView.cshtml that gets called after the root document.ready function is called. Am I making sense? Is there a way to do this? If so, how?
Thank you
This should fire after all elements on the page are loaded, so, it should be later, than the ready event.
$(window).load(function () {
alert("Whole page Loaded");
});)
You might want to consider Queuing as suggested in the answer below:
jQuery multiple document ready queue order
I have jquery issue, Kindly see my jquery code:
$(document).ready(function(){
$(".toggle_container").show();
$("h2.trigger").toggle(function(){
$(this).addClass("active");
}, function () {
$(this).removeClass("active");
});
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
});
My .toggle_container is shown always its good, But I want to close it first time, when page load. Can you please provide me any solution?
I dont want to use $(".toggle_container").hide(); function for this problem because when i click on href then .toggle_container should not hide, It should open.
Regards.
You can just add attribute
style="display:none"
to your element .toggle_container.
Then on first call of $(document).ready it will be shown.
The full test example:
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("h2.trigger").click(function(){
$(this).next(".toggle_container").slideToggle("slow,");
});
});
</script>
</head>
<body>
<h2 class="trigger">Toggle</h2>
<div class="toggle_container" style="display:none">Container</div>
</body>
</html>
Note: there`s no $(".toggle_container").show(); on $(document).ready
remove the
$(".toggle_container").show();
from your $(document).ready function.
in html part add style="display:none" for the toggle_container div.
check the #HCK s reply. he is clearly mentioned it..
Once the document gets loaded, a alert box will be prompted "page loaded".
$(document).ready(function(){
alert('page loaded'); // alert to confirm the page is loaded
$('.divClassName').hide(); //enter the class or id of the particular html element which you wish to hide.
});