I am using searchbox to pick locations/places via webservice.
The searchbox is only shown when the location is to be updated, so after a location has been selected from the dropdown, it is hidden again. This works fine most of the time, but occasionally the search returns too slow and a selection has been made on the dropdown before the latest search returns and the searchbox is hidden and just the location name shown. Then all of a sudden the dropdown is shown in the top left corner of the browser. So this is not yet fit for user consumption.
How can I avoid this "late" dropdown showing or otherwise address this?
Current code (not yet extravted as user control, which would be the next step):
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadCodeBlock ID="RadCodeBlockProfile" runat="server">
<script type="text/javascript">
function ShowHide(showMe, hideMe) {
document.getElementById(showMe).style.display = "block";
document.getElementById(hideMe).style.display = "none";
$find("<%= rsb_location.ClientID %>").get_inputElement().value = '';
}
function rsb_location_Search(sender, eventArgs) {
var value = eventArgs.get_value();
if (value != null && value != "0") {
document.getElementById('<%= this.FindControl("lbl_CurrentLocation").ClientID %>').innerHTML = eventArgs.get_text();
ShowHide('locPickShow', 'locPickUpdate')
}
}
</script>
</telerik:RadCodeBlock>
<div>
<h1>Test-bed of new location picker</h1>
<div style="margin-top: 30px">
<div style="width: 120px; float: left">
Your Location:
</div>
<div style="float: left">
<div id="locPickShow" style="display: block">
<asp:Label ID="lbl_CurrentLocation" runat="server" CssClass="labelLink" onclick="ShowHide('locPickUpdate', 'locPickShow')" ToolTip="click here to change the location">not specified</asp:Label>
</div>
<div id="locPickUpdate" style="display: none">
<fieldset style="border-radius: 10px">
<legend>update location</legend>
<div style="margin-right: 20px">
<telerik:RadSearchBox ID="rsb_location" runat="server" Skin="MetroTouch" MinFilterLength="2" EmptyMessage="type and select from options"
Width="300px" EnableAutoComplete="true" OnClientSearch="rsb_location_Search" DropDownSettings-Height="150px" DropDownSettings-Width="335px"
DropDownSettings-CssClass="ddtext"
ShowSearchButton="false" ToolTip="Start typing the location, then pick from the dropdown">
<WebServiceSettings Method="GetLocationMatches" Path="../WebServices/LocationMatches.asmx" />
</telerik:RadSearchBox>
<span style="position: relative; left: 20px; top: -15px">
<asp:Label ID="lblcancel" runat="server" CssClass="labelLink" onclick="ShowHide('locPickShow', 'locPickUpdate')" ToolTip="click here to cancel">X</asp:Label>
</span>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</form>
The searchbox is only shown when the location is to be updated, so after a location has been selected from the dropdown, it is hidden again. This works fine most of the time, but occasionally the search returns too slow and a selection has been made on the dropdown before the latest search returns and the searchbox is hidden and just the location name shown. Then all of a sudden the dropdown is shown in the top left corner of the browser. So this is not yet fit for user consumption.
How can I avoid this "late" dropdown showing or otherwise address this?
Current code (not yet extravted as user control, which would be the next step):
<form id="form1" runat="server">
<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
<telerik:RadCodeBlock ID="RadCodeBlockProfile" runat="server">
<script type="text/javascript">
function ShowHide(showMe, hideMe) {
document.getElementById(showMe).style.display = "block";
document.getElementById(hideMe).style.display = "none";
$find("<%= rsb_location.ClientID %>").get_inputElement().value = '';
}
function rsb_location_Search(sender, eventArgs) {
var value = eventArgs.get_value();
if (value != null && value != "0") {
document.getElementById('<%= this.FindControl("lbl_CurrentLocation").ClientID %>').innerHTML = eventArgs.get_text();
ShowHide('locPickShow', 'locPickUpdate')
}
}
</script>
</telerik:RadCodeBlock>
<div>
<h1>Test-bed of new location picker</h1>
<div style="margin-top: 30px">
<div style="width: 120px; float: left">
Your Location:
</div>
<div style="float: left">
<div id="locPickShow" style="display: block">
<asp:Label ID="lbl_CurrentLocation" runat="server" CssClass="labelLink" onclick="ShowHide('locPickUpdate', 'locPickShow')" ToolTip="click here to change the location">not specified</asp:Label>
</div>
<div id="locPickUpdate" style="display: none">
<fieldset style="border-radius: 10px">
<legend>update location</legend>
<div style="margin-right: 20px">
<telerik:RadSearchBox ID="rsb_location" runat="server" Skin="MetroTouch" MinFilterLength="2" EmptyMessage="type and select from options"
Width="300px" EnableAutoComplete="true" OnClientSearch="rsb_location_Search" DropDownSettings-Height="150px" DropDownSettings-Width="335px"
DropDownSettings-CssClass="ddtext"
ShowSearchButton="false" ToolTip="Start typing the location, then pick from the dropdown">
<WebServiceSettings Method="GetLocationMatches" Path="../WebServices/LocationMatches.asmx" />
</telerik:RadSearchBox>
<span style="position: relative; left: 20px; top: -15px">
<asp:Label ID="lblcancel" runat="server" CssClass="labelLink" onclick="ShowHide('locPickShow', 'locPickUpdate')" ToolTip="click here to cancel">X</asp:Label>
</span>
</div>
</fieldset>
</div>
</div>
</div>
</div>
</form>