php reload page from ajax div - php

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
}
} );
}
});
});

Related

Show pop-up message after a form is submitted until PHP commmands are executed

I would like to use a popup message (not necessarily as a new window item), just to inform the user that current page will be refreshed shortly (truly after some background php commands will have been executed.)
I don't want to freeze the execution of php though. I want this message to be shown after a form is submitted (if ($_SERVER["REQUEST_METHOD"] == "POST") { ... for as long as the execution lasts. After php commands are executed, I run echo ('<meta http-equiv="refresh" content="1;">'); to refresh page after 1 second, but I would like to inform the user that the page will be refreshed shortly and to discourage them from refreshing manually.
Thank you!
What you mentioned can be achieved through an ajax call like the following sample code. This code should be inside a seperate .js file and included in your page
// this is the id of the form
$("#idForm").submit(function(e) {
e.preventDefault(); // avoid to execute the actual submit of the form.
$(".loader").show(); // Show loader or popup message
var form = $(this);
var url = form.attr('action');
$.ajax({
type: "POST",
url: url,
data: form.serialize(), // serializes the form's elements.
success: function(data)
{
$(".loader").hide();// hide the loader/popup message after the form is submitted
setTimeout(function(){ // wait 1 second after you get the response
location.reload(true); // reload the page
}, 1000);
}
});
});

Auto reload a `DIV` after checkbox form change

I am trying to get a div to reload once a checkbox has been selected or unselected and the form has been submitted. I have used AJAX and can get the form to submit on change, which works no problem. However the page has to reload to display new data.
I have built the php in such a way that it doesn't need to refresh the page or fetch a new page. If the div and it's content refreshes that should be sufficient to display the new filtered data.
Below is what I have written so far
$(document).ready(function() {
$("input:checkbox").change( function() {
$.ajax({
type: "POST",
url: "index.php?action=resortFilter",
data: $("#locationFilter").serialize(),
success: function(data) {
$('.resorts').html(data);
}
});
})
});
What do I need to do to get the div to reload after the request has been made?
I use class methods to handle the processing which return only the array of data. The requests are made to the class from a php function.
What I'm trying to do isn't actually possible to because PHP is a server side language. The best bet is to create a new intermediate file that can handle the display of the data so that it can be brought in through a normal AJAX request and get the new display from it
Where is the Ajax request? You are submitting your form through HTML/Browser. You need to use the following code:
$(document).ready(function() {
$("input:checkbox").change( function() {
var url = "path/to/your/script.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#locationFilter").serialize(), // serializes the form's elements.
success: function(data)
{
$('.resorts').html(data);
}
});
})
});
Source: jQuery AJAX submit form
this sample loading code maybe help you
<div id="loadhere"></div>
$('div#loadhere').load('ajaxdata.php',{datatosend:whatyouwantforexamplehelloworld});

Repopulate a div after an ajax form is submitted using ajax (I think!)

I have a table with a bunch of products from my database table. Each product has an update button which will produce a populated form via ajax for the user to ammend any details they wish.
On submit, I want to update the database and then return back to the page I was just on showing real-time updating data. With anything else I do, I send back a view to the ajax success function and it gets displayed. Only I can't seem to do it with this. I take the action and method out of my form tag and let an ajax function handle it, but it doesn't return a view, it just displays the view only, whereas I want my div to go into a specific div on the existing page
/***** submit update form *****/
$(document).on('click', '#updateSubmit', function() {
$.ajax({
type: "POST",
url: 'products/updateProduct',
success: function(data) {
$('#viewProducts').fadeIn(1000, function(){
$(this).html(data);
// THIS IS WHERE I WANT MY VIEW TO BE RETURNED TO(the #viewProducts). CAN THAT BE DONE?
})
} // end success
}); // end ajax
}); // end submit event
Try to use
url: '/products/updateProduct' in place of url: 'products/updateProduct'
if still not works try to use full path in place of relative path............

Load dynamic content from php on submitting a form

