2013-11-27 13 views
3

哇!什麼樣的標題......對不起,我的jQuery技能缺乏。我有像這樣一個jQuery用戶界面對話框:當更新面板和過濾器事件被觸發時,jquery對話框會打開多個實例

$("#dialogAssignedTo").hide(); 
    $("#dialogAssignedTo").dialog({ 
     autoOpen: false, 
     appendTo: "form:first", 
     width: 'auto', 
     height: 'auto', 
     modal: true 
    }); 

它打開超鏈接的點擊:

$("#MainContent_hlAT").click(function (evt) { 
       $("#dialogAssignedTo").dialog("open"); 
       evt.preventDefault(); 
      }); 

我已經得到了各地的商店中對話的狀態隱藏字段服務器端發回。基本上,如果服務器端代碼已經分配隱藏字段a 1,它會保持打開對話框。如果其0隱藏像這樣:

if ($("#MainContent_hdnOpenAssignedTo").val() === "1") { 
     $("#dialogAssignedTo").dialog("open"); 
    } else { 
     $("#dialogAssignedTo").hide(); 
    } 

這一切工作正常......現在我的問題。我有多個下拉(asp.net下拉式)級聯。選擇一個下拉列表來篩選第二個下拉列表,等等。這也工作得很好......但是我注意到的是頁面做回發,然後對話框重新打開..它很好,但我不喜歡刷新/閃爍的頁面。所以,我決定添加下拉的是在jQuery UI的對話框內,UpdatePanel的觸發器:

<Triggers> 
    <asp:AsyncPostBackTrigger ControlID="dialogAssignedToddlBA"/> 
    <asp:AsyncPostBackTrigger ControlID="dialogAssignedToddlBU"/> 
</Triggers> 

所以基本上與jQuery UI的對話框沿着整個頁面被包裹在一個asp.net的UpdatePanel。問題是asyncpostback看起來像它的作品,但它會在下拉菜單的每個SelectedIndexChanged事件之後一次又一次地打開對話框。我在這裏做錯了什麼?我想在下拉菜單級聯在異步回發,讓我沒有看到閃爍......

編輯

每我提供更多信息的評論...

例如,對話簡直就是下拉值(無視事實表吸暫時...),這裏是樣品的HTML表:

<div id="dialogAssignedTo" title="Company Assigned To"> 
       <table style="height:500px; width:500px;"> 
        <tr> 
         <td class="labelField"><asp:Label ID="lblDBA" runat="server" Text="BA:"></asp:Label></td> 
         <td class="valueField"> 
          <asp:DropDownList class="chosen-select" ID="dialogAssignedToddlBA" ToolTip="Select BA..." runat="server" AutoPostBack="True" OnSelectedIndexChanged="dialogAssignedToddlBA_SelectedIndexChanged"></asp:DropDownList></td> 
         <td class="labelField"><asp:Label ID="lblDBU" runat="server" Text="BU:"></asp:Label></td> 
         <td class="valueField"><asp:DropDownList class="chosen-select" ID="dialogAssignedToddlBU" ToolTip="Select BU..." AutoPostBack="True" runat="server" OnSelectedIndexChanged="dialogAssignedToddlBU_SelectedIndexChanged"></asp:DropDownList></td> 
        </tr> 
        <tr> 
         <td class="labelField"><asp:Label ID="lblDATCountry" runat="server" Text="Country:"></asp:Label></td> 
         <td class="valueField"><asp:DropDownList class="chosen-select" data-placeholder="Select Country..." ID="dialogAssignedToddlCountry" ToolTip="Select Country..." AutoPostBack="True" runat="server" OnSelectedIndexChanged="dialogAssignedToddlCountry_SelectedIndexChanged"></asp:DropDownList></td> 

         <td class="labelField"><asp:Label ID="lblDATRegion" runat="server" Text="Region:"></asp:Label></td> 
         <td class="valueField"><asp:DropDownList class="chosen-select" data-placeholder="Select Region..." ID="dialogAssignedToddlRegion" ToolTip="Select Region..." AutoPostBack="True" runat="server" OnSelectedIndexChanged="dialogAssignedToddlRegion_SelectedIndexChanged"></asp:DropDownList></td> 
        </tr> 
        <tr> 
         <td class="labelField"><asp:Label ID="lblDATCity" runat="server" Text="City:"></asp:Label></td> 
         <td class="valueField"><asp:DropDownList class="chosen-select" data-placeholder="Select City..." ID="dialogAssignedToddlCity" ToolTip="Select City..." AutoPostBack="True" runat="server" OnSelectedIndexChanged="dialogAssignedToddlCity_SelectedIndexChanged"></asp:DropDownList></td> 
         <td class="labelField"><asp:Label ID="lblDC" runat="server" Text="Company:"></asp:Label></td> 
         <td class="valueField"><asp:DropDownList class="chosen-select" ID="dialogAssignedToddlCompanies" ToolTip="Select Company..." AutoPostBack="True" runat="server" OnSelectedIndexChanged="dialogAssignedToddlCompanies_SelectedIndexChanged"></asp:DropDownList></td> 
        </tr> 
        <tr> 
         <td class="labelField"><asp:Label ID="lblDU" runat="server" Text="User:"></asp:Label></td> 
         <td class="valueField"><asp:DropDownList class="chosen-select" ID="dialogAssignedToddlUsers" ToolTip="Select User..." runat="server"></asp:DropDownList></td> 
         <td colspan="4" style="text-align:right;"> 
          <asp:Button ID="btnSaveAssignedTo" runat="server" Text="Submit" OnClick="btnSaveAssignedTo_Click" ToolTip="Submit/Save changes?" /></td> 
        </tr> 
       </table> 
     </div> 

