Hi,
I’m having difficulty in solving this one.
Basically I have a web page with a search box and an iFrame where the full dataset is loaded.
What I am trying to do is when the search field is populated and the user clicks search modify the src element of the iFrame to include a get variable. Then reload the iFrame so the new results will load.
Hope that makes sense.
I’ve tried various combinations and nothing appears to work. It is only the master page that reloads.
The jQuery to detect the click on the search box outside the frame is written into the iFrame file because other functions are.
Code to detect search click and get field value
The commented items below are the things I have tried and none have been successful.
$("#searchButton",top.document).click(function() {
var sTerm=$("input#sTerm",top.document).val();
target=window.parent.document.getElementById('frameSkills');
alert(sTerm);
//parent.document.frames[0].location.reload(true);
target.hide();
window.location.reload(true);
//target=window.parent.document.getElementById('frameSkills');
//target.src='skills_combine_frame_search.php?sTerm='+sTerm;
//top.frames[0].location='skills_combine_frame_search.php?sTerm='+sTerm;
//window.location.src='skills_combine_frame_search.php?sTerm='+sTerm;
//window.location='skills_combine_frame_search.php?sTerm='+sTerm;
});
Search form and iFrame
<div class="search" style="display:none;">
<form id="form1" name="search" method="get" action="">
<input type="text" name="sTerm" id="sTerm" value="<?php echo '';?>"/>
<input type="submit" name="searchButton" id="searchButton" value="Search" class="button-pos" />
</form>
<span class="clear"><a href="javascript:void(0)" class="searchReset" title="Clear Search">Clear search</a> <a href="javascript:void(0)" class="searchReset" title="Clear Search"><img src="../images/htimages/clear-sml.png" width="12" height="12" alt="Clear" /></a></span>
</div>
<div align="center" id="loadingGrid1">
<img align="middle" alt="Loading..." src="../images/htimages/ajax-loader.gif"/><br/>
<font size="-2"><b>Loading...</b></font>
</div>
<iframe width="434" id="frameSkills" onLoad="calcHeight('frameSkills');" src="skills_combine_frame_search.php" scrolling="no" frameborder="0" height="1" style="display:none"></iframe>