Develop Reference

How to load page with specific div active based on clicked button

I have a dashboard which has a menu (template block) that uses Javascript to switch between tabs to display content on the dashboard page without reloading the page.
The menu appears on every page but only works on the dashboard page. (not what I want)
When a menu button is clicked from another page, how can I load the dashboard page with the right content displayed.
Here is my javascript
const nav_btns = document.querySelectorAll('.bottom_navbar_container_BTN');
const icons = document.querySelectorAll('.bottom_navbar_icon');
const nav_container = document.querySelector('.bottom_navbar_container');
const nav_contents = document.querySelectorAll('.dashboard_tab ')
nav_container.addEventListener('click', function(e){
const button_id = e.target.dataset.id;
console.log(button_id)
const icon_id = e.target.dataset.id;
console.log(button_id)
if (button_id){
nav_btns.forEach(function(btn){
btn.classList.remove("active");
e.target.classList.add('active');
localStorage.setItem(e.target,button_id)
});
nav_contents.forEach(function(content){
content.classList.remove("active");
})
const element = document.getElementById(button_id);
element.classList.add('active')
}
})
I tried to add a window.location.replace in JS which would open the dashboard page when a button is clicked from another page.
Problem 1: It opens the dashboard page on the first content. Not the content of the button that was pressed.
Problem 2: When clicking the buttons on the dashboard page, it always reloads content 1.
Yes. I've tried to adding javascript on every page. Same problem.
When clicking from another page, My console.log says "
TypeError: Cannot read properties of null (reading 'classList')
at HTMLDivElement.

Force page to open a new tab on each button click instead of overwriting

We have a site we're working on that is somewhat of a research source. We have an embedded Tableau dashboard with buttons on the main page that each lead to a different page with the same base url but different query parameters. For example:
Button1 = www.oursite.com?measure=21
Button2 = www.oursite.com?measure=54
Button3 = www.oursite.com?source=41
Button3 = www.oursite.com?source=90
What we would like is for a new tab to open on each click so the user can come back to that resource later. Currently, the first button click does open a new tab but each subsequent click overwrites the tab that was opened with the first click. Is there an HTML or Javascript way of solving this problem? Since the buttons are within the embedded Tableau dashboard, they don't have access to a right click by the user.

You can add the target="_blank" attribute to the link:
Link
And you can just put the button in the link so whenever someone clicks on the button it will open a new tab.
<a href="wherever" target="_blank">
<button>Link</button>
</a>

Load DIV from another page into bootstrap modal, based on button Data Attribute

I am trying to load a DIV from another page, based on the data attribute of the button clicked. Here is what I have so far:
$('#quick_shop_modal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget)
var product = button.data('product')
var modal = $(this)
modal.find('.modal-title').text('Quick Shop ' + product)
$('#quick_modal_body').load('product #prodDescMain')
});
So when the modal is opened, it should use the product data attribute of the button to load the #prodDescMain div of that page.
Data attribute example: Leather_Care_Kit.php
which means the last line should read:
$('#quick_modal_body').load('Leather_Care_Kit.php #prodDescMain')
However nothing shows up. If I hard code the filename it works though?

product is a variable, so you use string concatenation:
$('#quick_modal_body').load(product + ' #prodDescMain')

HtmlUnit button click not submitting

I am trying to click a button in HtmlUnit to login to a site (m.pge.com) but it is not working. The browser stays on same page. I had similar issue with another site. I tried searching but didn't get a definitive answer.
Any ideas what I might be doing wrong ?
Here is code..
Web_Client = new WebClient(BrowserVersion.CHROME);
Web_Client.getOptions().setCssEnabled(false);
Web_Client.getOptions().setThrowExceptionOnScriptError(false);
Web_Client.setJavaScriptTimeout(15000);
Web_Client.getOptions().setRedirectEnabled(true);
//Web_Client.setAjaxController(new NicelyResynchronizingAjaxController());
// load home page
HtmlPage page = Web_Client.getPage("https://m.pge.com/#login");
HtmlTextInput userName = loginForm.getFirstByXPath("//*[#id=\"usernameField\"]");
HtmlPasswordInput passWord = loginForm.getFirstByXPath("//*[#id=\"passwordField\"]");
userName.setValueAttribute(user);
passWord.setValueAttribute(password);
HtmlButton button = null;
DomNodeList<DomElement> buttonList = page.getElementsByTagName("button");
for (Iterator buttonIter = buttonList.iterator(); buttonIter.hasNext();) {
DomElement domElement = (DomElement) buttonIter.next();
if(domElement.asText().equals("SIGN IN")) {
button = (HtmlButton)domElement;
}
}
loginpage = button.click();

It is too tedious and unclear to type in comment so i type it as answer and will update with progress.
Part1: login
The first thing is that are you sure you target the button correctly and where did you initialize the HtmlPage loginpage. Normally, when you assign
loginpage = button.click();
It will get you the login page,but sometimes it is weird that it doesn't assign new page but rather change the current page. that is your
page
You may try to print it out before button click and after button click to see if this page changes? that is
System.out.println(page.asText());
button.click(); // no need to assign page, if the page changes itself
System.out.println(page.asText());
Part2: Search
When you have done input textbox and button click, you will have to target the changes element after search again and get its content, for example, if it is a element, you should probably target the element after button click and get the content you want afterwards. If you target it before button click, the content in that element won't changes itself, you need to get that again.

enable user to return previous page in new window

I have PHP form where user can insert a movie name in the textbox, then by clicking a button "search", a new window is opened showing list of movies contain the word that user has inserted in the textbox.
For example the image below shows list of movies contain the word "froz":
Now, if user click on any of movie names in the new window (for example "Frozen"), this page will be shown:
As can be seen in the image, the window does not have the back in the browser. My question is how can I enable user to return to the previous page (the page which shows list of movies)?
This is the code when user click on "search" button which opens a new window (showing list of movies):
$('#btnSearch').on('click', function (e) {
window.textbox = $('#q').val();
window.searchType = $('input:radio[name=source]:checked').val();
popupCenter("movielist.php","_blank","400","400");
});
and this is the code where I defined the url for when user click on movie name.
<td><?php echo $row['movieName']; ?></td>
All ideas are highly appreciated,

Use options like toolbar=yes,menubar=yes when you open a new popup window.
Related question: Show Back/Forward