通知每個下拉列表中的事件(OnSelectedIndexChanged事件)。這意味着這些降級瀑布..這裏是我的問題所在。一分鐘我選擇一個下拉值的形式出去並回來(它基本上刷新)。這很好,但它會導致閃爍發生並返回對話框。我會假設,因爲對話框是在頁面更新面板(即整個頁面在更新面板中)閃爍不會發生。在頁面上的任何其他下拉菜單都很好,它只是在對話框div內下降。

的下拉菜單中的一個後面一個例子代碼如下:

protected void dialogAssignedToddlBA_SelectedIndexChanged(object sender, EventArgs e) 
     { 
      error.Visible = false; 
      hdnOpenAssignedTo.Value = "1"; 
      var result = GetBUDataSet(dialogAssignedToddlBA.SelectedItem.Value); 

      dialogAssignedToddlBU.DataSource = result; 
      dialogAssignedToddlBU.DataTextField = "BusinessUnit1"; 
      dialogAssignedToddlBU.DataValueField = "BusinessUnitID"; 
      dialogAssignedToddlBU.DataBind(); 
      dialogAssignedToddlBU.Items.Insert(0, new ListItem(String.Empty, String.Empty)); 
      dialogAssignedToddlBU.SelectedIndex = -1; 

      dialogAssignedToddlRegion.ClearSelection(); 
      dialogAssignedToddlRegion.Enabled = false; 
      dialogAssignedToddlCity.ClearSelection(); 
      dialogAssignedToddlCity.Enabled = false; 
      dialogAssignedToddlCity.Items.Clear(); 
      dialogAssignedToddlCity.DataBind(); 
      dialogAssignedToddlCompanies.ClearSelection(); 
      dialogAssignedToddlCompanies.Enabled = false; 
     } 

沒有太多看到這裏,基本上我級聯一大堆其他的下拉菜單中。請注意0​​這是根據值1保持對話框打開的字段。當然,對話框保持打開狀態,但它會閃爍網格,然後打開...我希望它不會閃爍或刷新到最終用戶。

這是否有幫助或需要發佈哪些其他信息?

感謝

+0

在UpdatePanel中是否還保持狀態的隱藏字段? –

+0

@YuriyGalanter是 – JonH

+1

您能否提供更完整的代碼示例?至少HMTL和JavaScript。 –

回答

-1

檢查:

  • 之前和異步回發後檢查其客戶端上的值時,隱藏字段具有正確的價值:

    $( 「#MainContent_hdnOpenAssignedTo」 ).val()

  • 當隱藏字段有/沒有(runat =「server」)attr時,此表達式的結果不同ibute之前和異步回發後:

如果這沒有幫助,份額您的UpdatePanel定義和底層的HTML之前和異步回發後。

-1

它類似的問題,我需要看到完整的代碼檢查 問題,或者你可以嘗試取消綁定事件單擊

$("#MainContent_hlAT").unbind("click").click(function (evt) { 
    $("#dialogAssignedTo").dialog("open"); 
    evt.preventDefault(); 
}); 
0

把你所有的腳本,喜歡你的更新面板之後以下

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
// your other controls 
</asp:UpdatePanel> 

<script type=""text/javascript"> 

$("#dialogAssignedTo").hide(); 
    $("#dialogAssignedTo").dialog({ 
     autoOpen: false, 
     appendTo: "form:first", 
     width: 'auto', 
     height: 'auto', 
     modal: true 
    }); 

$("#MainContent_hlAT").click(function (evt) { 
       $("#dialogAssignedTo").dialog("open"); 
       evt.preventDefault(); 
      }); 


if ($("#MainContent_hdnOpenAssignedTo").val() === "1") { 
     $("#dialogAssignedTo").dialog("open"); 
    } else { 
     $("#dialogAssignedTo").hide(); 
    } 

</script> 
0

我通常通過刪除對話框的所有實例除了最後一個(這將對您的下降的實際情況解決您的問題在初始化對話框之前,只能在該技巧之後附加到表單。

$('#dialogAssignedTo').not(':last').remove(); 

    $("#dialogAssignedTo").dialog({ 
    autoOpen: false, 
    width: 'auto', 
    height: 'auto', 
    modal: true 
    }); 

$('#dialogAssignedTo').parent().appendTo($('form:first')); 
相關問題