I would like to dynamically change the picture gallery presented to a visitor based on the country he/she selects from a list. I would like that gallery to be displayed using FIA Grand Gallery Rotator banner Skin. Using JQuery AJAX I'd like to pass the country variable as a parameter to a server side PHP function then have that function execute the correct shortcode and return that as data via ajax so I can place it in a <div> in my current page.
I have managed to get the parameter to the PHP function and have it recognized. The shortcode, however generates fatal error alerts when it tries to execute the PHP do_shortcode function because it does not recognize the function.
Client code: passes a variable countryvar with value country to the PHP file and inserts the return value into a div
<script>
function grabgallery(country){
var url="./wp-content/themes/zorayatheme/grab-func.php";
$.post(url,{countryvar:country},function(data){
$("div#right").html(data).show();
});
}
</script>
Server PHP code
<?php
$countryvar=$_POST['countryvar'];
<?php echo do_shortcode('[grandbanner xml=#countryvar]');
?>
You can see my website at http://112.inmotionhosting.com/~zoraya5.org/wordpress/ On the products page you will see the country list and the FIA rotator banner gallery I would like to change dynamically. I am an ASIC designer not a programmer so please forgive the ignorance. I've tried researching the topic and there is a lot of good material on AJAX/JQuery but most over my head programmatically. There must be a simple alteration to the code I've attached that will work.