<script type="text/javascript">
$(document).ready(function()
{
$('#loading')
.hide()
.ajaxStart(function() {
$(this).show();
})
.ajaxStop(function() {
$(this).hide();
});
});
Loading....
Can someone tell me where to apply this to an actual ajax call by an example? I'm just confused on the application of this code.
You have to call ajaxStart on document
From Docs
As of jQuery 1.8, the .ajaxStart() method should only be attached to document.
Try this:
$(function(){
var $loading = $('#loading').hide();
$(document).ajaxStart(function() {
$loading.show();
}).ajaxStop(function() {
$loading.hide();
});
});
Related
Why following code written in jquery works great, but when I try to use it with vanilla js then it’s not working.
Here is WP Heartbeat API code - https://github.com/WordPress/WordPress/blob/master/wp-includes/js/heartbeat.js
jQuery(document).ready( function($) {
$(document).on('heartbeat-tick', function() {
console.log('jquery');
});
});
jQuery(document).ready( function($) {
document.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS');
});
});
jQuery(document).ready( function($) {
var event = new Event('heartbeat-tick');
window.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS');
});
window.dispatchEvent(event);
});
Your document event is not firing because you are dispatching the event on the window. Call document.dispatchEvent to dispatch it to the document.
jQuery(document).ready(function($) {
var event = new Event('heartbeat-tick');
$(document).on('heartbeat-tick', function() {
console.log('jquery');
});
document.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS from document');
});
window.addEventListener('heartbeat-tick', function() {
console.log('Heartbeat tick JS from window');
});
console.log('window');
window.dispatchEvent(event);
console.log('document');
document.dispatchEvent(event);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
When I hover my text file appears. When I am not appearing I want it to disappear. How can I do this and what should my code look like?
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>
$(document).ready(function(){
$(".button").hover(function(){ $.ajax({url:"demo_test.txt", success:function(result){ $("#div1").html(result); }}); });
});
</script>
</head>
<body>
<div id="div1"></div>
Hover me
</body>
</html>
According to jQuery documentation, the hover function allows to specify a handler when the mouse enters and when the mouse leaves.
$( selector ).hover( handlerIn, handlerOut )
So you can modify your function according to that.
$(".button").hover(function () {
$.ajax({
url: "demo_test.txt",
success: function (result) {
$("#div1").html(result);
}
});
}, function () {
$("#div1").html("");
});
$(document).ready(function(){
$(".button").hover(function(){
$.ajax({
url:"demo_test.txt",
success:function(result){
$("#div1").html(result);
}
});
})
.on("mouseleave", function(){
$("#div1").hide();
});
});
Try this (fiddle):
$('#text').text("SOME TEXT YOU CAN READ BECAUSE YOU ARE HOVERING").css("opacity", "0")
.mouseover(function () {
$(this).animate({"opacity": "1"}, {duration: 200, queue: false});
}).mouseout(function() {
$(this).animate({"opacity": "0"}, {duration: 200, queue: false});
});
I didn't include loading of the other file, as no demo file was loadable. But this can be solved easily like this:
$.get("demo.txt", function(data) {
// and here all the above, accordingly
});
My proposal also has a nice smoothy animation included, and because it's using opacity, the element is still there after being hidden, so the user interface won't move around.
Use this
$(document).ready(function(){
$(".button").mouseenter(function () {
// run the ajax request and load the file..
});
$('.button').mouseleave(function () {
// run the code here such as $('#div1').hide() or .css('display', 'none');
});
});
This will hide the object once you have an event of mouseleave from the button.
Fiddle for that:
http://jsfiddle.net/afzaal_ahmad_zeeshan/SfVrn/1/
How can I execute this code in HTML on page load?
<script>
window.onload = $(function(){
$("#name1, #name2").val("").attr("disabled",true);
};
</script>
I have tried this code but it does not work.
Better to use the on() handler:
$(window).on('load', function(){
$("#name1, #name2").val("").attr("disabled",true);
});
or document.ready() if you aren't waiting for particular elements to load:
$(document).ready(function(){
$("#name1, #name2").val("").attr("disabled",true);
});
You just have an extra $( that you don't need, and a missing closing }...
window.onload = function() {
$("#name1, #name2").val("").attr("disabled",true);
};
Although that gets your code working, you could probably run this when the DOM is ready (which is quicker than waiting for all the images to load)...
$(function() {
$("#name1, #name2").val("").attr("disabled",true);
});
You can use this when you only want to access your DOM:
$(document).ready(function() { /* code */ });
$(function() { /* code */ }); // shorthand function (is identical)
If you require all other resources (styles, scripts, iframes, images, etc.) to be loaded too (eg. get an image dimensions), you need to use this:
$(window).on('load', function() { /* code */ });
You are mixing up JavaScript's way of doing things with jQuery's way of doing things.
Using windows.onload = ... is how you assign a function to be called after the load event occurs in JavaScript.
Using $(function(){...}) is jQuery syntax for $(document).ready(function(){}) which essentialy is the same thing, jQuery's document ready also triggers after load but unlike unlike windows.onload before images are loaded.
Use one or the other syntax.
Either use JavaScript like this:
window.onload = function(){
$("#name1, #name2").val("").attr("disabled",true);
}
Or one of jQuery's alternatives:
$(function(){
$("#name1, #name2").val("").attr("disabled",true);
})
$(document).ready(function(){
$("#name1, #name2").val("").attr("disabled",true);
})
$(window).ready(function(){
$("#name1, #name2").val("").attr("disabled",true);
})
You should close your function codeblock like this.
<script>
window.onload = $(function(){
$("#name1, #name2").val("").attr("disabled",true);
});
</script>
Use This, Remove window.OnLoad
$(function(){
$("#name1, #name2").val("").attr("disabled",true);
});
SEE DEMO
http://jsfiddle.net/qgPzG/
You could use this syntax:
$(function(){
$("#name1, #name2").val("").attr("disabled",true);
});
Try this :
window.onload = function () {
// do stuff here
$("#name1, #name2").val("").attr("disabled",true);
}
You forget to close " }); " :
<script>
window.onload = $(function(){
$("#name1, #name2").val("").attr("disabled",true);
});
</script>
Status: WORKING
Runs smoothly - click works
Jquery
$("document").ready(function(){
$("#test").click(function(){
alert("abc");
});
});
CSS
.blue {
background-color:blue;
}
Tag Body
<body>
<div class="blue" id="test">Testing code</div>
</body>
Status: NOT WORKING
Succeeds to add the file and div test within it but click doesn't work
Jquery
$("document").ready(function(){
$.get("new.php", {
// this math avoids IE from crashing
nbRandom: Math.random()
},
function(data){
$("body").html(data);
});
$("#test").click(function(){
alert("abc");
});
});
CSS
.blue {
background-color:blue;
}
Tag Body
<body>
</body>
Does anybody know how to do that?
The method get is asynchronous which means that the stream will continue while the ajax request is still running, the best solution is to put the click handler into the get callback.
$("document").ready(function(){
$.get("new.php", {
// this math avoids IE from crashing
nbRandom: Math.random()
},
function(data){
$("body").html(data);
$("#test").click(function(){
alert("abc");
});
});
});
You should delegate the event, from one of static parents of the element or document object.
$(document).on("click", "#test", function(){
alert("abc");
})
use delegate or on(recommend)
$(function() {
$('body').on('click', '#test', function() { alert('abc'); });
// or
// $('body').delegate('#test', function() { alert('abc'); });
});
problem is the the click function is called before the div with #test is appended...
call click function after the div is appended.. so that it gets that id... and the event
try this
$.get("new.php", {
// this math avoids IE from crashing
nbRandom: Math.random()
},
function(data){
$("body").html(data);
$("#test").click(function(){
alert("abc");
});
});
OR
the on function with selector as document..(i alway prefer to go with this)
$(document).on("click", "#test", function(){
alert("abc");
})
Here is the code for the jquery:
<script type="text/javascript">
$(document).ready(function(){
$('#room').submit(function(){
$.post('backend/CreateRoom.php', $('#room').serialize() ,function(data) {
alert(1);
$('#llama').append(data);
console.log('working');
});
});
return false;
});
</script>
The function part does not seem to be working. The PHP code on the backend/CreateRoom.php seems to work fine(the code updates a PHP database) works fine, it just doesnt update the div, or do anything I put in the function. Help?
Looks like you are returning false on document ready. I think you want that on submit.
$(document).ready(function(){
$('#room').submit(function(){
$.post('backend/CreateRoom.php', $('#room').serialize() ,function(data) {
alert(1);
$('#llama').append(data);
console.log('working');
});
return false;
});
});
or prevent default:
$(document).ready(function(){
$('#room').submit(function(event){
event.preventDefault();
$.post('backend/CreateRoom.php', $('#room').serialize() ,function(data) {
alert(1);
$('#llama').append(data);
console.log('working');
});
});
});