更新面板中的按钮不会从 javascript 触发

Button in update panel will not fire from javascript

本文关键字:javascript 触发 按钮 更新      更新时间:2023-09-26

如果调用函数并且按钮位于更新面板内,则不会触发(尽管直接单击它有效( - 将其放在更新面板外部,脚本即可工作。

有什么想法吗?

<div>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
      <asp:Button ID="GridViewLBClicked" runat="server"   />
       </ContentTemplate>
   <%-- 
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="GridViewLBClicked" EventName="Click" />
    </Triggers>--%>
</asp:UpdatePanel>
    </div>
 <script>
     function RaiseEvent_Click() {
         document.getElementById('<%=GridViewLBClicked.ClientID%>').click();
         alert('It was clicked');
    }
</script>

雷乔斯

我怀疑其他一些加载的javascript可能会导致问题,因为我以前有过同样的事情 - 这是另一个加载的脚本

function LinkButtonClick(){ alert('This was clicked'); __doPostBack('ContentPlaceHolder1_GridViewLBClicked', ''); } var sessionTimeoutWarning = '18'; var sessionTimeout = '20'; var timeOnPageLoad = new Date(); var sessionWarningTimer = null; var redirectToWelcomePageTimer = null; var sessionWarningTimer = setTimeout('SessionWarning()', parseInt(sessionTimeoutWarning) * 60 * 1000); var redirectToWelcomePageTimer = setTimeout('RedirectToWelcomePage()', parseInt(sessionTimeout) * 60 * 1000); function SessionWarning() { var minutesForExpiry = (parseInt(sessionTimeout) - parseInt(sessionTimeoutWarning)); var message = 'Your session will expire in another ' + minutesForExpiry + ' mins. Do you want to extend the session?'; $('#SessionModal').modal('show'); var currentTime = new Date(); var timeForExpiry = timeOnPageLoad.setMinutes(timeOnPageLoad.getMinutes() + parseInt(sessionTimeout)); if (Date.parse(currentTime) > timeForExpiry) { window.location = 'http://localhost:53818/Logout_Landing/SessionEnded'; } } function RedirectToWelcomePage() { window.location = 'http://localhost:53818/Logout_Landing/SessionEnded'; } $(document).ready(function(){ var divWidth = document.getElementById('imageHeader').clientWidth; var imagePadding = 75; var imageOneWidth = document.getElementById('TopImage_1').width; var imageTwoWidth = document.getElementById('TopImage_2').width; var imageThreeWidth = document.getElementById('TopImage_3').width; var imageFourWidth = document.getElementById('TopImage_4').width; var imageFiveWidth = document.getElementById('TopImage_5').width; var totalImageWidth = imagePadding + imageOneWidth + imageTwoWidth + imageThreeWidth + imageFourWidth + imageFiveWidth; var widthDifference = divWidth - totalImageWidth; var percentDifference = Math.round(widthDifference / divWidth * 100); var imageOne = document.getElementById('TopImage_1'); var imageTwo = document.getElementById('TopImage_2'); var imageThree = document.getElementById('TopImage_3'); var imageFour = document.getElementById('TopImage_4'); var imageFive = document.getElementById('TopImage_5'); var currentHeight = imageOne.height; imageOne.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; imageTwo.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; imageThree.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; imageFour.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; imageFive.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; }); window.onresize = function () { var divWidth = document.getElementById('imageHeader').clientWidth; var imagePadding = 75; var imageOneWidth = document.getElementById('TopImage_1').width; var imageTwoWidth = document.getElementById('TopImage_2').width; var imageThreeWidth = document.getElementById('TopImage_3').width; var imageFourWidth = document.getElementById('TopImage_4').width; var imageFiveWidth = document.getElementById('TopImage_5').width; var totalImageWidth = imagePadding + imageOneWidth + imageTwoWidth + imageThreeWidth + imageFourWidth + imageFiveWidth; var widthDifference = divWidth - totalImageWidth; var percentDifference = Math.round(widthDifference / divWidth * 100); var imageOne = document.getElementById('TopImage_1'); var imageTwo = document.getElementById('TopImage_2'); var imageThree = document.getElementById('TopImage_3'); var imageFour = document.getElementById('TopImage_4'); var imageFive = document.getElementById('TopImage_5'); var currentHeight = imageOne.height; imageOne.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; imageTwo.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; imageThree.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; imageFour.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; imageFive.style.height = Math.round(currentHeight + (currentHeight / 100 * percentDifference)) + "px"; }; $(document).ready(function(){ $('body').append("<style>@media (max-width: 1025px) { .navbar-header { float: none; } .navbar-left, .navbar-right { float: none !important; } .navbar-toggle { display: block; } .navbar-collapse { border-top: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,0.1); } .navbar-fixed-top { top: 0; border-width: 0 0 1px; } .navbar-collapse.collapse { display: none !important; } .navbar-nav { float: none !important; margin-top: 7.5px; } .navbar-nav > li { float: none; } .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; } .collapse.in { display: block !important; } .navbar-collapse.in { overflow-y: auto !important; } .navbar-nav .open .dropdown-menu { position: static; float: none; width: auto; margin-top: 0; background-color: transparent; border: 0; box-shadow: none; } .navbar-nav .open .dropdown-menu > li > a, .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #999; } .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover, .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus { color: #fff; background-color: transparent; background-image: none; } } </style>"); });    

更新

这很奇怪 - 如果我运行这个

Dim SB As New StringBuilder
        SB.Append("function LinkButtonClick(){ ")
        SB.Append("$get('" & GridViewLBClicked.ClientID & "').click(); ")
                   SB.Append("} ")
        ScriptManager.RegisterStartupScript(Me, Me.GetType(), "LoadLinkButton", SB.ToString,    True)

它不起作用 - 但如果我添加警报,它运行良好

Dim SB As New StringBuilder
        SB.Append("function LinkButtonClick(){ ")
         SB.Append("$get('" & GridViewLBClicked.ClientID & "').click(); ")
         SB.Append("alert('it was clicked'); ")
                   SB.Append("} ")
        ScriptManager.RegisterStartupScript(Me, Me.GetType(), "LoadLinkButton", SB.ToString, True)

进一步更新

这有效 - 我尝试了 document.ready 但没有 - 不喜欢使用 setTimeout,因为谁知道在野外会发生什么,所以我欢迎一个更强大的解决方案

Private Sub LoadLinkButtonClick()
    Try
        Dim SB As New StringBuilder
        SB.Append("function LinkButtonClick(){ ")
        SB.Append("setTimeout(function() { ")
        SB.Append("$get('" & GridViewLBClicked.ClientID & "').click(); ")
        SB.Append(" }, 300); ")
        SB.Append("} ")
        ScriptManager.RegisterStartupScript(Me, Me.GetType(), "LoadLinkButton", SB.ToString, True)
    Catch ex As Exception
        Dim vError As New SendError
        vError.MailError("1229", PageName, ex)
    End Try
End Sub

您可以尝试通过发送按钮的UniqueID来调用__doPostBack()

function RaiseEvent_Click() {
     __doPostBack('<%=GridViewLBClicked.UniqueID%>', '');
     alert('It was clicked');
}

编辑:

我尝试了这个代码片段,它工作正常:

<input type="button" id="btnClickMe" value="Click me" />
<asp:UpdatePanel runat="server" ID="uPanel1">
    <ContentTemplate>
        <asp:TextBox runat="server" ID="txtInside"></asp:TextBox>
        <asp:Button runat="server" ID="btnPostInside" />
    </ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
    $("#btnClickMe").on("click", function() {
        $get("<%=btnPostInside.ClientID %>").click();
    });
</script>

你能给我们更多你的代码吗?