I have a page with 2 separate forms that can be submitted via Ajax (jQuery). For each of these forms I'd like to show a loading indicator to the user. I have found a nice piece of code that can easily show these icons, but it only works when there's 1 form.
$('.ajaxloader').hide().ajaxStart(function () {
$(this).show();
}).ajaxStop(function () {
$(this).hide();
});
ajaxloader is a class which shows the loading image as a CSS background image. To use it, I just need to add something like: <span class="ajaxLoader">Busy ...</span>
When I test this with my page (that has 2 forms), and I submit one of the two, then both loading indicators appear (which is quite obvious). Now my question is, how can I show the indicator that needs to be shown? I was thinking about giving the span-tag an id attribute, but then I don't know how to proceed. I want this to be as generic as possible, so I don't have to hardcode and duplicate code a lot.
Thanks!
You could attach the "show loading indicator" callbacks to the Ajax queries themselves, not do a 'catch-all' like your current solution.
Something like this in your $.ajax() call:
$.ajax("/form1/target", {
beforeSend: function() {
$(".ajax-loader-1").show();
},
complete: function() {
$(".ajax-loader-1").hide();
}
});
(And a similar one for your second form, wherever the Ajax call for that is defined)
Have you thought about starting it when your form is submitted and hiding the other.
$('.yourSubmitButton').click(function () {
$(this).parent().find('.ajaxLoader').show();
});
$('.ajaxloader').hide().ajaxStop(function () {
$(this).hide();
});
So the loader will show inside the form that has just been submitted (I assume you are doing a submit with a button or a link?) then both are hidden again when the ajax request stops.
Related
I have a table (formatted with Datatables script) and it has a column which contain few icons to manage actions. When user click on an icon, it load a modal and get the modal content using POST method.
Modal has a save button to complete the action after user make their choice. When they click save button, another post script complete the request and feedback to user.
This process working fine when the first time user load the page. There is a refresh button on the page which can reload the TABLE without reload the PAGE.
If user use this button to refresh the page and try above action. it open the modal and Save button trigger the post action 2 times. If the user refresh the page (using the refresh button) again and try one of the action icons, post script run 3 times... in other words if you refresh 10 times post script run 10 times...
if user use the browser refresh button, we don't get this repetition.
Just wondering whether we can fix this without get rid of the refresh button.
We tried different ways to place the script within the page. but still cannot understand what is triggering the multiple post request.
//javascript
//step 1 - load the modal with an action list
$("#proj_data tbody").on("click", ".update_job_progress", function () {
var pn = $(this).attr('mypn');
$.post('reports_job_progress.php', {proj: pn}, function (data) {
$('<div id="progress_update_modal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true"></div>').appendTo('#modal-container').html(data).modal();
});
});
//step 2 - save user choice
$('body #modal-container').on('click', '.btn_jobaction', function () {
var pn = $("#pn").val();
$.post("reports_job_progress_backend.php", $("#progress_list").serialize(),
function (res) {
if (res === 0) {
alert("There is a problem saving the information. please try again");
} else {
$("#prog" + pn).html(res);
$("#progress_update_modal").modal('hide');
}
}
);
});
//step 3 - destroy the modal
$("body").on("hidden.bs.modal", ".modal", function () {
$("#modal-container").empty();
});
Could you please help me to understand the issue with this code?
It looks like your problem is being caused by binding multiple onclick handlers to the element. Please try using off like this $("#proj_data tbody").off("click").on("click", ... and see if that fixes your issue.
#buffy solution worked. However just adding .off('click') was disabling other icons click event as all icons share the same class. after playing with the code i found adding $(this).off('click') does the trick. Now everything working perfect. Thanks #buffy for providing correct directions.
You will bind the click event multiple times. You could either reset the callback, check if the callback has been set or (much better) set the click listener in a part of your script, that will not be executed, whenever you refresh your page (with the mentioned refresh button) like:
$(document).ready(function() {
$('body #modal-container').on('click', ...
$('body #modal-container').on('click', ...
});
I am building a search page that posts back to itself. I finally got a sample page working here. I also built a fiddle here. But I don't understand why it works. When the user initially hits the page, it should only show the search form. When a search is submitted, it should hide the form, show results, and a button for a new search. I'm using jQuery. Here's my code:
//Code Block 1
// Show search form if there is no querystring
//Hide search form, show results if querystring
$(document).ready(function() {
if(document.location.search.length) {
$("#newsearch").show(1000);
$("#results").show(1000);
$("#search").hide(300);
} else {
$("#search").show();
}
});
//code block 2
//if new search clicked, show form, hide results
$("#newsearch").click(function() {
$("#newsearch").hide(1000);
$("#results").hide(1000);
$("#search").show(300);
});
When code block 1 and 2 are loaded in the head, block 2 never fires. When I pull 2 out and put it at the end of the page, it works.
I am trying to learn, so I have 2 questions. (1) Why didn't it work when it was one block, and (2) Any suggestions for doing it better?
Thank you.
D
$("#newsearch").click(function() { is being run before the #newsearch element exists.
Therefore the click event is attached to nothing.
It works in the first block because it's in a $(document).ready, which runs code inside only after everything has finished loading.
So i have a website that I'm doing for a school project. It's supposed to be like PasteBin. So on the right theres a different div (Uued koodid) that shows newest pastes. On click, they are supposed to show what they include using AJAX to refresh the left div. This only works for 4 times and then stops, but URL is still changing. After refresh it changes again and works again for 4 more times.
In main.js i have
...
$.ajaxSetup({ cache: false });
...
$(".uuedKoodid").click(function () {
$(".left-content").load(document.location.hash.substr(1));
});
...
EDIT:
Also other AJAX functions work. If I log in, I can switch between settings and profile perfectly but still cannot watch new codes
When you replace right menu with new code (from ajax call) you don't attach click event again on .uuedKoodid items so they don't do anything. You need to attach event again or attach it like this:
$(document).on('click', '.uuedKoodid', function () {
$(".left-content").load(document.location.hash.substr(1));
});
Edit:
As you noticed this will cause small problem. onclick event run before browser run standard link action. First you load ajax and then browser changes address. This way you are 1 action behind. Better solution than reading with delay (setTimeout) i think would be to read address directly from link:
$(document).on('click', '.uuedKoodid', function () {
var url = $(this).attr('href');
$(".left-content").load(url.substring(url.indexOf("#")+1));
});
I have a page with a simple form. This form has ONE input text.
I have this code:
page.open("http://www.example.com", function (status) {
page.includeJs("http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js", function() {
page.evaluate(function() {
$('input[name=myText]').val('my content');
});
});
});
(as you can see i also loaded jquery)
Now, when i set the content of this input text, the page changes, the content of the page changes.
My question is: how can I get the updated content?
The problem is that i need to submit the form but i can not do it after:
$('input[name=myText]').val('my content');
because when i set it there is an JS event on the page that changes the content.
SO I must read the new content, find the form using JQuery and then submit it.
Could someone help me?
Thank you!
So your page.evaluate() call has a side effect and that changes the page. The question is whether this change occurs instantaneously. But you cannot assume that it does - particularly if it causes a fetch of new content from a remote webserver.
That being the case the best thing you can try is to sleep for a while and then assume your page has the new content. Or alternatively, when you feel more advanced, poll on a regular basis for a DOM object you are expecting to appear. But the beginner should try a sleep:
....
page.evaluate( function() { ... } );
window.setTimeout(
function() {
/* press submit button */
},
5000 /* wait 5 seconds (5,000ms) */
);
....
Page A:
$(document).ready(function () {
bindData();
});
function bindData() {
$('#searchbtn').bind('click', function () { SearchResult(); });
}
function SearchResult() {
ajax call...
}
Page A HTML:
<input type="button" id="searchbtn" />
Page B Details---> this page comes after selecting a specific search result from page A search list
Back<br />
Now when I go back to the Page A I can see my search criteria's as they were selected but the result Div is gone. What I am trying to do is I want the search list to stay when the Page comes back.
I think what I can do here is some how call the searchbtn click event again when the page comes back so the list will come-up again. Can anyone tell me how to fire the searchbtn click event only when the page comes back from Page B. or point me in the right way of doing this..
Thanks
The Browser Back button has long been problematic with AJAX. There are scripts, workarounds, and techniques out there (depending on the framework that you want to use).
Since it appears that you are using jQuery (based on your posted JavaScript syntax), here is a link to another Stackoverflow post regarding back button jQuery plugins.
history.back() will return you to the last URL visited, meaning that any ajax calls made during the user's visit will not be automatically repeated. Your browser may automatically restore your form selections, but the SearchResults() function is only called by a click event, not a selection event.
You can bind URLs to ajax states using a framework like sammy.js. That way, history.back() would take you to a URL associated with SearchResults().
function bindData() {
var chkinput1 = $("input:checkbox[name=x]:checked").length;
var chkinput2 = $("input:checkbox[name=y]:checked").length;
if (chkinput1 > 0 && chkinput2 > 0) {
SearchResult();
}
$('#searchbtn').bind('click', function () { SearchResult(); });
}
I know this is the worst way to achieve this result but I think instead of using any other plugins to add complexity we will go with this for now. If anyone else is looking for the same question let me tell you again this is not the best practice as on returning back to the history we are calling the search result again depending upon the cached input selection of checkboxes and generating the whole ajax call again to display the list. On the first request I am caching the list and setting sliding expiration so its not taking anytime to comeback and so everyone lives happily.