This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
Use variable outside the success function from an ajax/jquery call
I have this code and i don't understand why the accessing of the html elements is only working inside the ajax success function. the form is pulled in from ajax either way but i can only access it when i put all the selects for elements of it inside the ajax function.
The console.log('submit clicked'); gets not triggered this way, but inside the "ajax success" it does, i thaught everything pulled in with ajax is part of the DOM?
jQuery(document).ready(function($) {
console.log('ready');
$.ajax({
type: 'GET',
url: 'admin-ajax.php',
data: { action: 'get_arve_form' },
success: function(response){
// var table = $(response).find('table');
$(response).appendTo('body').hide();
console.log('response');
[ if i move the code below this ajax function in here its workign fine why not outside of it?]
}
});
// handles the click event of the submit button
$('#mygallery-submit').click(function(){
console.log('submit clicked');
[...]
});
Ajax is asynchronous so your elements don't exist until the ajax call finishes.
That being said, there are two ways to fix it:
1) Move your code into the success handler
2) Use event delegation to bind your event handler to all current and future elements.
An example of #2:
$(document).on('click', '#mygallery-submit', function(){
console.log('submit clicked');
});
Check out jQFundamentals to learn more about event delegation.
That's how ajax works.
When the external page is loaded, you have it available only on the success handler.
If you want it to be available elsewhere, you have to save it somehow, like you are doing.
But, the .click function gets executed before the ajax call returns successful. When you select $('#mygallery-submit'), it most likely is empty (you probably load this via ajax). So what you have to do if you want to declare the click function on document ready, rather than when the ajax page gets loaded, is to use the .on function:
$('body').on('click', '#mygallery-submit', function() {
console.log('submit clicked');
});
Because .click() is not a delegated handler. If the element you're trying to bind the event to doesn't exist at the time of execution, the event won't get bound. Try .on() instead.
$('body').on('click', '#mygallery-submit', function() {
// etc.
});
Related
This question already has answers here:
Events triggered by dynamically generated element are not captured by event handler
(5 answers)
Closed 8 years ago.
I have Javascript code that is supposed to do stuff on a click, but it isn't doing anything. It's essentially a button on a pane that slides in. When I click the button, I expect something to happen. This button, though, is populated when an AJAX call completes because the AJAX call is fetching some HTML that contains the button.
Here's my code to set up the button:
$("#btn-delete-setup").on("click", function() {
console.log("clicked");
_deleteFunction();
//return false;
});
Because the Javascript is loaded before that pane and button are rendered from the AJAX call, does this mean the button will not respond to my .on("click") code? Is my button not responding because when Javascript loads, it hasn't found the button to bind to?
So, the answer of your question is : No, this code won't work if the element is appended after the script is loaded (e.g. on document ready).
But you can achieve this easily with jQuery :) :
$(document).on("click","#btn-delete-setup", function() {
console.log("clicked");
_deleteFunction();
//return false;
});
Full solutions offered to you on this post (duplicate): Using jQuery 'click' function that was loaded with Ajax content?
This button, though, is populated when an AJAX call completes
So this is the perfect case for event delegation, which means binding events on the element which was not available when page was loaded, so you need to delegate the event to the closest static parent:
$("closestStaticparent").on("click", "#btn-delete-setup" function(e){
console.log("clicked");
_deleteFunction();
//return false;
});
$("closestStaticparent") is the page element like any div container/wrapper or i would say the element which is in the dom before ajax call.
Although $('body'), $(document) or $(document.body) are always available for delegating the event.
If you're affraid about the possibility that your button is not ready try with:
$(document).ready(function(){
$("#btn-delete-setup").on("click", function() {
console.log("clicked");
_deleteFunction();
//return false;
});
});
Hope this helps,
I have some JavaScript code that binds a click event to certain elements click events as seen below.
$(".alert-message .close").click(function(e) {
$(this).parent().fadeTo(200, 0, function() {
$(this).slideUp(300);
});
e.preventDefault();
});
This is called in the document ready event so normally it works fine until i fire an ajax request that updates parts of the page. This newly created part doesn't have the click event added and i end up having to recall this code for every ajax request, resulting in a lot of duplication.
I am looking for a way to write this JavaScript code once and it to be called in any scenario. Is there some event handler that will be called after any ajax or normal request?
Bootstrap dismissable alert message work after any ajax request so there must be a way.
Depending on which version of jQuery you're using you should use either delegate or on instead of directly binding click. Try something like
$(document).on('click', '.alert-message .close', function(e) {
$(this).parent().fadeTo(200, 0, function() {
$(this).slideUp(300);
});
e.preventDefault();
});
http://api.jquery.com/on/
Use event delegation and bind the event to a parent of .alert-message .close that doesn't get recreated:
$(document).on('click', ".alert-message .close", function(e) {
Instead of that, you can use on:
$(parentDivOrContainer).on('click', ".alert-message .close", function(){...});
parentDivOrContainer can be any container element that is not affected by ajax call.
I currently have a quite big issue here, which I've been trying to figure out since yesterday, but I really don't know what could be the problem here.
So I basically made a jQuery Ajax call in my code, something like this:
var ajaxCall = function(id, token)
{
var datap = { "id": id, "token": token };
$.ajax({
type: "POST",
url: "ajax.php",
data: datap,
dataType: "json",
beforeSend:function()
{
// loading image
},
success: function(data)
{
setting(data);
},
error: function()
{
alert('error');
}
});
As for the success function you can see the setting function, which looks like this:
var setting = function(data)
{
$('#testDiv').html(data.country);
}
Basically, this ajax call is made, once someone clicks on an item like:
$('#popup').on("click", function(){
ajaxCall();
});
So when someone clicks in the popup button, they will have a popup window open with the loaded Ajax content.
This is actually working flawlessly. My only problem happens, if I want to make another event within the Popup window (like: on click).
var load = function()
{
$('#testDiv #button').on("click", function(){
alert(1);
}
}
So if I place it in the above Ajax call function, it looks like the following:
$('#popup').on("click", function(){
ajaxCall();
load();
});
Problem:
When I click on the opoup button, to load the popup window, it loads the Ajax content. When I try to click on #button within the popup window at the first time, after loading the page, it gives me the alert box with 1.
However! If I just close the opoup window and click on it again, to load the popup, than click on the #button again, now I got the alert(1) 2 times! If I do the above again, I got it 3 times, 4 times, and so on.
So basically I've found out, that if I use the on Click function (within the popup window, after ajax has loaded), the contents within the on Click function got called more times, if I load the popup window more times (without refreshing the page - after refresh, everything strats from the beginning).
So the first popup load and click is normal, but the others seems to get called more times. I have also checked that the Ajax call is called multiple times, but it's NOT. I have placed an increment number inside each part of the code and I only got it incremented multiple times when the #button was clicked.
I know that this is quite hard to understand, but I would really need someone's help here, as I'm completely lost. Any solutions would be really appreciated.
I suggest you to do this:
Bind your click event outside of that function and put it in doc ready:
$('#testDiv #button').on("click", function(){
alert(1);
});
and do this in the #popup click event:
$('#popup').on("click", function(){
ajaxCall();
$('#testDiv #button').trigger('click');
});
You are binding the click event whenever load is called, to fire it once, you should bind it once. Either unbind it every time you call load before binding it or use on for event delegation. If you have to bind event with ids then you should directly bind as id are supposed to be using do not use descendant selector.
var load = function()
{
$('#testDiv #button').off("click");
$('#testDiv #button').on("click", function(){
alert(1);
}
}
I would recommend you to use event delegation for dynamically added elements
$(document).on("click", '#testDiv #button',function(){
alert(1);
});
Delegated events
Delegated events have the advantage that they can process events from
descendant elements that are added to the document at a later time. By
picking an element that is guaranteed to be present at the time the
delegated event handler is attached, you can use delegated events to
avoid the need to frequently attach and remove event handlers, jQuery docs.
Edit based on comments
As both elements are present in dom and not loaded dynamically you simply need click event. As ids are supposed to be unique do not use parent child selector
$('#testDiv').on("click", function(){
alert(1);
});
I am building a framework and I want to write some generic functions for buttons when they are clicked before and after an ajax call is made.
My problem is how do I reference to the actual element itself.
$(this) in this case references to the xhr I guess.
$.ajaxSetup({
beforeSend : function(){
$(this).css('cursor', 'wait');
$(this).text('wait...');
},
error : function(){
$(this).css('cursor', 'normal');
}
});
I found another question about this with an answer:
jquery ajax - global settings. Is it possible to know what event/element trigger the ajax call?
Moreover the jQuery docs says:
Note: Global callback functions should be set with their respective
global Ajax event handler methods—.ajaxStart(), .ajaxStop(),
.ajaxComplete(), .ajaxError(), .ajaxSuccess(), .ajaxSend()—rather than
within the options object for $.ajaxSetup().
My old answer:
You sould bind an onclick listener on the buttons you want to take
ajax action on. In this case you can access the button with this:
$(this).addClass('a');
// ajax calls...
example: http://jsfiddle.net/ichr/s6EUg/2/
I have some weird problems with jQuery ajax. I am calling jQuery ajax function by .hover event and it is working fine.I am getting some response and I am displaying that response in div.
But if I want to call jQuery on <a> which has come as response from previous jQuery ajax call by .click event, I can not call it.
Can anyone help me out in this?
This is jQuery ajax function ..
function call_jqry_ajx(file_name,show_div_id,function_name,parameter){
$.ajax({
type: "POST",
url: file_name,
data: parameter,
success: function(msg){
alert( "Data Saved: " + msg ); //Anything you want
$("#show_div").html(msg);
alert("Done with div..");
}
});
}
$(document).ready(function ()
{
$(".a_class").click(function(){
alert("double times called but still getting alert.. :)");
return false;
});
});
in my div I get response like this ..
<div id="show_div">
<a class="a_class" id="a_id">Call Anchor</a>
</div>
I can not execute my jQuery function a tag's link
You are registering for the click event before the object is actually present in the page. Thus, it doesn't get an event handler assigned to it.
To remedy that, you should use either .delegate() (for pre-jQuery 1.7) or .on() (for jQuery 1.7+) to use delegated event handling. This registers for the event on a parent object of the actual content that will generated the event. You pick a parent object that is there at the beginning when you register the event and then event bubbling allows events in newly created objects to be captured.
You can change your code to this:
$(document).ready(function () {
$('#show_div').on('click', '.a_class', function(){
alert("double times called but still getting alert.. :)");
return false;
});
});
This registers for the click event on the #show_div object, but only triggers the event handler if the event originated on an object that matches the .a_class selector. Thus objects inside of #show_div can come and go and the event handler will stay in place.
See the jQuery doc for more info on .on(). This replaces .live() which is now deprecated, but used to be the preferred way of doing this.