ajax calls with out redirecting the page - php

my process is to call a web service before loading a page that contain a form with some fields ,the fileds organisation,location,building in the form are obtained from the response from the web service call.the fields organistion,building and location are drop downs ,the organisation is selected ,then location is selected after that building is selected,now there is a filed called expiry date ,inorder to get the expiry date i must call a web service by giving the location name as the json input to the web service ,i would like to stick on the same page and get the response for the expiry date,i thought that i will use ajax for that ,i really dont know how to do it can any one help me ? I got some code here can any one redirect me to do some thing done with this code
$.ajax( {
type:'Get',
url:'http://mysite.com/mywebservice',
success:function(data) {
alert(data);
}
})

I assume you want to call a php script to get your results.
Write your php script exactly like you would for generating a normal web page except that instead of outputting (echo) HTML, you output XML or JSON.

Related

retrive from DB without click any button using onfocus

hi I have some problem with my code!
I have a textbox when the user write in this text box I want to retrieve from DB directly without clicking any button.
then some of my form will completed after writing in this textbox.
my JS code :
function centerIDfocus()
{
var id = document.getElementById("centerID").value;
var data = <?php $center_ID = echo mysql_num_rows(mysql_query("SELECT * FROM 'examcenter' WHERE 'id' = '".id."'")); ?> ;
}
window.onload = addEventsToHTML;
in my form:
<input name="centerID" id="centerID" onfocus="centerIDfocus();">
and that’s not working!
any ideas red face
You mixed 2 languages - javascript is run on client side and php on server side.
What You need to do is:
var data = function_to_get_data(); // in javascript
in that function call ajax request to the address of your php script - and only in that php script call your database to return desired data
You're PHP code will only run once, when the pages is loaded, after that it won't run again because there's nothing happening on the server side. If you want to run it each time you get the focus then you should be using AJAX.
Take a look at AJAX gets, I'm pretty sure that's what you want:
http://api.jquery.com/jQuery.get/
It is rather hard to know what you are intending to do, but...
My guess is that you are confused about when things happen and when "onfocus" is fired.
PHP is run on the server when the page is being constructed. In contrast, javascript is run in the browser, either after the constructed page has arrived (onload) or in response to a user click or other event such as onfocus.
Thus there is no way for the javascript (in the browser) to drop into PHP (on the server). For the same reason (and security) it is impossible for javascript to talk directly to the database.
There are two approaches you might take to do what (I think) you are attempting to do.
You could create a javascript array in PHP, indexed by ID, and containing all possible IDs and their data. Use PHP to read the database, and then echo the javascript to define the array. This would become part of the page sent. Then, in response to the event that means you want to fill the field, you extract the data from the array, and put it where you want it. This would be slow for the page to load, but very quick response to the click that triggered the change.
An alternative is to use ajax. The easiest way is to use jquery to send a GET request to the the server requesting the data related to the ID. The server must respond to that URL by extractign the ID, reading the database and generating the reply. I recommend using JSON. Then, when the jquery request returns, the javascript code can move the data from the JSON into your field. This would make the initial page lighter, but would have a fetch delay to the triggering click.
However I think you may also have an issue with the on-focus event. This fires when the user moves the cursor into the field, before they have entered any data. At that point it will contain the data that was set in the HTML. If you can set the ID at that point, you can also set it to the data from the database.
I think you want two fields - one for the ID and another for the looked up data. Then you run the javascript on the onblur event on the ID field.
Hope that helps.
use something like:
$('.centerID').keyup(function(){
var val = this.val();
var url = '/do.php'; // url to a php script
var val = 'action=checkValue&value='+val; // send it the value
$.getJSON(url, val, function(data){
// Something to do when you get the data back
});
});
then just create a php script that checks the database and returns a JSON answer and then do as you please with it.
BTW - I'm assuming you are ok using jQuery. You can apply this to your JavaScript too.
I used keyup() as one example but you can appy this to keydown(), click(), focus(), focusout() etc...
I have a do.php script that contains a switch statement with the possible value of action= and returns JSON. Everything from logging in, registering, activity monitor, to updating a database field without leaving the page.

Sending PHP variables through AJAX

