Remove From My Forums

need to dismiss the displayed components on link clicks which have no controller flow.

Question

User1182587605 posted

I have a Navigation bar which has some links which will show a component on my screen. When I click on another link which has no link like <a href="#"></a>, I need to stop showing/unload the component so that the component screen is empty. I have tried some JQuery for that but did not work out. Can anyone please look at my HTML and jQuery code and help me clear the component screen. My code is:

 <div id="accordian" style="display: none;" class="col-md-6">
<a href="#">Registered Documents</a>
                                <ul id="ParentRegisteredCarrier">
                                    @{
                                        foreach (var document in Model.RegisteredDocs)
                                        {
                                            <li>
                                                <a class="LinkedObjects" asp-controller="RegisteredCarriersAndDocuments" asp-action="GetDocument" asp-route-GUID="@document.GuID">@document.DisplayName</a>
                                                <ul>
                                                    <li>
                                                        <a href="#">Output Options</a>
                                                        <ul>
                                                            @{ foreach (var option in document.Options)
                                                                {
                                                                    <li>
                                                                        <a class="LinkedObjects" asp-controller="RegisteredCarriersAndDocuments" asp-action="GetCarrierDocumentOption" asp-route-option="@JsonConvert.SerializeObject(@option)">@option.Stock.ToString() , @option.Output.ToString()</a>
                                                                    </li>
                                                                }
                                                            }
                                                        </ul>
                                                    </li>
                                                </ul>
                                            </li>
                                        }
                                    }
                                </ul>
</div>
<div id="displayRelatedContent" class="col-md-6">
</div>
</div>

jQuery to show elements in displayRelatedContent area:

 $(document).ready(function () {
            $("#ParentRegisteredCarrier").find('ul').slideToggle();
            $("#accordian").show();
});

Can anyone please help me with this.

Monday, December 23, 2019 11:52 AM

Answers

0

Sign in to vote
User665608656 posted

Hi acmedeepak,

According to your requirements, do you just need to judge the a tag that contains the attribute of href? If it's only '#', then clear the content of the corresponding div. Otherwise, the div will show the corresponding module?

If so, I suggest that you only need to get the click events of all a tags in jQuery, and judge whether the href attribute of the currently clicked a tag is '#'. If it is '#', clear the corresponding div content.

$(document).ready(function () { $("a").click(function () { var value = $(this).attr("href"); if (value != undefined) { if (value == "#") { $("#displayRelatedContent").empty(); } else { $("#displayRelatedContent").html("new content");// here you can show what you want } } }); });

Here is the result of this work demo:

Best Regards,

YongQing.
- Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
Tuesday, December 24, 2019 8:42 AM

Answered by:

need to dismiss the displayed components on link clicks which have no controller flow.

Question

Answers