I am building a currency switcher and integrating it in my site where users can switch between 2 currencies. its a reservation site that has a reservation form positioned on the left with the booking content taking up the rest of the page

The prices on the site are defaulted/set to one currency in the backend(USD) and the user will have the ability to choose between this and another currency. 

When the user selects the other currency, the page reloads and prices are set to this currency. Now, the small issue occurs when a user changes input on the reservation form. lets say a user wants to change the checkout date, once they do this, the content on the page reloads using ajax. what is happening is: if the user has switched to the other currency and makes a change on the reservation form, the default currency(USD) loads for like a few seconds and is then replaced by the other currency. so picture this, you've switched the currency from the default and you modify your reservation form by changing one of the inputs, as the page ajax-reloads, you're presented with the default price momentarily then the correct(the currency you are using) displays

So in short, looks like the div that carries the price first loads the default currency then switches after(takes like 1-5 seconds). this is not really ideal, can't the div just load the correct currency at once?

here's the code handling this:

```
//there's a function that checks currency...
    if(currency_param == "KES")
    {
        if (window.XMLHttpRequest) 
        {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            var xmlhttp = new XMLHttpRequest();
        }
        else 
        {
            // code for IE6, IE5
            var xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) 
            {
                    area.content_area.find('.gdlr-tail-currencyprice').html(this.responseText);
            }
        };
        var result = data.content.match(/\$[\d\.]+ \/ [^<]+/gi);
        var newArray = [];

        $('.gdlr-tail-currencyprice').each(function(index, el)
        {
            var num_price = parseFloat(result[index].replace( /[^\d\.]*/g, ''));
            newArray.push(num_price);
        });

        newArray.push({currency_param});
        newArray = JSON.stringify(newArray);

        xmlhttp.open("GET","switchcurrency.php?q="+newArray,true);
        xmlhttp.send();
       }
    }

```

`switchcurrency.php` simply takes the amount passed to it and converts to the required currency

the price is carried in the `gdlr-tail-currencyprice` class and as described above, this is the problematic part. loading the default value, then a few seconds later, displaying the correct value. this part handles that:

```
area.content_area.find('.gdlr-tail-currencyprice').html(this.responseText);

```

Hope my long post has made my question clear: what could i be doing wrong or if not, is there a way to replace div content completely with the new value supplied?