Question

Now I know that I am at risk here of asking a duplicate question, however I don’t really know what to search for because I am a complete AJAX jQuery noob. Believe me, I have tried searching what I think is the obvious, with no luck so please go easy on me.

I have a php wordpress site which shows prices in GBP as default. At the top, is a select box with onchange="this.form.submit()" which allows the user to change the default currency that all prices are quoted in.

<form method="post" action="">
    <select name="ChangeCurrency" onChange="this.form.submit()">
        <option value="GBP">GBP</option>
        <option value="USD">USD</option>
        <option value="EUR">EUR</option>
    </select>
</form>

On the home page, are several, what I call “shortcode widgets”, each one containing products and price tables. A dashboard if you like.

How it currently works (inefficient):

1. User changes select.
2. Form submitted
3. Homepage reloaded with updated prices in selected currency.

This is not good, because whenever somebody changes currency, the whole page is reloaded (this takes time, transfers approx 1mb without caching, not to mention unnecessary load on the server).

What I want (more efficient):

1. When the select box is changed, I wish to asynchronously post the form which changes the currency session variable.
2. Each “shortcode widget” is updated one by one without having to reload the entire page.

Is this something that jquery can do? where do I start?

Just in case it makes any difference so that you can see what I mean, here is the URL so that you can see what I am talking about… http://bit.ly/10ChZys

PART 2:
I have used jQuery and ajax to update the fixTable thanks to a mashup of answers below… I am using session variables to store the users choice, that way, if they return to the site, the option will be saved.

I am having problems with my code because the session variable stored within http://goldealers.co.uk/wp-content/plugins/gd/tables.php?currency=GBP&table=fixTable appears to have a different session_id to the user’s session id because the option is no longer stored.

Is there a way of telling the server that they are one and the same session?

SOLUTION
I used Ribot’s Solution to start with which worked and solved the initial problem, then extended with NomikOS’s solution…

Answer 1

Yes, jQuery can do it using ajax.

First of all, when using ajax, you don’t have to post a form to get the data. Ajax in jQuery will load the text data of an url.

You may start by giving your select an id (here id=”changeCurrency”) and:

$("#changeCurrency").change(function(){
    currency = $('#changeCurrency option:selected').val() // get the selected option's value
    $("#some_div").load("someurl.php?currency=" + currency);
});

Now read up on jQuery and ajax for what kind of ajax call you need to do that suites your needs the best.