I'm currently designing a system working with steps (like an airline booking, where you pass on various steps to buy a ticket) and these steps are being done via AJAX. So, the index.php file is the sole file loaded and the pages' are being loaded via AJAX on the main div.
The system is working as it should be, but I need to ensure the variables' passing on the subsequent loaded pages, based on the data entered before. E. g.:
I have a form on page 1 where the user enter some data, like his name and country. When clicking submit, the button triggers an AJAX request where the result is the content of page 2, being loaded on the div. But I need that the page 2 have the variables filled with the values on page 1. Page 2 have another form with new data and another submit button. When clicked, it requests via AJAX the page 3 which have to contain the variables at pages 1 and 2. And so on.
Which is the smartest way to do that? Using PHP session? Passing via $.get or $.post?
I request an opinion of you.
Thank you very much.
If you are using a library like jQuery - the most easy option is to pass the variables as POST or GET parameters, see: http://api.jquery.com/jQuery.ajax/
For example:
$.ajax({
type: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
You can change the type to be GET or POST depending on your needs and the data key should hold the data you wish to send. (in JSON format)
On how to pass the php data as JSON to the js, see passing php variable
I would go for the
$.post
option of jQuery.
http://api.jquery.com/jQuery.post/
Pass all the variables to your PHP script, and let that PHP script generate the new content of the div (next step) with all the variables (new ones + the ones from the post) filled in. If there are variables that should be transferred but not shown to the visitor, use hidden fields to transfer them.
BTW: to get the contents of all the inputs in your form via jQuery, use
serialize()
http://api.jquery.com/serialize/
They work together like a charm!

How to get the value of a field in php form on the same page

I am designing a web page. I want to have the options(of another drop-down list on same page) based on the selection made by the user.
I am providing a drop-down list to the user called Application. Depending on the Application, I want to query sql and want to show only the options that are valid for selected Application in another drop-down list.
I want to get the value of Application on the same page (one that user has selected) and by getting that value will query the sql accordingly.
Once the page is loaded, the PHP cannot do anything more.
You cannot use PHP based on user interaction.
The only way to do so is through javascript.
Using ajax, you can retrieve data from a certain URL on your javascript.
A procedure would be like this:
User selects something
The javascript(ajax) loads a URL
In that URL, use your PHP to fetch a certain query
The result would be sent to javascript, so display the result.
Here's a good page explaining ajax:
http://wabism.com/ajax-tutorial-with-jquery/
you have to call an ajax function on the onchange event of dropdown that gets data from database.
ajax is your friend. Either you can use raw javascript or jquery( easier ). Your steps would be..
1. Write a php code block, most probably a function, which takes the selected application option from post, queries the database and outputs the result.
2. In your current page, write a js code that fires the ajax request each time user selects an option. This ajax will send the selected option to the php script by post method and u can grab the output upon the success of the request.
$('.selectBox').on('change', function(){
// do your ajax here.
});
something like that..

Data is being written and called out of sync after POST

I'm calling a view after an AJAX POST action. But I'm loading the view and calling Database data out of sync with the data being written. When I load the page, I look into the database and see the data there but it's not being rendered on the page. (I tried sessions and got the same problem). In order for the view to actually render the data from the database, I need to actually refresh the page. Same thing with the sessions, I need to refresh the page in order for the sessions data to render. Is there a common reference to this kind of issue? I read about POSTBACK, is this something I need to look into further? It's basically a strange sync issue where the data is not being generated until I refresh the page and re-load it.
jQuery ajax call are async, by default. The javascript code continue without waiting for the return from the server.
So let look at :
$.post('source.php',function(valueFromPHP){
alert(valueFromPHP)
});
alert('Hello world')
In the previous example Hello Wold is alerted first, then the value from php.
If you want to insert the return value from php into your page you need to place all your code into the sucess function :
$.post('source.php',function(valueFromPHP){
alert(valueFromPHP)
alert('Hello world')
});
In the second example the value return from PHP is alerted first, then Hello world
So if you want to render the data received from php make sure you place your code inside the success function. Normally that is where we get error while working with jQuery ajax.
Let me know if it help!

jquery permanently alter html

How would I go about permanently add a class to a html element using jQuery.
I am planning on building a image gallery that is sorted into types/categories using the jQuery sorting plugin. I want to add a dropdown box below each image that allows the user to change the type (add/remove class) which permanently changes the HTML for next load. How would I go about this?
EDIT: Ok so from what I can put together I should use this approach:
Jquery add/removes class.
Send full HTML of source via AJAX request.
PHP writes full HTML to file or is there a way to replace only a particular part of a file in PHP?
You could use jQuery's ajax functionality to send back edited HTML to the server to be stored in your database after the user has made their changes.
You can then build up the relevant parts of your page from your database on the next load.
$('#mySelectBox').change(function(){
$.ajax({
url: "updateHtml.php",
data: $('#myEditedHtmlContainer').html(),
success: function(){
// do something on success
}
});
});
You first need to know the distinction between Client side scripting and Server side programming.
The server will return you a set of html on each response which is generated by the server side php in your case.
If you want to modify a class on a certain element, and you want this change to survive the next generated server side php response, you need to somehow inform the server of your change.
There are several options to send data from the client side to the server side.
Store the value in a hiddenfield
Make an ajax request and store the value somewhere on the server so it is aware of this change at the request.
Add it to the querystring of the url being requested.
One solution is to store user decision in cookie. The during very page load, you'll need to check for the appropriate value in the cookie and based on it apply the CSS.

Categories