Try using CSS instead of javascript as it will keep the style of the page through clicks.
<style>
// Show only the last three containers
[id$='RadAjaxPanel1'] > div > div > div:nth-child(-n+2) {
display: none;
}
// Show only the first two containers
[id$='RadAjaxPanel1'] > div > div > div:nth-child(n+3) {
display: none;
}
</style>
I have a page that has five “form-group container-fluid” on it and I am splitting them so that the top two show on one page – div:nth-child(-n+2) – and the bottom three – div:nth-child(n+3) show on a separate page. When the pages open they look perfect but when an element is clicked the page shows all five containers again. The basic scripts which work:
<script type="text/javascript">
// Show only the first two containers
$("div[id$=RadAjaxPanel1] > div > div > div:nth-child(n+3)").css("display","none");
</script>
<script type="text/javascript">
// Show only the last three containers
$("div[id$=RadAjaxPanel1] > div > div > div:nth-child(-n+2)").css("display","none");
</script>
Which show correctly on inspection as:
<div class="form-group container-fluid" style="display: none;"></div>
I have tried many ways to add a function that maintains the same style throughout page changes and have not been successful. There are signup buttons on the pages which cause popup windows. When a button is clicked the style=”display: none; is removed. Thank you for your help!
UPDATE
After the div#id there is a comment added after clicking on the signup button:
<!-- 2020.1.114.45 -->
This seems to indicate the change on the page. Is it possible to use this in the script? After clicking a button a popup sign up form comes up. The button js selector is:
document.querySelector("#ctl05_ctl05_RadGrid2_ctl00_ctl06_gbcsignUp")
The the popup form:
onkeypress=javascript:return WebForm_button(event, "id#save')
I would be happy to know the correct language for searching too. I will keep searching for the answer but I have run out of ideas and knowledge for what to search.
My guess is that the DOM structure is changing and so the structure you’re targeting is no longer valid. One way around this would be to add a class to the elements themselves instead of relying on the DOM structure around those elements. Then target that class.
The page is generated by a module that I am unable to access. Can I still add a class to the elements? I spent several hours trying to see how the DOM structure changed but couldn’t identify the changes. My first thought was to write a second script that covered the different structure.
Can you target the
I will try that. I also was wondering if .find would work for the specified nth-childs. I know this is possible! There is a solution…
What is the click event doing? Can you post the JS for that? Do you have access to edit that code?