I am making and ajax call and storing the results in an array. After the first set of data is loaded, I am using next and previous buttons to navigate through the array.
I want to prevent any $(element).on('click') events from happening until I have the first set of data loaded.
Is there any way to do this?
I have already tried to use
$(element).unbind('click');
for when the document loads and then
$(element).bind('click');
when the ajax call is successful, but still clicking on either the next or previous links will still trigger my
$('#next #prev').on('click', function () {
//my code to navigate through the array here.
});
Anyone have any ideas on how I can complete stop this event from firing until the ajax has loaded?
You can disable them by default and in the ajax success callback you can turn them on with something like this:
$(element).prop("disabled", false); // Element will get enabled for clicking
I will update the answer now as it is not working for the concerned person, to disable the button do this:
$(element).attr(“disabled”, true);
In success callback of the ajax call you need to do this:
$(element).removeAttr('disabled');
$.ajax({
....
success:function(){
$('#next #prev').on('click', function(){
// only ajax event complete the #prev can run this function
}).off('click'); // no more clickable now
}
});
or you can just
$('#next #prev').hide();
// done?
$('#next #prev').show();
Related
I'm using the Modaal library and want to dynamically load the content of the modal via Ajax, which requires sending the ID for each clicked item through to the callback.
I think I need to bind the clicked element to the modaal function, but am not sure how. I think that jQuery's on method.
Without binding, the popup works (but data is not updated for each item):
var info_popup = $('.info-popup');
info_popup.modaal({
after_open: function(ev){
console.log(info_popup.data('unique_id'));
}
});
When I bind the function, it returns the data, but a second click is required to launch the modal:
$('.info-popup').on('click', function() {
var unique_id = $(this).data('unique_id');
return $(this).modaal({
after_open: function(ev){
console.log(unique_id);
}
});
});
So I'm thinking I need to somehow forward the clicked status to Modaal, but not sure how.
Update
I can achieve this by setting the start_open parameter in Modaal to true, but not sure if this is an elegant approach, and would like to see how it would be done from outside of Modaal.
I have a huge problem with working with AJAX:
After the AJAX request on my page is send the next request are send multiple times, and buttons think that they are pressed multiple times.
Now I searched around here and the internet, but I can't solve it. So far, following corrections are made in the code:
All code is in an own function called AjaxInit()
AjaxInit() is called upon $(window).load and on $(document).ajaxStop
All Element have their binder to body (e.g. $("body").on("click","#btn-main", function)
Now I have tried unbinding all events using $("body").find("*").off(), but that did not help either.
I know that I do something wrong, I just don't know what.
How can I properly rebind everythink after the Ajax call is done? How can I make shure that object bindings (e.g. $("#news").sortable({})) will work properly after the first ajax call? I would love to use AJAX for all the callbacks on my page, but currently the best solution seems to be just reloading the entire page after every ajax call, which would be rather bad.
Any help is appreciated.
EDIT: Code added
$(window).load(function() {
AjaxInit();
});
$(document).ajaxStop(function() {
AjaxInit();
});
function AjaxInit() {
$("body").on("click", "#btn-admin-main", function(e) {
console.log("Admin clicked");
e.handled = true;
e.preventDefault();
LoadDynamicContent("/Edit/");
});
}
function LoadDynamicContent(path) {
//Nach oben Scrollen
$('html,body').scrollTop(0);
$.ajax({
type: 'GET',
url: path,
success: function(response) {
var html_response = $(response).find('#dynamic_content').html();
$("#dynamic_content").html(html_response);
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<a class="sidebutton-full" id="btn-main">Edit</a>
<div id="dynamic_content"></div>
You can unbind the click event from button
$(document).unbind('click').on("click", "#btn-main", function () {
//do stuff here
});
OR
$(document).off("click", "#btn-news").on("click", "#btn-news", function () {
});
If your form submission hitting twice then you need to change your code little bit
$("#form_news_sort").submit(function(e){
e.preventDefault()
// do stuffer here
.
.
.
.
return false;
})
if you are still facing error , please comment below
The problem is that when your ajaxStop handler calls AjaxInit(), it adds another click handler to the body.
In your example code, it looks like you don't need ajaxStop at all. All it will do is add another click handler, which is the problem. Or if your real code does some more complex initialization that needs to run whenever all Ajax requests are complete, you should factor out the click handler assignment from whatever else needs to happen.
I have AJAX calls attached in multiple places (unfortunately not only buttons, but also links, forms and other stuff), I know how to handle this manually (find every place I do an AJAX call and then block / overlay the button during first call), I'm wondering if there's a way to do it more automagically?
If we're talking jQuery - maybe a plugin? Something that will just work? :)
It'd be perfect to have something like:
if clicked element has .ajax class
block all ajax requests if the current one is still live
I'd then add .ajax class to every button/link/whatever triggering the request and voila. Does anything like this exist?
You can to create a global variable:
loadingAjax = false;
whenever an event triggers, you turn this variable to TRUE by using:
$("selector").click(function(){
if(!loadingAjax){
loadingAjax = true;
$.ajax(options)..
}
});
And you should turn loadingAjax back into false when the ajax stops:
$( document ).ajaxStop(function() {
loadingAjax = false
});
I have a function which when the div is loaded it executes code:
$("#row").ready(function () {
When the page has first loaded, it fires fine, my data loads up without any problems.
How ever I would like to reload the div every time the value of a textbox is changed.
$("#startDatePicker").change(function () {
$("#row").load(document.URL);
});
Which is why I have that code there.
However when I change it, the .change event is fired, however it doesn't reload my div? Now I'm not sure if the div has been reloaded and it just doesn't fire the event or the event is not being loaded again at all.
EDIT
Thanks to the comment using an alert to check if the div is being called, I found out that is it not being called after I load it, so the next question is, how do I recall the (div).ready function again?
I think the issue is with jquery-cache.
Try it:
$("#startDatePicker").change(function () {
$("#row").load(document.URL+'?dt='+new Date().getTime(), function() {
alert( "Load was performed." ); // perform the operations here that
// that you wish to perform on .ready
});
});
See if it helps.
I have a button in my html form.When i enter values in the textfield, a background operation is performed and data is sent to the server.But since this button already has an event (submit), how do i open a new page once that background operation is completed?
This is the button.
Submit
and in my javascript i have this function
$(document).ready( function() {
$("#submit").bind('click', function(event){
doSomeBackgroundStuff();
});
This is happening from Page A, i want Page B to open when doSomeBackgroundStuff() finishes.
since this button already has an event (submit)
Use preventDefault or return false:
$(document).ready( function() {
$("#submit").bind('click', function(event){
event.preventDefault(); //or just use : return false; at last
doSomeBackgroundStuff();
});
You have a few options.
First, working with what you have already, You could use a callback function for your bind event, and add window.open to load the new page, and simply pass in a url, or hardcode it.
Your jquery would look something like:
$(document).ready( function() {
$("#submit").bind('click', function(event){
//fire AJAX request
doSomeBackgroundStuff();
},function(){//call back function
window.open('http://www.yourURL.com');
});//end bind
});//end doc ready
Here is further reading on window.open - How to open a new HTML page using jQuery?
A second option is to use AJAX. You would setup an AJAX request for the new page, and use $.ajaxSend and $.ajaxComplete to fire functions before and after the request.
Your jquery would look something like:
//on button click
$('#submit').click(function(){
doSomeBackgroundStuff();
});
//ajax start handler
$(document).ajaxStart(function(){
//do stuff before AJAX request
});
//ajax complete
$(document).ajaxComplete(function(){
//do stuff after AJAX request
});
A related question with a similar solution.
Global AJAX handlers
Hope this helps