如何使用 AJAX 在我的页面中未显示特定 div 之前隐藏按钮？

Question

我在 JavaScript 中绝对是新手，在 jQuery 中更是如此，我遇到了以下问题。

在使用 Struts 2 标签库的 JSP 页面中（但我认为这并不重要）我有这样的表格：

<s:form>
    <sj:div id="resultEvents" href="%{loadFolderTechId}"
            formIds="treeForm"
            class="result ui-widget-content ui-corner-all"
            loadingText=" "
            onBeforeTopics="before"
            onCompleteTopics="complete"
            deferredLoading="true"
            reloadTopics="reloadEvents">
      </sj:div>

      <s:submit action="projectCreationAction"/>
</s:form>

标签与经典 html 形式相同（它是一个 Struts 2 UI 标签，包裹了经典html表格）。

内部的标签就像一个 HTML div 有一些 AJAX 行为（它仅在特定事件被触发时显示) 并且它包含表单输入标签。

在特定情况下，页面中有（代码段中未显示）显示树的 JsTree，当用户单击该树的节点时，将显示此表单的内容（显示）。

好的，在这个下，有显示一个提交表单的按钮。

此时这个按钮一直显示，即使不显示之前的内容。

所以我要做的就是在的内容没有显示的时候隐藏按钮。

当显示时，它会在我的页面中呈现以下 HTML 代码：

<div id="resultEvents" class="class java.util.HashMap">
    <div id="">Creazione Progetto</div>
    <br>
    <table width="100%" border="0">
        ..............................................
        ..............................................
        ..............................................
    </table>
</div>

所以我在想也许我使用 JavaScript 或 jQuery 来隐藏我的直到 div id="resultEvents" 没有呈现在我的页面上。

AJAX 的使用是否正确，或者是否存在更好的解决方案？如果这是一个好的解决方案，我该如何实施？

谢谢

Answer 1

据我了解您的问题，您可以尝试将 <script> 标签放入您的 div 中，ID 为 resultEvents

这将如下所示：

   <s:form>
<sj:div id="resultEvents" href="%{loadFolderTechId}"
        formIds="treeForm"
        class="result ui-widget-content ui-corner-all"
        loadingText=" "
        onBeforeTopics="before"
        onCompleteTopics="complete"
        deferredLoading="true"
        reloadTopics="reloadEvents">
<script type = 'text/javascript' >$('.yourButtonClassName').show()</script>

  </sj:div>


  <s:submit style='display:none' class='yourButtonClassName' action="projectCreationAction"/>

你应该给你的按钮一个类名（例如yourButtonClassName）并默认隐藏：添加 style='display:none'

如果有帮助请告诉我=)

如何使用 AJAX 在我的页面中未显示特定 div 之前隐藏按钮？

How to hide a button until a specific div is not shown in my page using AJAX?

html

javascript

ajax

jquery