Hide many div after click on button form

Question

In this part of code I have several forms generated automatically by thymeleaf, each of which allows you to vote for a web location, now I would like that once you click on a question of a specific web location, the others automatically hide from the view.

For example, if I have 3 web locations and vote for a web location question with id = 2, web locations with id = 1.3 hide automatically.

 <div th:each="childLocation : ${childLocations}"> <form th:action="@{/sendVote}" enctype="multipart/form-data" method="post" data-successHandler="afterOpinionSent" class="s_ajaxForm" th:object="${childLocation}"> <input type="hidden" name="webLocationId" th:value="${childLocation.id}" th:if="${childLocation!=null}"/> <div th:each="webQuestion : ${@webQuestionRepository.findByWebLocation(childLocation.id)}" class="row sinWebQuestion" style="margin-bottom: 20px;"> <div class="col-sm-12"> <div th:text="${webQuestion.question}" class="sinButtonVoteLabel" style="text-align: center;">How Do?</div> </div> <div class="col-sm-12" style="text-align: center;"> <label th:each="vote : ${ {3, 2, 1, 0} }" class="radio-inline sinButtonVote" style="margin-top: 10px;"> <input type="radio" th:name="|questionVote[${webQuestion.id}]|" th:value="${vote}" /> <img yada:src="@{|/res/img/question/${webQuestion.iconName+vote}.png|}" th:alt-title="|Vote ${vote}|"> </label> </div> </div> <button th:id="|sendVoteButton${childLocation.id}|" type="submit" class="s_ajaxForm btn btn-default btn-block hidden">Send Opionion</button> </form> </div> 

I try to use inline javascript:

 <script type="text/javascript" th:inline="javascript"> /*<![CDATA[*/ $(".sinButtonVote > img").click(function(e){ $(this).parents("div.sinWebQuestion").addClass("voteChosen"); $("#sendVoteButton[(${childLocation.id})]").removeClass("hidden"); $("#sendOpinion[(${childLocation.id})]").removeClass("hidden"); /*[# th:each="n : ${childLocations}"]*/ if([(${n.id})]!=[(${childLocation.id})]) { $("#sinVoto[(${childLocation.id})]").hide() /*[/]*/ }); function afterOpinionSent() { $("div.sinVotoInner").addClass("hidden"); } /*]]>*/ </script> 

Once you click on the question hide all div.

How can I fix the problem?

Answer 1

try this code:

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    $(".sinButtonVote > img").click(function(e){
        $(this).parents("div.sinWebQuestion").addClass("voteChosen");
        $("#sendVoteButton[(${childLocation.id})]").removeClass("hidden");
        $("#sendOpinion[(${childLocation.id})]").removeClass("hidden");

        /*[# th:each="n : ${childLocations}"]*/
        if([(${n.id})]!=[(${childLocation.id})]) {
            $("#sinVoto[(${childLocation.id})]").hide()
         /*[/]*/


    /** this is the new code **/
        }

        afterOpinionSent();
    });

    /** end of new code **/

    function afterOpinionSent() {
            $("div.sinVotoInner").addClass("hidden");
        }
    /*]]>*/
</script>

I've added an extra } to close the img click callback function, and I also call your afterOpinionSent function because this was not being called.

Answer 2

Try this:

<script type="text/javascript" th:inline="javascript">
            /*<![CDATA[*/               
function hiddenFunction(xId){
            var userInput = document.getElementById("webLocationId"+xId).value;
            document.getElementById("userInputId").innerHTML = userInput;
            /*[# th:each="n : ${childLocations}"]*/
                if([(${n.id})]!=userInput) {
                    $("#sinVoto[(${n.id})]").addClass("hidden");
                }
            /*]]>*/
        </script>