I have some problems with redirecting/reloading after a successful ajax call.
Here is the situation:
I have item for deletion saved in an array. When I click on a button it calls for PHP file via ajax, and after success I need to reload the page. But I have some problem doing this.
I searched the internet and couldn't find a working solution.
I have PHP file which goes through the array deleting item by item from the database.
foreach($arrayVals as $key=>$val)
{
//bla bla
}
Also, I have jQuery part:
$("#button").live("click",function(){
$.ajax({
url, data, type... not important
success: function(html){
location.reload();
}
});
});
I mean, the code works, but not good. It does delete items, but not all of them and then it reloads the page.
Like, if I have 10 items to delete, it deletes like 6-7, and 3-4 items stay undeleted.
It acts like it reloads the page too soon, like PHP file does not have enough time to process everything :D
BrixenDK is right.
.ajaxStop() callback executed when all ajax call completed. This is a best place to put your handler.
$(document).ajaxStop(function(){
window.location.reload();
});
You use the ajaxStop to execute code when the ajax are completed:
$(document).ajaxStop(function(){
setTimeout("window.location = 'otherpage.html'",100);
});
use this Reload page
success: function(data){
if(data.success == true){ // if true (1)
setTimeout(function(){// wait for 5 secs(2)
location.reload(); // then reload the page.(3)
}, 5000);
}
}
Using the ajaxSuccess to reload the page after ajax success.
$(document).ajaxSuccess(function(){
window.location.reload();
});
Related
I have created a ajax file handle after click add_to_cart. but my problem is my ajax file always run before woocommerce file (like my picture). How to run my custom ajax after woocommerce ajax add_to_cart ?
However its not a good practice, you can try the below code :
$('.add_to_cart_button').on('click',function(){
/** write your code here **/
});
Hope this helps
So I realize this post is old but I am experience the same problem. I used setTimeout to delay the ajax request by 500ms
jQuery(document).ready(function($) {
console.log('ajax-minicart.js loaded');
// What event do we want our AJAX to fire on? ADDING A PRODUCT TO CART.
$('.ajax_add_to_cart').on('click', function () {
// Fix
setTimeout( function () {
console.log('clicked');
// What data do we need to send? URL TO AJAX, ACTIONS
$.post(my_ajax_obj.ajax_url, {
_ajax_nonce: my_ajax_obj.nonce,
action: 'update_minicart',
}, function(response) {
// What do we want to do with response? REFRESH CART
console.log(response);
$('.cart-container').html(response);
});
}, 500);
});
});
I'm not sure of the stability or future-proofing of this fix but it works for now. I'd appreciate any information on why this happens myself.
Entry level user here. I've seen countless AJAX\PHP examples with data being passed via POST or GET and modified one of their examples. When clicking the button (id="clickMe) I want it to execute advertise.php and nothing more (no variables need to be passed) without refreshing the page and a notification that says success. When I click the button with my current code nothing happens.
<button type="button" id="clickMe">CLICK ME TO RUN PHP</button>
<script type="text/javascript">
$(document).ready(function(){
$('#clickMe').click(function(event){ // capture the event
event.preventDefault(); // handle the event
$.ajax({
url: 'advertise.php',
data: {
'ajax': true
},
success: function(data) {
$('#data').text(data);
}
});
});
});
</script>
Updated, but still isn't executing.
Here is your editted version code:
$(document).ready(function(){
$('#clickMe').click(function(){
$.post("PHP_FILE.php",{ajax: true},function(data, status){
alert(data);
});
});
});
2 things - you need a document ready handler and to prevent the default click action.
$(document).ready(function() {
$('#clickMe').click(function(event){ // capture the event
event.preventDefault(); // handle the event
$.ajax({ // remainder of code...
});
When loading jQuery scripts at the top of the page you need to make sure they do not run until the DOM has loaded, that is what the document ready handler is for. The you capture the click event by including it as an argument for your click's callback function and handle the click with the preventDefault() method.
Since this request is "simple" you may want to consider using one of the shorthand methods, like $.post()
I use a page with Jquery tabs and if i submit one of the forms in the tabs only that tab is submitted and refreshed with this jquery code:
$(document).on("submit", "#plaatsen_stap3", function(event) {
/* stop form from submitting normally */
event.preventDefault();
$.ajax({
type:"GET",
url:"../plaatsen_advertentie/plaatsen_advertentie_stap3.php",
cache: false,
data: $("#plaatsen_stap3").serialize(),
success:function(data){
$("#tab2").html(data);
}
});
});
But in the case that there has to be payed i want to reload the page with the payment page. I want to do that AFTER the div is reloaded with the data, because i need to put a payment row in the DB with the data from the GET. Is location an option? If i use that now only the div (tab2) is loaded with the payment page....
So:
1.push submit
2.submit the form and load page/script in div by Ajax
3.check in php script (within the div) if payment is needed
4.if yes,add row with payment data in database and reload entire page with payment page (with some Get data in the url (last inserted id)
success:function(data){
$("#tab2").html(data);
location.href = "/yourpage.php";
}
Since you wanna do once the HTML is generated, give some time like about 5 seconds?
success:function(data){
$("#tab2").html(data);
setTimeout(function(){location.href = "/yourpage.php";}, 5000);
}
This would work for your use case. This cannot be done from server side.
I think load() is what you are looking for. http://api.jquery.com/load/
The code below is intended as a guideline, and I'm not even sure it's working (I have not tested it). But I hope it will be of some help.
I would do something like this:
//Step 1
$(document).on("submit", "#plaatsen_stap3", function(event) {
/* stop form from submitting normally */
event.preventDefault();
$.ajax({
type:"GET",
url:"../plaatsen_advertentie/plaatsen_advertentie_stap3.php",
cache: false,
data: $("#plaatsen_stap3").serialize(),
success:function(data){
//Step 2 - submit the form and load page/script in div by Ajax
//Make sure array[] is an actual array that is sent to the test.php-script.
$("#tab2").load("test.php", { 'array[]' , function() {
//Step 3 - check in php script (within the div) if payment is needed (Do this from test.php - don't check the actual div but check values from array[])
//Step 4 - if yes,add row with payment data in database and reload entire page with payment page (with some Get data in the url (last inserted id)
//Do this from test.php and use header-redirect to reload entire page
$("tab2").html(data); //Do this when test.php is loaded
}
} );
}
});
});
I have what I think is a fairly classical problem involving what looks to me like a callback race, but in spite of all my reading, I'm still stuck. You'll find the code pasted below.
It's a simple log in form and you can see that when a certain button is clicked, I'll send the form data "ajaxically" to an external php file. Once the php has run, I'm to receive the results back, and as a test here, to simply alert out the email address from the php file.
When I run this, the ajax callback doesn't execute. If I click the button fast and repeatedly, I get the right alert. I also get the right response if I put in an extra alert.
How do I get it to run without doing these other silly things?
Thanks in advance
RR
$('#'+this.loginForm[0].parentId+"logIn")
.on('click', function() {
var jax = $.ajax(
{
type: "POST",
url: "../sharedfunctions3/act-membership.php",
data: {email: document.getElementById(that.parentId+'email').value,
password: document.getElementById(that.parentId+'password').value,
path: that.path,
action: "logIn"
}
});
jax.done(function()
{
obj = JSON.parse($.trim(jax.responseText));
alert(obj.email);
});
jax.fail(function() { alert("error"); });
alert(1);
});
I had a hunch that when you clicked the button the browser was submitting synchronously and asynchronously.
The return false; tells the browser to not submit the form and to prevent default actions from there on.
When a button inside of a form tag is clicked, most browsers will submit the form even though it is not a submit input.
My adventures continue...
On my page, I want to display a registration form in colorbox, allow the user to submit the form which is processed by a php script and then display a thank you style message in the colorbox which the user will then close.
At the moment I have the processing script in the same page as the form and this works on it's own outside of colorbox.
I've seen similar questions here that suggests to post the form using an ajax call
$('form').live('submit', function(e){
var successHref = this.action,
errorHref = "formError.php";
e.preventDefault();
$('#cboxLoadingGraphic').fadeIn();
$.ajax({
type: "POST",
url: "processForm.php",
data: {someData: $("#someData").val()},
success: function(response) {
if(response=="ok") {
console.log("response: "+response);
$.colorbox({
open:true,
href: successHref
});
} else {
$.colorbox({
open:true,
href: errorHref
});
}
},
dataType: "html"
});
return false;
});
I'm a bit confused with this....
I think I'm ok with sending my form via $,ajax (although any clarity appreciated) but I'm not clear how to handle the response from the form. What do I need my php script to output (and how) so that a thank you message is displayed? Is it simply an echo statement from the php script?
Should I also separate out my processing script from the form )i did it this way as I kept getting path errors and it was easier at the time.
Thanks
Success!
I've managed to get it to work - all logical in the end - shame I'm not very logical..
First move was to separate the php form process script out into a separate file.
Colorbox link to the form all works ok
Used an ajax post to the php script and waited for a message back from the php script.
The php script produces two html messages depending on success or failure which are then displayed in the colorbox by replacing the form html in its div
Yay!