I have created a page "index.php" with a lot of divs and I need to refresh only one of the divs when the form is submitted.
This div loads the content from chat_window.php which is as follows:
<div id="chatbox">
<?php echo $res; ?>
</div>
<!-- Chat user input form-->
<?php echo $formchat; ?>
chat_window.php uses dynamic content - $res and $formchat from chat.php.
Everytime I post the form the content of $res and $formchat is modified and I need to reflect the same in my page which loads chat_window.php.
I used AJAX and jQuery to do the same as follows:
$(document).ready(function() {
$("#submit").click(function() {
var name = $("input#chat").val();
var dataString = "chat="+ name;
$.ajax({
type: "POST",
url: "programo/bot/chat.php",
data: dataString,
success: function() {
}
});
$("#chatwrapper").load(chat_window.php);
return false;
});
});
The index.php has a div to show the chat_window as follows:
<!-- Chat window-->
<div id="chatwrapper">
<?php include ("chat_window.php"); ?>
</div>
As per my analysis, when I post the form, $res and $formchat are getting updated in the php. But when I load the chat_window.php, it doesnot loads the modified values. It rather loads the initial static values.
(Please dont suggest setInterval() as I dont want to refresh the page automatically).
Javascript is non-blocking, so it means that the interpreter does not wait for jobs to complete before processing the next one.
In your code, $("#chatwrapper").load('chat_window.php'); is being called pretty much before the ajax request above it completes. You will need to use the ajax success event to call the reload.
Try:
$.ajax({
type: "POST",
url: "programo/bot/chat.php",
data: dataString,
success: function() {
$("#chatwrapper").load('chat_window.php');
}
});
Try moving the .load() statement into the ajax success handler:
$.ajax({
type: "POST",
url: "programo/bot/chat.php",
data: dataString,
success: function() {
$("#chatwrapper").load("chat_window.php");
}
});
The $.ajax() call is asynchronous, which means that execution does not pause waiting for the response, rather, it moves on directly to the .load() call. (Which is also asynchronous, so really you've no guarantee about the order the response from each call will come in unless you don't make the second call until the first one finishes.)
I got my work done. Though I used another way of doing it.
What I have understood after few days of R&D is that, when we submit the form to a php, the request is sent with input params. When your php file processes this request, it might be updating some global variables. It completes processing the request and returns the control back to the calling index.php page.
The important thing to notice is:
The variable updates made while processing the form submit request do not persist after the control is returned. The global php variables will only get updated when the page gets refreshed.
So, if there is a strict requirement to avoid page refresh, collect the processed data from the php in some output string and pass it back to index.php like this:
$responseString = $res . "|" . $formchat;
echo $responseString;
The success parameter of .ajax will receive this output and accordingly you can update your chat window or any other form.

how to refresh the data being loaded on the form after showing it off?

I have a a div, wherein, it displays the data, and beside it, is an edit button..if one clicks the edit button, it hides the div and shows a different div with input forms which allows the user to update the data..the problem now is, when the user submits the form, my script updates the data and hides this input forms and shows again the former div of data display, the data shown is not updated....my question now is,, how to show the updated data after the script show() it again ?
here's my jquery ajax code
$(function(){
$('#profileinfoedit').click(function(){
$('#profileinfomain').hide();
$('#profileinfoajax').show();
$('form#pdetails').submit(function(){
var cvid = $('#cvid').val();
var resumetitle = $('#resumetitle').val();
var name = $('#name').val();
var dob = $('#dob').val();
var gender = $('input[name=gender]:checked').val();
$.ajax({
type: "POST",
url: 'classes/ajax.personalupdate.php',
data: $("form#pdetails").serialize(),
success: function(data){
alert(data);
$('#profileinfoajax').hide();
$('#profileinfomain').show();
}
});
return false;
});
});
});
$('#datepicker').datepicker();
So location.reload is just refreshing the page, which as you have discovered is a quick and dirty fix.
If you want to do it without a page refresh, you would have to regenerate the html for just the 'profileinfomain' element from data received back from ajax.personalupdate.php. I would assume you would only want to do this on "success".
One approach would be to have the success data contain the html needed to regenerate the 'profileinfomain' element html. So perhaps have php return back data.profileinfomain_html, and then:
$('#profileinfomain').html(data.profileinfomain_html);
which will replace the inner content of the profileinfomain element.
If you are working in a framework of some sort, have the profileinfomain inner html content be a partial template included in so you only have to maintain its html in one place.
was able to sort it out via
$('#profileinfomain').show('normal',function(){
location.reload();
});
but, isn't there any better way to do this?

Categories