suo suo - 2 months ago 20
Ajax Question

php - reload current page after dropdown onchange action

I have a dropdown element in my header file. The dropdown contains 2 currencies that I'd like users on my site to choose from:

<div class = "currencyswitcher">
<span class = "currencylabel"><strong>Currency Switcher</strong> </span>
<form method="post" id="switchcurrency" name = "switchcurrency">
<select name = "currency" id = "currency" >
<option value = "USD"> USD </option>
<option value = "KES"> KES </option>
</select>

</form>
</div>


This is processed by an ajax script which posts the selected element to another file:

<script>
$(document).ready(function() {
var url = "<?php echo file2.php;?>";
$('#currency').change( function() {
$.ajax({
data: $('#switchcurrency').serialize(),
type: "POST",
url: url,
success: function(response) {
alert(response);

}
});
});

});
</script>


now, in my file2.php I want to pass the value from my dropdown and append it to the url of the page i'm on i.e. if i'm on the page sitename.php/page1 then after selecting from the drop down, the page refreshes to sitename.php/page1?currency=USD and if i were on sitename.php/page2, upon selection, page refreshes to sitename.php/page2?currency=KES and so forth...

this is my file2.php(the file ajax is posting to)

if(isset($_POST["currency"]))
{
$key = key($_POST);
$value = $_POST["currency"];

$params = array_merge($_GET, array($key => $value));
$new_query_string = http_build_query($params);

$url = (empty($_SERVER['HTTPS'])?"http://":"https://") . $_SERVER['REQUEST_URI'] . "?" . $new_query_string;
var_dump($url);
}


From the above my dump returns the url of my header page i.e

var_dump($url); = mysiteurl/header.php?currency=USD


So here's my question: with my dropdown in the header(therefore called on all the pages in my site), how do I enforce it such that upon selecting an option, the current page I'm on refreshes having the selected option appended to the url?

Answer

Use the .done callback in your ajax to handle changing the window.location.href property (of which you can just append your currency parameter key/value pair):

$(document).ready(function() {
    var url = "<?php echo file2.php;?>";
    $('#currency').change( function() {
       $.ajax({ 
           data: $('#currency').serialize(), 
           type: "POST",
           url: url, 
           success: function(response) { 
               alert(response);
           }
       }).done(function() {
           window.location.href = window.location.href + "?currency="+$('#switchcurrency').val();
       });;
    });  
}); 

Further reading:

http://api.jquery.com/jquery.ajax/

https://developer.mozilla.org/en-US/docs/Web/API/Window/location