只有一个由 JavaScript 触发的 UpdatePanel 更新了内容

Question

我有两个更新面板，我在javascript中触发了它。运行代码后，仅更新了第二个面板的内容。这是我的代码。

<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div style="display: normal">
<asp:Button ID="PaperContent_Button1" runat="server" Text="Update box Panel" OnClick="LoadPaperData" />
</div>
<div class="ibox-content_v2" style="height: 150px;">                                    
<div style="display: inline; height: 100px; float: right; max-width: 70%; min-width: 165px; width: 70%">
<asp:Label ID="uiBox1Value" runat="server" Style="font-size: 30px; font-weight: 600; color: #002467" />
<asp:Label ID="uiBox1Unit" runat="server" Style="font-size: 13px; font-weight: 600; color: #002467" />
</div>
<div id="uiBox1TargetPanel" runat="server" onmouseover="document.getElementById('ContentPlaceHolder1_uiBox1Popup').style.visibility = 'visible';" onmouseout="document.getElementById('ContentPlaceHolder1_uiBox1Popup').style.visibility = 'hidden';">                                        
<div id="uiBox1Popup" runat="server" style="float: left; position: relative; top: -50px; visibility: hidden; width: 100%; height: 40px; text-align: center; border-width: 1px; border-style: solid; border-color: #D2D9E3; background-color: #F2F3F6; font-size: 13px; font-weight: 600; padding-top: 10px;">
<asp:Label ID="uiBox1TargetLabel" runat="server" />: 
<asp:Image ID="uiBox1TargetUpOrDownImage" runat="server" Width="6" Height="9" Style="margin-right: 5px; margin-bottom: 4px;" ImageUrl="images/ico_arrow_xs_r_up.png" />
<asp:Label ID="uiBox1TargetValue" runat="server" />%
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>

<asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div style="display: normal">
<asp:Button ID="WaterContent_Button1" runat="server" Text="Update box Panel" OnClick="LoadWaterData" />
</div>
<div class="ibox-content_v2" style="height: 150px;">
<div style="display: inline; height: 100px; float: right; max-width: 70%; min-width: 165px; width: 70%">
<asp:Label ID="uiBox2Value" runat="server" Style="font-size: 30px; font-weight: 600; color: #002467" />
<asp:Label ID="uiBox2Unit" runat="server" Style="font-size: 13px; font-weight: 600; color: #002467" />                                    
</div>
<div id="uiBox2TargetPanel" runat="server" onmouseover="document.getElementById('ContentPlaceHolder1_uiBox2Popup').style.visibility = 'visible';" onmouseout="document.getElementById('ContentPlaceHolder1_uiBox2Popup').style.visibility = 'hidden';">                                        
<div id="uiBox2Popup" runat="server" style="float: left; position: relative; top: -50px; visibility: hidden; width: 100%; height: 40px; text-align: center; border-width: 1px; border-style: solid; border-color: #D2D9E3; background-color: #F2F3F6; font-size: 13px; font-weight: 600; padding-top: 10px;">
<asp:Label ID="uiBox2TargetLabel" runat="server" />: 
<asp:Image ID="uiBox2TargetUpOrDownImage" runat="server" Width="6" Height="9" Style="margin-right: 5px; margin-bottom: 4px;" ImageUrl="images/ico_arrow_xs_r_up.png" />
<asp:Label ID="uiBox2TargetValue" runat="server" />%
</div>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>

我使用 javascript 触发了代码，但是，在运行代码后，只有第二个被更新。

<script>
$(document).ready(function () {
$("#ContentPlaceHolder1_PaperContent_Button1").click();
$("#ContentPlaceHolder1_WaterContent_Button1").click();
});
</script>

但是我希望更新两个更新面板。我该怎么做才能使两个更新面板都更新？

Answer 1

如果可以，请更改第二个面板的UpdateMode：

UpdateMode="Always"

然后删除 JavaScript 中的第 2 个.click()。第二个面板应在第一个面板更新时更新(发生回发时(。

如果不能使用Always，则可以将OnLoad事件添加到第二个面板，并将您拥有的任何代码移动到该事件。发生回发时，第二个面板将始终重新加载，代码将触发。

呵呵。