Ajax call without reloading ?

[saynotojava]

So i have two files, one with ajax call and second with content which is called. And i get what i need(displaying session variable so in this case), but only when i manually refresh page, while i should see result immediately after i load file with ajax call for first time. Is that possible?

Test.php

<?php

session_start();
?>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$.ajax({
    type: "GET",
    url: 'ab.php',
    data: {name: 'Wayne', age: 27, country: 'Ireland'}
    
});

</script>
<?php
echo $_SESSION["so"] ;
?>

ab.php

<?php
session_start();
$name = $_GET['name'];
$age = $_GET['age'];
$_SESSION["so"]='kukulele';
?>

 

[requinix]

I think you're missing some basic principles about... well, physics. You have the page outputting the session value when it loads, right? Then you do an AJAX call to change the value. It won't somehow go back in time and change what the page outputted previously.

What you have to do is put the current (at the time the code ran) session value into some sort of HTML markup that you can reference. Like

<span id="value"><?php echo $_SESSION["so"]; ?></span>

Your AJAX does whatever, but the script it runs (ab.php) must return something. The easiest option would be to output the new value,

<?php
session_start();
$name = $_GET['name'];
$age = $_GET['age'];
$_SESSION["so"]='kukulele';
echo $_SESSION["so"];
?>

The AJAX receives that value through a callback,

$.ajax({
    type: "GET",
    url: 'ab.php',
    data: {name: 'Wayne', age: 27, country: 'Ireland'},
    success: function(data) {
        // ...
    }
});

As everything stands, "data" will be the output from the script. So "kukulele". You then insert that value into that markup you created earlier.

document.getElementById("value").innerHTML = data;

 

The page doesn't magically update with new information automatically. You have to figure out the new information yourself and update the page yourself.

[saynotojava]

So in shortly,  not possible ?

[requinix]

...

I guess not.

[Psycho]

On 10/8/2018 at 3:54 PM, requinix said:

...

I guess not.

To be clear, Requinix is being sarcastic. It is absolutely possible, you just aren't understanding what he was stating in the first response. Here is an analogy that might help.

Think of a web page like a "printout" from a printer. So, let's say you create a document on your computer and print it out - then you change some content in the file on your computer. Would you expect the content on the already printed page to change? Of course not! Now, imagine that JavaScript can modify the computer document AND/OR modify the printed page like an eraser and pen. So, in your currently code your JavaScript is only changing the value of $_SESSION["so"] in the electronic document. You would need to refresh the page (i.e. create a new printout) OR modify the code to change the content in the existing output.

Requinix already provided an example of how to do that, but let me explain in simple terms.

1) When creating the output for the page create an element on the page that can be referenced in the JavaScript

<span id="value"><?php echo $_SESSION["so"]; ?></span>

2) Run your javascript to update the value to be changed on the page. In this case, you would have the JS use an AJAX call to a page that updates the session value and returns that value to the calling AJAX script in the original page.

3) The AJAX script then takes that return value and modifies the element created in step 1. In fact, the JQuery framework has a simple method for doing this without needing to use the full AJAX method. .load()

[saynotojava]

Finally figured out what i was doing wrong- i need to use echo only, not session, since it is ajax call is the one which handle data back and forth. Since session is method what is used in PHP to handle data between pages, i assumed same for javascript but it was wrong assumption. But there is still one problem remaining - for some reason, ajax call is not working on https protocol . I found possible solution here: https://serverfault.com/questions/891980/ajax-post-not-working-on-https-ssl-nginx , but it's not working.

[saynotojava]

Figured out that one as well - i had jquery include in http url, and for some reason firefox is blocking js load in case of protocol mismatch.