ASP.NET - dropdown model popup extender not firing javascript Mozila

Asked By shekhar kumar on 02-May-11 07:02 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>
Jatin Trikha replied to shekhar kumar on 04-May-11 08:14 AM

try setting autopostback property of the drop down as
AutoPostBact="True"