CODEWITHSUNDEEP
javascriptjqueryhtmlajax
AndreaNobili
AndreaNobili

Reputation: 42957

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

I am absolutely new in JavaScript and even more in jQuery and I have the following problem.

In a JSP page that use Struts 2 tag library (but I think that this is not important) I have this form:

<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>

The tag is the same thing that a classic html form (it is a Struts 2 UI tag that wrap a classic html form).

The inner tag is like an HTML div with some AJAX behavior (it is shown only if a specific event is triggered) and it contains the form input tag.

In the specific case in the page there is (not show in the snippet) a JsTree showing a tree and when the user click on a node of this tree the content of this form is shown (the is shown).

Ok, under this , there is the that show a button to submit the form.

At this time this button is always shown, even when it is not shown the content of the previous .

So what I have to do is to make hidden the button when the content of the is not shown.

When the is shown it renders the following HTML code inside my page:

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

So I am thinking that maybe I code using JavaScript or jQuery to hidden my until the div id="resultEvents" is not rendered on my page.

Is it a correct use of AJAX or exist some better solution to do it? If it is a good solution how can I implement it?

Thanks

Upvotes: 0

Views: 550

Answers (1)

user2950593
user2950593

Reputation: 9627

As far as I understand your question you can try to put <script> tag in your div with id resultEvents

This will look like the following:

   <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"/>

You should give a className to your button (for example yourButtonClassName) And hide it by default: add style='display:none'

Let me know if it helps=)

Upvotes: 1

Related Questions