I have a HTML/PHP form with multiple select boxes. On submitting the form, I call a jquery function to create a query string with variables from the select boxes and some other variables, and pass this query string to jQuery Tools Overlay to load it externally.
The overlay loads properly and shows the page with the proper querystring. The problem arises when i close the overlay, change some select box values and resubmit the form. The external page still gets loaded, but the querystring is not refreshed, it remains the same as it was on the first instance of opening the overlay.
The following is my jquery code:
$(function(){
$('#form').submit(function(){
. //code to get $str which contains the querystring Example $str="page='abc'&sub='xyz'"
.
$go='displaygroups.php?'+$str;
alert($go);//just to check if querystring is correct.
dispgrps($go);
return false;
});
function dispgrps($go){
$("#overlay").overlay({
// custom top position
top: 100,
// some mask tweaks suitable for facebox-looking dialogs
mask: {
color: '#d1eaf1',
loadSpeed: 10,
opacity: 0.9
},
// load it immediately after the construction
load: false,
onBeforeLoad: function() {
// grab wrapper element inside content
var wrap = this.getOverlay().find(".contentWrap");
// load the page specified in the trigger
wrap.load($go);
},
onClose:function(){
$('.contentWrap').html('Loading...');
}
});
$("#overlay").overlay().load();
}
});
if the first time i submit with page='1' from the select box, then even on changing the value of select to say page='2' and resubmiting the form, the external page displaygroups.php still reflects page as 1.
I am simply echoing the value on displaygroups.php for testing:
if(isset($_GET['page'])) echo $_GET['page'];
The overlay css element is
<div class="apple_overlay" id="overlay">
<!-- the external content is loaded inside this tag -->
<div class="contentWrap">Loading...</div>
</div>
Please help. Thank you.
EDIT: Couldnt figure it out, so i have changed the code to make it a link instead of form submit. It works now.
