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");
})
Related
Consider the following code:
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:
$("button").on( 'click', function() {
$("#thediv").show();
alert('click');
});
$(document).ready(function(){
$("#thediv").hide();
})
I want the behavior to first show the div tag and then display the alert "Click". Instead the behavior works in the opposite way. Alert text is first displayed followed by the button being visible. Am i missing something ?
Can i modify the code somehow to get the desired behavior where the div is first displayed and then alert text is flashed.
Check that in jQuery.show(options) allows you to pass a PlainObject options.
And than you can use complete: A function that is called once the animation on an element is complete.
Code:
$("button").on( 'click', function() {
$("#thediv").show({
complete: function() {
alert('click');
}
});
});
$(document).ready(function(){
$("#thediv").hide();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:
It's because the alert() blocks the UI thread from updating, and that thread has not yet had time to show the element in the DOM before you call the alert().
Ideally you should use console.log() for debugging, however you can avoid this issue by putting the alert() in a setTimeout() with a very short delay.
$("button").on( 'click', function() {
$("#thediv").show();
setTimeout(function() {
alert('click');
}, 10);
});
#thediv { display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv" >hola</div>
<button id="resharper">button</button>
with javascript/jQuery:
$("button").on('click', function() {
$("#thediv").show("slow", callback);
});
$(document).ready(function() {
$("#thediv").hide();
})
function callback() {
alert('click');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thediv">hola</div>
<button id="resharper">button</button>
Add parameter to .show()
<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();
});
});
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/
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');
});
});
});
<script>
$("#menu-item-58").mouseover(function() { $("#simple_sidenav-3").css('visibility','visible'); });
$("#menu-item-58").mouseout(function() { $("#simple_sidenav-3").css('visibility','hidden'); });
</script>
#simple_sidenav-3 {
visibility:hidden;
}
simple_sidenav-3 is a hidden div.
So why doesn't it show when mouse is over #menu-item-58?
Please check it here http://mentor.com.tr/wp/?page_id=164
try this instead:
jQuery("#menu-item-58").mouseover(function() {
jQuery("#simple_sidenav-3").css('visibility','visible');
});
$ is undefined.
You haven't wrapped your code in the jQuery DOM ready function. Put this between your <script> tags:
$(document).ready(function()
{
$("#menu-item-58").mouseover(function() { $("#simple_sidenav-3").css('visibility','visible'); });
$("#menu-item-58").mouseout(function() { $("#simple_sidenav-3").css('visibility','hidden'); });
}
This will bind the mouse events to the elements when the document (page) has been loaded.
Try changing #simple_sidenav-3 from visibility:hidden; to display:none; Then call something like .slideDown() for a nice effect.
Also, here's some improvements to your code:
jQuery(function() { //waits till the document is ready
jQuery("#menu-item-58").mouseover(function () {
jQuery("#simple_sidenav-3").slideDown();
}).mouseout(function () { //no need to use $("#menu-item-58") twice
jQuery("#simple_sidenav-3").slideUp();
});
});