Sending Data From A PHP Script Back To A JQuery AJAX Request

Question

I am creating a web application and have the following problem.

In my application the user is working within a single page, they draw on a canvas. There is a single button called "Save". This takes the users ID and whatever they have created in the canvas and sends it to a database. This all works fine. The save function resemebles this:

$.ajax({
    url: "/database/write.php",
    type: "POST",     
    data: { 
        docName: name,
        docData: document_Data,
        docMode: "new"
    }, 
    success: function(html) {
        alert("Successfully Saved NEW document");
        set_Mode();
    },          
});

The above AJAX request does send the three values to the PHP script which then successfully creates a new document in the database, what i need to do now is change the application mode from saving a new document to editing the previously saved document. This means that when a user saves again, they will write to the same row, overwriting the previous version of the document.

When i send the data to the write.php it does write the data to the DB and the queries the database for that inserted document and retrieves its unique document ID. with that ID the application can the select that document and overwrite it. To retrieve the document ID from the query, i use the following code in write.php

write.php

$_SESSION['DOCUMENT_ID'] = $DOCUMENT_ID;

This $DOCUMENT_ID is the document ID retrieved from the SELECT query. The script then finishes and transfers control back to the main application page.

Back on the application page i try to retreive the value but it doesnt seem to work. I can retrieve $_SESSION values that were set when the user first accesses the application (id) but now values set by the write.php (DOCUMENT_ID) page. For example, below shows the function called after the AJAX request has been successful:

function set_Mode()
{
    var PHPvar_01 = <?php echo($_SESSION['id']); ?>;
    alert(PHPvar_01); //WORKS FINE

    var PHPvar_02 = <?php echo($_SESSION['DOCUMENT_ID']); ?>;
    alert(PHPvar_02); //DOES NOT WORK.          
};

How should i go about sending data retrieved from the PHP query script to the application, because $_SESSION does not seem to work here.

Thanks for any feedback.

score 1 · Answer 1 · answered May 08 '12 at 18:16

In your write.php, you should echo the $DOCUMENT_ID at the end of the page, and then your success function will receive that in the html argument. Then you should call set_Mode with the html variable that was passed into the success function.

You can't call set_Mode until after the page is loaded, and after you know the document ID. You are writing the document ID into the set_Mode function before you know it, in the initial page load.

score 1 · Answer 2 · answered May 08 '12 at 18:18

Well, your PHP code gets executed only once upon the initial loading of the page. The server detects a request to your site, loads the PHP document internally, parses it and delivers it to the client.

Therefore, when the AJAX call returns, the entire PHP script is not executed again, because the user didn't request the whole page but only sent a single request to your write.php.

Your write.php script must return the $DOCUMENT_ID in some way, e.g. echo it directly, then the success handler in the jQuery AJAX call can access it via the handler's parameter (see jQuery documentation).

score 1 · Answer 3 · answered May 08 '12 at 18:18

You can't access variables on the server when the page is already loaded in the users browsers, other than with ajax.

You need to send something back, and in PHP all you have to do is echo something, and capture it in the success function of your Ajax call.

at the end of /database/write.php, do

echo $_SESSION['DOCUMENT_ID'];

and in JS

$.ajax({
    url: "/database/write.php",
    type: "POST",     
    data: { 
        docName: name,
        docData: document_Data,
        docMode: "new"
    }, 
    success: function(data) {
        alert("Successfully Saved NEW document");
        set_Mode();
        if (data == 'something') {
           //do something with the returned DOCUMENT_ID stored in the data variable
        }
    },          
});

score 1 · Accepted Answer · answered May 08 '12 at 18:18

1

at the end of write.php :

echo json_encode(array('id'=>$_SESSION['id'], 'DOCUMENT_ID'=>$_SESSION['DOCUMENT_ID']));

in your ajax call :

success: function(data) {
    data = eval('('+data+')');
    alert("Successfully Saved NEW document");
    set_Mode(data.id, data.DOCUMENT_ID);
},

this should do the tricks !

answered May 08 '12 at 18:18

Keil

222
2
8

1

I agree with Keil, this will do the job. But I would suggest dont use `eval` its a bad practice. Rather while making ajax call pass the parameter `dataType: 'json'` which will make sure that the data you receive in success is json – swapnilsarwe May 08 '12 at 18:22
please don't say eval is a bad practice without explaining. In this case, the source data is trusted (not resulting from some fifo user input) so there is no need to freak out. If you want to be safer, you need to htmlentities you response server-side, and window.JSON.parse() the data client-side (some browser does not support it) – Keil May 09 '12 at 01:06
1

I understand that the source data is trusted and hence it seems to be fine using eval. But being a developer I wont do the things just because I think the source is trusted. I believe in prevention than cure... There are ample amount of articles available on web explaining why eval should be avoided... Please go through it... For eg: [Why is using the JavaScript eval function a bad idea?](http://stackoverflow.com/questions/86513/why-is-using-the-javascript-eval-function-a-bad-idea) – swapnilsarwe May 09 '12 at 04:18
While converting the string to JSON, I will prefer using the `parseJSON` function from [jquery.js](http://code.jquery.com/jquery-1.7.2.js) which is very small and safer than blindly using eval – swapnilsarwe May 09 '12 at 04:20

Sending Data From A PHP Script Back To A JQuery AJAX Request

4 Answers4