I have a web page generated with php with a form placed within a div. The form is submitted using Ajax and validated on the server side. If there is an error, the contents of the div is replaced with an updated form with error messages. If the form has no errors in it, I want to reload the entire page from the ajax response, not just the div.
Does anyone know how to do that?
I have tried sending location header but it places the new page in the div. I have also tried javascript window.location but I don't know hot to get it executed when the ajax response has been received. I am not using jQuery so I want to do this in plan javascript and/or php.
Thanks in advance!
Yes, you can do that in your callback as follows:
location.reload(true);
Honestly, that kind of defeats the purpose of doing something asynchronously.
Related
I am trying to implement a feature in my webapp to let user click a button and see a "status report" of something. The status report is quite large hence I want to have it on a separate page. I am trying to think of a way to make an Ajax call to a PHP script and have the response data displayed nicely on another window. Is there a way to do that? I am new to web dev and any help would be appreciated. Thanks
Sumbit a form with target="_BLANK". That is don't make an AJAX call at all just a regular form sumbission triggered by javascript.
var form=document.createElement('form');
form.setAttribute('action',url);
form.setAttribute('target','_BLANK');
form.setAttribute('method','post');
form.setAttribute('style','display: none');
var inp=document.createElement('input');
inp.setAttribute('type','hidden');
inp.setAttribute('name',item);
inp.setAttribute('value',itemval);
form.appendChild(inp);
$('body').append(form);
form.submit();
This is not what ajax was made for.
When you open a new tab, server needs to send whole page anyway, there is no way to share HTML page between two tabs.
You can send report on page load or if sending asynchronously is necessary then try passing some GET variable which triggers ajax call from new tab.
I have a page which shows a list of items. Page coded with html, css, php and using mysql db.
On that page a user can request to add one of the items to their special list.
I want to do this within the page without having to do a complete page refresh. So user clicks button to add, item is added to their list and button changed so they can't add it again.
Do I use ajax calls to run code behind the page and then refresh the div?
Or is there a better more efficient way to do it.
I'd prefer a php option of possible in case user has js turned off, but don't know if it can be done with using js.
Any help appreciated.
If you want dynamic content (changing the page without refreshing) you are going to have to use Javascript. To do what you are asking, you could call a PHP script via Ajax that outputs the contents of the div with the new item, and then change the div based on that response.
Dagon is exactly right. Create a form which handles the request and set the action of the form to the PHP script you want to handle the request. Note that although this can be the same php script that you use to process your ajax request, it does not necessarily have to be.
Many times when I implement such functionality, I'll set the PHP to send variables as POST (in the event of JS disabled) and have my ajax request as a GET so I can use a single PHP page to handle the 'same' request. When using AJAX, I'll have the script echo a specific code then have the ajax response handle that return.
if(val == 'OK') {
//in event of success, perhaps you want to hide the original form and show a success message
} else {
//do something like unhide a hidden div to display an error
}
If JavaScript is turned off, the page has to be reloaded. In your case jQuery could be very handy and simply rewrite the element you need to rewrite. The server send's a simple json. Using a PHP Framework might also be a good idea, since the way you ask it seems (with respect, and not wanting to offend), that you are not using any framework and might run into falls making your script vulnerable (sql injections for example)
If your visitor doesn't have JavaScript enabled and you want to serve anyways, then you have to do a page reload. First check if that is worth to do, who is your client/visitor, what browser do they use, ... questions like that help you to design your page/app.
I have a PHP file that has an HTML form that submits via AJAX to the database. When I hit the form submit button, every PHP query updates itself. Is this how Ajax normally operates? or if I switch the parent file from PHP to HTML, will it eliminate the unwanted updating of all the PHP on the page?
jQuery ajax submits the request to a seperate php file to load data. You can choose to load only poritions of pages. $.load does this easier. Look here: http://api.jquery.com/load/
You said it submits via AJAX to the database - but have you actually programmed it to do that?
Post a sample of the AJAX code and we can check it for you.
I have a feeling you don't really understand the technology you are using. What is a 'PHP query'? You want to switch the page from PHP to HTML? Well, can you? Does the page have PHP in it or not? It wouldn't make any difference to AJAX code, but I have a feeling you don't actually have AJAX code.
I have a vertical scrolling website (lots of in-page links). I also have a contact form script I'm working on.
I'm trying to set it up so when someone completes/submits the contact form, it redirects them to #contact_area (on the same page), but calling the header function after is throwing a "Cannot modify header information" error.
Any suggestions on how to redirect after a script is processed from within ?
Thanks!
A header redirect needs to happen before PHP prints any output. If you want to direct the user to an anchor on the current page you have two options:
Submit the form as normal. Your PHP script processes the data and does this before any output: header("Location: /my_same_page#contact_area"); The page will be reloaded but they'll end up in the right spot.
Submit the form data via AJAX and then scroll to the #contact_area anchor.
The second options is probably the cleanest but the first one should be a lot easier for you to implement.
You can work around this using output buffering, few examples here
I am assuming you are posting the form back to the same right?
Maybe submit the contact form to another page for example contactus.php and once its been successful place your header location code into that OR you could use the jquery form plugin (submit() function I have used) which runs in the background and then you could maybe jquery scrollTo() your hashtag.
Go got option 1 and if you have time then play with the jquery version maybe.
Currently I'm doing this in two steps:
1.post it to ask.php
2.after inserting it into database,use header("REFRESH: 0;URL=post.html") to jump to the result page
But how to do it all in one step,say,like SO here?
SO does it using Ajax. But for the easier win, why not just use header('Location: http://example.com/post.html') instead of a refresh?
It happens using ajax, I'm guessing.
-User types post, hits submit.
-Post content is sent via ajax to the server where it tries to save it.
-If it is saved:
The post is added to the page using javascript and some pretty animations and all the various listeners are added to the clickable elements.
-If not:
Show some error.
I'm sure there's more to it than that, but that's probably the basic idea.
Instead of a that refresh header, after processing the POST request, tell the client to view the result with a Location redirection header
header("Location: http://www.example.com/post/$post_id");
That kind of thing is done with Ajax. Using javascript to request small(er) amounts of data from the server, then updating the page, bypassing a full page request/refresh.
Here's a few libraries that may help get you started with Ajax and PHP:
XAJAX
Zend_Json_Server (more complex)
PHP Ajax Example at W3Schools