我有一个使用updatepanel的用户控件。当页面首次加载按钮时,单击工作正常并且显示在DIV中......当我再次搜索并点击按钮时,单击事件不会触发,即使页面加载事件也未触发。当您输入邮政编码时,我使用谷歌地理编码找到最近的商店。我怀疑它是使用javascript或页面验证,不让按钮触发click事件。这是我的代码。
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ClickAndCollect.ascx.cs"
Inherits="ConLib_Custom_ClickAndCollect" %>
<%@ Register Assembly="CommerceBuilder.Web" Namespace="CommerceBuilder.Web.UI.WebControls"
TagPrefix="cb" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<script src="/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false" type="text/javascript"></script>
<script src="/js/ClickAndCollectGeoCoding.js" type="text/javascript"></script>
<asp:UpdatePanel ID="ClickAndCollectUpdatePanel" runat="server" UpdateMode="Always">
<ContentTemplate>
<div class="ClickAndCollectPanelTitle">
Click and Collect
<p>
Your order will be available to collect in store in 24 - 72 hours
<br />
We will email you as soon as your order is ready for collection
</p>
</div>
<div class="errorPostcodeSummaryDiv">
<asp:Label ID="errorPostcodeSummary" Text="" runat="server" Visible="false" CssClass="errorPostcodeSummary">
</asp:Label>
</div>
<div class="ClickAndCollectContainer">
<div class="ClickAndCollectContents">
<div class="ClickAndCollectHeader">
<asp:Label ID="ClickAndCollectDesc" runat="server" Text="Find your nearest store" CssClass="ClickAndCollectDesc"></asp:Label>
<asp:TextBox ID="ClickAndCollectTextBox" runat="server" Text="" ToolTip="Enter Your Postcode" CssClass="ClickAndCollectTextBox"></asp:TextBox>
<ajax:TextBoxWatermarkExtender ID="ClickAndCollectTextWatermark" runat="server" TargetControlID="ClickAndCollectTextBox" WatermarkText="Postcode or Town" WatermarkCssClass="watermark"></ajax:TextBoxWatermarkExtender>
<asp:Button ID="ClickAndCollectSubmit" runat="server" CssClass="ClickAndCollectSubmit" Text="Find Stores" onClick= "ClickAndCollectSubmit_Click"/>
<asp:RequiredFieldValidator ID="ClickAndCollectTextBoxValidator" runat="server" ValidationGroup="OPC"
ControlToValidate = "ClickAndCollectTextBox" CssClass="ClickAndCollectValidatorError"
ErrorMessage = "Please enter valid address to search for the nearest stores." Text="*">
</asp:RequiredFieldValidator>
</div>
<div class="ClickAndCollectResult">
<asp:Panel ID="ClickAndCollectResultPanel" Visible="false" CssClass="ClickAndCollectResult"
runat="server">
<div class="ClickAndCollectResultHeader">
Choose your nearest store
</div>
<div class="ClickAndCollectResultTable">
<asp:RadioButtonList ID="StoresRadioList" Visible="false" runat="server" ToolTip="Choose your nearest store" CssClass="ClickAndCollectResultRadios" ValidationGroup="OPC" onselectedindexchanged="StoresRadioList_SelectedIndexChanged" AutoPostBack="true">
</asp:RadioButtonList>
<asp:RequiredFieldValidator ID="StoresRadioValidator" runat="server" ControlToValidate = "StoresRadioList" Text ="*" CssClass="ClickAndCollectValidatorError" ErrorMessage = "Please choose one store for your delivery.">
</asp:RequiredFieldValidator>
</div>
</asp:Panel>
</div>
<div class="selectedAddress">
<asp:PlaceHolder ID="selectedStore" runat="server"></asp:PlaceHolder>
</div>
<asp:HiddenField ID="latValue" runat="server"/>
<asp:HiddenField ID="lanValue" runat="server"/>
<asp:HiddenField ID="statusCode" runat="server"/>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
var address;
var region;
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(EndRequestHandler);
function EndRequestHandler(sender, args) {
if (args.get_error() == undefined) {
AttachEventAfterPostback();
}
}
function AttachEventAfterPostback() {
$(document).ready(function () {
address = $('.ClickAndCollectTextBox').val();
if (address.length != 0) {
checkAddress(address);
getLatLong(address, region);
}
$('.ClickAndCollectTextBox').on('blur', function () {
address = $('.ClickAndCollectTextBox').val();
if (address.length != 0) {
checkAddress(address);
getLatLong(address, region);
}
});
});
}
function getLatLong(address, region) {
var geocoder = new google.maps.Geocoder();
var result = "";
geocoder.geocode({
'address': address,
'region': region
}, function (results, status) {
if (status == google.maps.GeocoderStatus.OK) {
$("[id$='statusCode']").val("OK");
$("[id$='latValue']").val(results[0].geometry.location.lat());
$("[id$='lanValue']").val(results[0].geometry.location.lng());
// if (typeof (callback) == "function") {
// callback();
// }
} else {
$("[id$='statusCode']").val("ZERO_RESULTS");
$("[id$='latValue']").val("0");
$("[id$='lanValue']").val("0");
}
});
}
AttachEventAfterPostback();
function checkAddress(inputAddress) {
switch (inputAddress.toUpperCase()) {
//some code
}
}
“我正在做的是,一旦用户输入邮政编码和文本框丢失焦点,我正在调用地理编码以在隐藏字段中准备好LAT和LNG值。一旦用户点击,点击事件就会在服务器上触发并显示结果使用RadiobuttonList。一旦用户选择一个收音机,一个div显示他们选择的商店的详细信息。现在让我们说如果他们不选择一个收音机并尝试输入差异邮政编码,然后按钮点击不工作。但是如果他们选择一个收音机,然后尝试差异邮政编码,按钮点击工作正常..
任何人都知道为什么会这样......
答案 0 :(得分:1)
你是以错误的方式附加事件。
更新面板会进行部分页面回发,并且在手动刷新页面之前永远不会处于文档准备状态。
删除AttachEventAfterPostback
并在pageLoad函数中编写代码,这样在每次部分回发后都会自动重新绑定每个东西
function pageLoad(sender,args){
address = $('.ClickAndCollectTextBox').val();
if (address.length != 0) {
checkAddress(address);
getLatLong(address, region);
}
$('.ClickAndCollectTextBox').on('blur', function () {
address = $('.ClickAndCollectTextBox').val();
if (address.length != 0) {
checkAddress(address);
getLatLong(address, region);
}
});
}