I have a HTML/PHP form using using post to send form data to a script php file. I want to send the data with out the page reloading upon clicking the submit button.
I am wondering how do implement AJAX to allow this functionality.
I have a good grasp of Javascript but have never used ajax technology.
If this question is beyond the scope of this Q&A if anyone could please point me in the right direction to a good tutorial That will allow me to implement this technology with out having to spend a couple of days learning how it all works. I am working with a very short deadline.
Cheers.
If this is your first AJAX experience, I recommend a good toolkit like jQuery.
See: http://api.jquery.com/jQuery.ajax/
you can serialize and then post form data with jquery and optionally handle the response.
the following is an example from jquery's documentation http://api.jquery.com/jQuery.post/:
$.post("test.php", $("#testform").serialize());
You could use this jQuery plugin:
http://www.matiasmancini.com.ar/jquery-plugin-ajax-form-validation-html5.html
It also has form validation and works on IE6.
basically, you can do no wrong by using jquery javascript library with all the cool nifty functions ready, including ajax function which allows you to do ajax call with something as simple as $.post().
but if you're looking for a step by step tutorial, then you might want to look at this.
Related
I have been using xajax, as a server side ajax class (all the ajax response is handled with php code) for the longest while.
However I lately fell in love with jquery, and am using it for a project. I would like to know if there is a server side class (like xajax) that handles jquery ajax? or does anyone know of a tutorial/example i can use to create my own?
Thank you in advance
Here are two alternatives:
http://phery-php-ajax.net/
https://github.com/spantaleev/sijax/
Updated link for phery library
Jquery(javascript) is a frontend/public language. Of course you will need to verify any data sent via javascript, on the server-side and/or both on the front-end.
jQuery has a plethora of options concerning ajax. ( $.post/$.get/$.getJSON/$.ajax ). these send/retrieve data via a HTTP request.
If you have leaned towards jQuery, why would you want a php-ajax library? You will do your input validating server-side anyway!
jquery/ajax will send your data either with a post or get request, you just grab it with php and verify.
For a user-friendly experience I would suggest both frontend/backend validating.
Hey guys, I just created a news feed and I was wondering if there was a way to auto-refresh the feed with javascript or php, sort of like facebook, without refreshing the whole page. Thanks in advance.
You need to use a technology called AJAX to achieve this. As your question is not very specific the answer can't be either I'm afraid, but the general idea is a javascript running in the browser polls the server every couple of minutes for data, and the server returns some (XML in true AJAX, JSON, a HTML fragment, etc). The script then processes the data and modifies the DOM based on the results of the processing.
And to learn ajax i would recommend using jquery rather then reinventing the wheel. this tutorial will get you started http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery
also for the php side this will be helpful http://www.w3schools.com/php/php_ajax_intro.asp
Can someone kindly put a good & simple example of JQuery with ajax to send json to a php script. I need to send json to a php script when page loads. I mean will be lot easy for me if the link contains example using $(document).ready(function()... I need a simple example as my problem is not big, & I need a simple solution. Just POST json to php.
thanX a lot in advance.
I like this visualJquery reference site a lot, sometimes more than the official api
http://visualjquery.com/
I believe you want to use the function $.post()
simple link to start from example :
http://www.factsandpeople.com/facts-mainmenu-5/26-html-and-javascript/89-jquery-ajax-json-and-php
A good place to start is the jQuery documentation.. They even have an article specifically on doing ajax posts: jQuery.post()
I need to have a button that calls a php function to resort displayed data from the db. How the heck do I do this? I just found out that because php is server side this sucks. So any help please?
You can't directly call a PHP function pressing a button for the reason you stated yourself. In order to execute PHP code you need to make a new request to the server. The request could be made to another script or to the same that produced your page by calling it again with some parameter to control its behavior.
Alternatively, you can call a PHP script via Javascript (AJAX) so that you can handle its output and update the page without a full reload.
The second option is neater but more complex, the first one might look less pleasing to the eye, but works regardless of the user's browser having Javascript enabled or not.
It should probably sit inside a form field, something like this:
<form action="YOUR_PHP_SCRIPT.php">
<input type="submit" />
</form>
When the submit button is pressed, the action for the form is triggered.
There may be a swathe of other things you'll need to take into consideration from this point onward, but this is a start.
Yeah because PHP is server-side, you have two options. One is to make a button that calls the PHP script and renders a completely new page. The other is to use AJAX (asynchronous javascript and XML) on the page, see jquery.com for a good way to do that, and only re-render the table that is displaying data.
This is a job for ajax, as others mentioned. If I may elaborate, if you're starting out, I HIGHLY recommend using a javascript library to make your life easier. With prototype, here's what your button might look like:
<input type="button" id="button_foo">Button</input>
Here's what your javascript might look like:
$('button_foo').observe('mousedown',function(e){
new Ajax.Request('handler.php',{
method:'post',
onSuccess:function(t){
$('table_bar').update(t.responseText);
}
});
});
This may seem a little daunting at first, but I think basic js has a pretty manageable learning curve when using a library. The above code would take whatever handler.php outputs, and replace the contents of an element with and id of "table_bar" with the returned html.
if you do decide to use prototype, the docs are really helpful and easy to understand, and there is a really excellent book by pragmatic press on the subject that'll have you understanding it very quickly.
Hope that helps!
what Yacoby said, you'll need to use AJAX to make the call to the server, or something like this: http://www.ajaxdaddy.com/demo-sorted-table.html
What should I look into to accomplish this.
When you select an input field some text to the right shows up.
For example: https://twitter.com/signup
Anyway i need something like that works with PHP. What should I look in to?
And also How can you query the database and not have to reload the page to see result? For example i have seen on many sites registration you can check if the a username is used without the page reloading. Dont know how to explain better.
Thanks
Like Arkain said, they are making the text appear with JavaScript. PHP is server-side only, meaning it can't make any changes to the page once it has loaded.
You can however, call a PHP script dynamically (to check if a username is registered) using a technique called AJAX.
I'd look into Ajax using jQuery. I had done some things with ajax before trying jQuery but jQuery made it so easy that I found it enjoyable to keep implementing things using it.
You need to use JavaScript, look at this source for instance, for some beginner tutorials.
Learn JavaScript. You can start with jQuery (a pre-made javascript toolkit of functions that help you do many things without reloading the page).
Google for a jQuery Ajax tutorial.