服务器端按钮单击事件未在UpdatePanel内部触发

时间:2013-05-07 15:48:10

标签: javascript jquery asp.net updatepanel

我有一个使用updatepanel的用户控件。当页面首次加载按钮时,单击工作正常并且显示在DIV中......当我再次搜索并点击按钮时,单击事件不会触发,即使页面加载事件也未触发。当您输入邮政编码时,我使用谷歌地理编码找到最近的商店。我怀疑它是使用javascript或页面验证,不让按钮触发click事件。这是我的代码。

ASPX PAGE

<%@ 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>

JS文件

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显示他们选择的商店的详细信息。现在让我们说如果他们不选择一个收音机并尝试输入差异邮政编码,然后按钮点击不工作。但是如果他们选择一个收音机,然后尝试差异邮政编码,按钮点击工作正常..

任何人都知道为什么会这样......

1 个答案:

答案 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);
          }
       });
}