ASP.NET - Model Popup Dropdown selected index changed not working

Asked By shekhar kumar on 21-Apr-11 02:48 AM
Hi,
I am using a model popup on my page to add and update new records. The problem is this that there is a dropdown inside the model popup which is not firing any event.
Javascript function is not firing.
Server side event is aslo not firing.

my code is as follows:

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <link href="../Styles/Grid.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      .modalPopup
      {
        background-color: #efefef;
        border-width: 3px;
        border-style: solid;
        border-color: #49A3FF;
        width: 900px;
        height: 460px;
      }
      .TablePopUp
      {
        border-collapse: collapse;
        padding: 0 0 0 5px;
        width: 865px;
      }
      .span_maxlength
      {
        font-size: smaller;
        color: ActiveBorder;
      }
    </style>
    <script type="text/javascript">
    

      function hideDiv(rdl) {

        var MyRadio = document.getElementById(rdl)
        var options = MyRadio.getElementsByTagName("input")
        var selectedvalue;
        for (var ii = 0; ii < options.length; ii++) {
          if (options[ii].checked)
            selectedvalue = options[ii].value;
        }
        if (selectedvalue == "Y") {
          document.getElementById('DismountedDiv').style.display = 'block';

        }
        else {
          document.getElementById('DismountedDiv').style.display = 'none';
        }

      }
      $(function () {
        var limit = 500;
        var currentTextAreaId;

        $(":input").focus(function () {
          currentTextAreaId = this.id;
          $('textarea[id$=' + currentTextAreaId + ']').keyup(function () {
            var len = $(this).val().length;
            if (len > limit) {
              this.value = this.value.substring(0, limit);
            }
            if (currentTextAreaId == "ctl00_MainContent_txt_Description") {
              $('#error1').text(limit - len + " characters left");
            }
            if (currentTextAreaId == "ctl00_MainContent_txt_InstallAddress") {
              $('#error2').text(limit - len + " characters left");
            }
          });
        });
      });

      function Hidepopup() {
        document.getElementById('ctl00_MainContent_RequiredFieldValidator1').innerHTML = "";
        $find("ModalPopupExtender1").hide();
        return false;
      }
      function HidepopupAlert() {
        $find("ModalPopupExtender2").hide();
        return false;
      }

      function ShowUpdatePopupView(Model_ID, vendor_ID, SerialNo, Description, IpAddress, installationAdd, installDate, Dismounted, config_id) {
        setSelectedIndex(document.getElementById("ctl00_MainContent_dd_Vendor"), vendor_ID);
        setSelectedIndex(document.getElementById("ctl00_MainContent_dd_Model"), Model_ID);
        setCheckedValue(document.getElementById("ctl00_MainContent_dd_Dismounted"), Dismounted);

        var modal = $find('ModalPopupExtender1');

        document.getElementById('ctl00_MainContent_btn_AddNew').style.display = 'None';
        document.getElementById('ctl00_MainContent_btn_Update').style.display = 'None';
        document.getElementById('ctl00_MainContent_hdn_CategoryID').value = config_id;
        document.getElementById("ctl00_MainContent_txt_SerialNo").value = SerialNo;
        document.getElementById("ctl00_MainContent_txt_Description").value = splitText(Description);
        document.getElementById("ctl00_MainContent_txt_IPAddress").value = IpAddress;
        document.getElementById("ctl00_MainContent_txt_InstallAddress").value = splitText(installationAdd);
        document.getElementById("ctl00_MainContent_txt_InstallDate").value = installDate;
        //document.getElementById("ctl00_MainContent_txt_Dismounted").value = Dismounted;

        modal.show();
        return false;
      }

      function ShowUpdatePopup(Model_ID, vendor_ID, SerialNo, Description, IpAddress, installationAdd, installDate, Dismounted, config_id) {
        setSelectedIndex(document.getElementById("ctl00_MainContent_dd_Vendor"), vendor_ID);
        setSelectedIndex(document.getElementById("ctl00_MainContent_dd_Model"), Model_ID);
        setCheckedValue(document.getElementById("ctl00_MainContent_dd_Dismounted"), Dismounted);
        var modal = $find('ModalPopupExtender1');
        if (Model_ID == "0") {
          document.getElementById("ctl00_MainContent_txt_SerialNo").value = "";
          document.getElementById("ctl00_MainContent_txt_Description").value = "";
          document.getElementById("ctl00_MainContent_txt_IPAddress").value = "";
          document.getElementById("ctl00_MainContent_txt_InstallAddress").value = "";
          document.getElementById("ctl00_MainContent_txt_InstallDate").value = "";
          //document.getElementById("ctl00_MainContent_txt_Dismounted").value = "";


          document.getElementById('ctl00_MainContent_btn_AddNew').style.display = 'Block';
          document.getElementById('ctl00_MainContent_btn_Update').style.display = 'None';
        }
        else {
          document.getElementById('ctl00_MainContent_btn_AddNew').style.display = 'None';
          document.getElementById('ctl00_MainContent_btn_Update').style.display = 'Block';
          document.getElementById('ctl00_MainContent_hdn_CategoryID').value = config_id;
          document.getElementById("ctl00_MainContent_txt_SerialNo").value = SerialNo;
          document.getElementById("ctl00_MainContent_txt_Description").value = splitText(Description);
          document.getElementById("ctl00_MainContent_txt_IPAddress").value = IpAddress;
          document.getElementById("ctl00_MainContent_txt_InstallAddress").value = splitText(installationAdd);
          document.getElementById("ctl00_MainContent_txt_InstallDate").value = installDate;
          // document.getElementById("ctl00_MainContent_txt_Dismounted").value = Dismounted;

        }
        modal.show();
        return false;
      }
      function setSelectedIndex(s, v) {
        for (var i = 0; i < s.options.length; i++) {
          if (s.options[i].value == v) {
            s.options[i].selected = true;
            return;
          }
        }
      }
      function splitText(TextValue) {
        var vendorAddress = TextValue.split("^");
        var newAddress = "";
        for (var i = 0; i < vendorAddress.length; i++) {
          newAddress += "\n" + vendorAddress[i];
        }
        return trim(newAddress);
      }
      function trim(str) {
        if (!str || typeof str != 'string')
          return null;

        return str.replace(/^[\s]+/, '').replace(/[\s]+$/, '').replace(/[\s]{2,}/, ' ');
      }
      function getCheckedValue(radioObj) {
        if (!radioObj)
          return "";
        var radioLength = radioObj.length;
        if (radioLength == undefined)
          if (radioObj.checked)
            return radioObj.value;
          else
            return "";
      for (var i = 0; i < radioLength; i++) {
        if (radioObj[i].checked) {
          return radioObj[i].value;
        }
      }
      return "";
    }
    function setCheckedValue(radioObj, newValue) {
      if (!radioObj)
        return;
      var radioLength = radioObj.length;
      if (radioLength == undefined) {
        radioObj.checked = (radioObj.value == newValue.toString());
        return;
      }
      for (var i = 0; i < radioLength; i++) {
        radioObj[i].checked = false;
        if (radioObj[i].value == newValue.toString()) {
          radioObj[i].checked = true;
        }
      }
    }
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" AsyncPostBackTimeout="180"
      LoadScriptsBeforeUI="False" ScriptMode="Release">
    </asp:ToolkitScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
      <ContentTemplate>
        <asp:UpdateProgress ID="UpdateProgress1" runat="server">
          <ProgressTemplate>
            <div id="progressBackgroundFilter" class="progressBackgroundFilter" style="z-index: 10005;">
            </div>
            <div id="processMessage" style="z-index: 20001;">
              <img src="../UIfiles/images/anim_loading.gif" alt="please wait" />
            </div>
          </ProgressTemplate>
        </asp:UpdateProgress>
        <div class="divGrid">
          <div style="overflow: hidden; padding-right: 28px;">
            <asp:Button ID="btn_Add" CssClass="Button" CausesValidation="false" runat="server"
              Text="Add Configuration" OnClientClick="return ShowUpdatePopup('0','0','','','','','','','')" />
          </div>
          <div style="float: left; overflow: hidden; width: 100%;">
            <table cellpadding="4px" cellspacing="0px" style="border-collapse: collapse;">
              <tr>
                <td>
                  &nbsp;&nbsp;<asp:Label Text="Search Text: " runat="server" ID="lbl_Find" />
                  <br />
                  &nbsp;&nbsp;<asp:TextBox ID="txt_Search" MaxLength="200" runat="server" />
                </td>
                <td>
                  &nbsp;&nbsp;<asp:Label Text="Search In: " runat="server" ID="Label1" />
                  <br />
                  &nbsp;&nbsp;<asp:DropDownList ID="dd_SearchIn" runat="server">
                    <asp:ListItem Value="Serial_Number" Text="Serial Number" />
                    <asp:ListItem Value="Ip_Address" Text="IP Address" />
                  </asp:DropDownList>
                </td>
                <td>
                  &nbsp;&nbsp;<asp:Label Text="Vendor: " runat="server" ID="Label2" />
                  <br />
                  &nbsp;&nbsp;<asp:DropDownList ID="dd_VendorSearch" runat="server" />
                </td>
                <td>
                  &nbsp;&nbsp;<asp:Label Text="Model: " runat="server" ID="Label3" />
                  <br />
                  &nbsp;&nbsp;<asp:DropDownList ID="dd_ModelSearch" runat="server" />
                </td>
                <td>
                  &nbsp;&nbsp;<asp:Label Text="Start Date :" runat="server" ID="Label4" />
                  <br />
                  &nbsp;&nbsp;<asp:TextBox Width="70px" ID="txt_StartDate" onKeyPress="javascript: return false;"
                    onPaste="javascript: return false;" runat="server" />
                  <asp:CalendarExtender ID="CalendarExtender2" Format="dd-MM-yyyy" TargetControlID="txt_StartDate"
                    runat="server" />
                </td>
                <td>
                  &nbsp;&nbsp;<asp:Label Text="End Date :" runat="server" ID="Label5" />
                  <br />
                  &nbsp;&nbsp;<asp:TextBox ID="txt_EndDate" onKeyPress="javascript: return false;"
                    onPaste="javascript: return false;" Width="70px" runat="server" />
                  <asp:CalendarExtender ID="CalendarExtender3" Format="dd-MM-yyyy" TargetControlID="txt_EndDate"
                    runat="server" />
                </td>
                <td>
                  <br />
                  <asp:Button ID="btn_Search" Text="Search" runat="server" OnClick="btnSearch_onClick"
                    CausesValidation="false" />
                </td>
                <td>
                  <br />
                  &nbsp;<asp:Button ID="btn_Reset" Text="Reset" runat="server" OnClick="btnReset_onClick"
                    CausesValidation="false" />
                </td>
              </tr>
            </table>
          </div>
          <div style="overflow: hidden; float: left; width: 100%;">
            <center>
              <asp:HiddenField ID="hdn_CategoryID" runat="server" Value="" />
              <asp:GridView ID="gv" runat="server" AutoGenerateColumns="False" GridLines="None"
                OnSorting="GridView1_Sorting" AllowSorting="True" DataKeyNames="ConfigureID"
                PageSize="10" CssClass="mGrid" PagerStyle-CssClass="pgr" AlternatingRowStyle-CssClass="alt">
                <Columns>
                  <asp:TemplateField HeaderText="Serial Number" SortExpression="Serial_Number">
                    <ItemTemplate>
                      <asp:LinkButton OnClientClick='<%#Eval("ViewClientClick") %>' Text='<%# Eval("SerialNumber")%>'
                        runat="server" CausesValidation="false" ToolTip="Click here to view the full record"
                        ID="lnk_Edit1" />
                    </ItemTemplate>
                  </asp:TemplateField>
                  <asp:TemplateField HeaderText="IP" SortExpression="Ip_Address">
                    <ItemTemplate>
                      <%# Eval("IPAddress")%>
                    </ItemTemplate>
                  </asp:TemplateField>
                  <asp:TemplateField HeaderText="Installation Date" SortExpression="Installation_Date">
                    <ItemTemplate>
                      <%# Eval("InstallationDate", "{0:M-dd-yyyy}")%>
                    </ItemTemplate>
                  </asp:TemplateField>
                  <asp:TemplateField HeaderText="Model" SortExpression="Model_Name">
                    <ItemTemplate>
                      <%# Eval("ModelName")%>
                    </ItemTemplate>
                  </asp:TemplateField>
                  <asp:TemplateField HeaderText="Vendor" SortExpression="Vendor_Name">
                    <ItemTemplate>
                      <%# Eval("VendorName")%>
                    </ItemTemplate>
                  </asp:TemplateField>
                  <asp:TemplateField HeaderText="Edit" HeaderStyle-CssClass="adjacent">
                    <ItemTemplate>
                      <asp:ImageButton ID="lnk_Edit" OnClientClick='<%#Eval("EditClientClick") %>' runat="server"
                        CausesValidation="false" AlternateText="Edit" ImageUrl="~/UIfiles/images/edit.gif" />
                    </ItemTemplate>
                  </asp:TemplateField>
                  <asp:TemplateField HeaderText="Delete" HeaderStyle-CssClass="adjacent">
                    <ItemTemplate>
                      <asp:ImageButton CommandArgument='<%#Eval("ConfigureID") %>' CausesValidation="false"
                        AlternateText="Delete" ImageUrl="~/UIfiles/images/Delete.gif" runat="server"
                        ID="lnk_Delete" OnClick="lnkDelete_Click" OnClientClick="return confirm('Do you want to delete this Configuration');" />
                    </ItemTemplate>
                  </asp:TemplateField>
                </Columns>
                <EmptyDataTemplate>
                  <div class="noRecordFoundStyle">
                    No Record found!
                  </div>
                </EmptyDataTemplate>
              </asp:GridView>
              <cc1:NumericPager ID="NumericPager1" PageSize="10" runat="server" CssClass="GridPager"
                InfoPanelHorizontalAlign="Left" OnIndexChanged="NumericPager1_IndexChanged" FirstText="First"
                PreviousText="Previous" NextText="Next" LastText="Last">
              </cc1:NumericPager>
            </center>
          </div>
        </div>
        <!--Code fro alert-->
        <asp:ModalPopupExtender ID="ModalPopupExtender2" BehaviorID="ModalPopupExtender2"
          DropShadow="false" PopupControlID="pnlShowMsg" TargetControlID="lblMsg" BackgroundCssClass="modalBackground"
          runat="server">
        </asp:ModalPopupExtender>
        <asp:Panel ID="pnlShowMsg" runat="server" CssClass="model-alert rounded-corners"
          Style="display: none">
          <div class="modalHeader rounded-corners-header">
            <div class="modelHeader-Close rounded-corners-header">
              <img src="../UIfiles/images/Close.jpg" alt="Close" onclick="return HidepopupAlert()" />
            </div>
          </div>
          <div class="model-alert-text rounded-corners-bottom">
            <div style="width: auto;">
              <center>
                <uc1:MsgControl ID="MsgControl1" runat="server" />
              </center>
            </div>
          </div>
          <asp:HiddenField ID="lblMsg" runat="server" />
          <div style="text-align: right; float: right;">
            <asp:Button ID="Button1" Text="Ok" CssClass="Button" runat="server" OnClientClick="return HidepopupAlert()" />
          </div>
        </asp:Panel>
        <!--End alert code-->
        <asp:DragPanelExtender ID="DragPanelExtender1" runat="server" TargetControlID="pnlAddEdit">
        </asp:DragPanelExtender>
        <asp:Panel ID="pnlAddEdit" runat="server" CssClass="modalPopup rounded-corners" Style="display: none">
          <div class="modalHeader rounded-corners-header">
            <div class="modelHeader-Close rounded-corners-header">
              <img src="../UIfiles/images/Close.jpg" alt="Close" title="Close" onclick="return Hidepopup()" />
            </div>
          </div>
          <div>
            <br />
            <table class="TablePopUp">
              <tr>
                <td>
                  Model
                </td>
                <td>
                  <asp:DropDownList ID="dd_Model" runat="server" />
                  <asp:RequiredFieldValidator ControlToValidate="dd_Model" InitialValue="0" ID="RequiredFieldValidator3"
                    runat="server" ErrorMessage="*" />
                </td>
                <td>
                  Vendor
                </td>
                <td>
                  <asp:DropDownList ID="dd_Vendor" runat="server" />
                  <asp:RequiredFieldValidator ControlToValidate="dd_Vendor" InitialValue="0" ID="RequiredFieldValidator2"
                    runat="server" ErrorMessage="*" />
                </td>
                <td>
                  Serial Number
                </td>
                <td>
                  <asp:TextBox ID="txt_SerialNo" runat="server" MaxLength="20" />
                  <asp:RequiredFieldValidator ControlToValidate="txt_SerialNo" ID="RequiredFieldValidator1"
                    runat="server" ErrorMessage="*" />
                </td>
              </tr>
              <tr>
                <td>
                  Description
                </td>
                <td colspan="3">
                  <asp:TextBox ID="txt_Description" runat="server" MaxLength="500" TextMode="MultiLine"
                    Rows="3" Columns="50" />
                  <br />
                  &nbsp;<span id="error1" class="span_maxlength"></span>
                </td>
                <td>
                  IP Address
                </td>
                <td>
                  <asp:TextBox ID="txt_IPAddress" MaxLength="20" runat="server" />
                  <br />
                </td>
              </tr>
              <tr>
                <td>
                  Installation Address
                </td>
                <td colspan="3">
                  <asp:TextBox ID="txt_InstallAddress" runat="server" MaxLength="500" TextMode="MultiLine"
                    Rows="3" Columns="50" />
                  <br />
                  &nbsp; <span id="error2" class="span_maxlength"></span>
                </td>
                <td>
                  Installation Date
                </td>
                <td>
                  <asp:TextBox ID="txt_InstallDate" runat="server" onKeyPress="javascript: return false;"
                    onPaste="javascript: return false;" /><asp:CalendarExtender ID="CalendarExtender1"
                      Format="dd-MM-yyyy" TargetControlID="txt_InstallDate" runat="server" />
                  <asp:RequiredFieldValidator ControlToValidate="txt_InstallDate" ID="RequiredFieldValidator4"
                    runat="server" ErrorMessage="*" />
                </td>
              </tr>
              <tr>
                <td>
                  Detail Remarks
                </td>
                <td colspan="3">
                  <asp:TextBox ID="txt_DetailRemarks" runat="server" MaxLength="500" TextMode="MultiLine"
                    Rows="3" Columns="50" />
                  <br />
                  &nbsp; <span id="Span1" class="span_maxlength"></span>
                </td>
                <td>
                  Action Date
                </td>
                <td>
                  <asp:TextBox ID="txt_ActionDate" runat="server" onKeyPress="javascript: return false;"
                    onPaste="javascript: return false;" /><asp:CalendarExtender ID="CalendarExtender4"
                      Format="dd-MM-yyyy" TargetControlID="txt_ActionDate" runat="server" />
                  <asp:RequiredFieldValidator ControlToValidate="txt_ActionDate" ID="RequiredFieldValidator5"
                    runat="server" ErrorMessage="*" />
                </td>
              </tr>
              <tr>
                <td>
                  Dismounted
                </td>
                <td style="padding-top: 10px;">
                  <asp:RadioButtonList ID="dd_Dismounted" runat="server" RepeatDirection="Horizontal">
                    <asp:ListItem Text="No" Selected="True" Value="N"></asp:ListItem>
                    <asp:ListItem Text="Yes" Value="Y"></asp:ListItem>
                  </asp:RadioButtonList>
                  <br />
                </td>
                <td>
                </td>
                <td>
                </td>
              </tr>
              <tr>
                <td colspan="6">
                  <asp:UpdatePanel ID="updatepanel2" runat="server">
                    <ContentTemplate>
                      <div id="DismountedDiv" style="display: none;">
                        <table>
                          <tr>
                            <td>
                              Fault Category
                            </td>
                            <td>
                              <asp:DropDownList ID="dd_FaultCat" CausesValidation="false" runat="server" AutoPostBack="true"
                                OnSelectedIndexChanged="ddFacltCate_IndexChanged" />
                            </td>
                            <td>
                              Fault Sub Category
                            </td>
                            <td>
                              <asp:DropDownList ID="dd_FaultSubCat" runat="server" />
                            </td>
                          </tr>
                        </table>
                      </div>
                    </ContentTemplate>
                  </asp:UpdatePanel>
                </td>
              </tr>
              <tr>
                <td colspan="6">
                  <div class="div-dilog-add-button">
                    <table class="TablePopUp">
                      <tr>
                        <td>
                          <asp:HiddenField ID="hdn_One" runat="server" />
                          &nbsp; &nbsp;
                          <asp:Button ID="btnCancle" Text="Cancel" CssClass="Button" runat="server" OnClientClick="return Hidepopup()" />
                          <asp:Button ID="btn_AddNew" Text="Add" CssClass="Button" runat="server" OnClick="btnAdd_Click" />
                          <asp:Button ID="btn_Update" runat="server" CssClass="Button" Text="Update" OnClick="btnUpdate_Click" />
                        </td>
                      </tr>
                    </table>
                  </div>
                </td>
              </tr>
            </table>
        </asp:Panel>
        <asp:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="ModalPopupExtender1"
          DropShadow="false" PopupControlID="pnlAddEdit" TargetControlID="hdn_One" BackgroundCssClass="modalBackground"
          runat="server">
        </asp:ModalPopupExtender>
      </ContentTemplate>
      <Triggers>
        <asp:AsyncPostBackTrigger ControlID="dd_FaultCat" EventName="SelectedIndexChanged" />
      </Triggers>
    </asp:UpdatePanel>
</asp:Content>
 
Jitendra Faye replied to shekhar kumar on 21-Apr-11 03:05 AM
Did you set AutoPostBack Property od That DropDownList to True, if no then set it
like-

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack ="true" >

</asp:DropDownList>

Try and let me know.

shekhar kumar replied to Jitendra Faye on 21-Apr-11 03:10 AM
it is all ready there.

 <asp:DropDownList ID="dd_FaultCat" CausesValidation="false" runat="server" AutoPostBack="true"
                                OnSelectedIndexChanged="ddFacltCate_IndexChanged" />
shekhar kumar replied to Jitendra Faye on 20-Jul-11 04:59 AM
it worked when i removed the drag extender. I think there is some problem with drag extender.