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.
Related
The task here is to show an element only for the "first" time when you open the webpage and if you are refreshing the webpage.
Links in navigation redirect you to another *.html page and the "global" div element that is included in every *.html page should only be shown, if you:
opened the webpage for the first time (closing the webpage / tab, and opening it again counts as opening the website as first time as well)
refreshed the page being on the website.
The file structure and approximate code is as illustrated here:
https://stackblitz.com/edit/js-ocytv4?file=index.html
I am so used to do SPA, so I am not even sure that's possible to do in plain JS, because the webpage is always unloaded and loaded again.
I tried adding session storage item to check against, but in this case it is not possible to remove .introduction on refresh.
I tried checking the document.referrer and the actual window.location.href to no avail as well, there are inconsistencies.
For example, I could do:
const ref = document.referrer
const href = window.location.href
const showIntro = () => {
introductionNode.classList.remove('hidden')
}
if (!ref || ref === href) {
removeIntro()
} else {
removeIntro()
}
But, apparently when I arrive to the Page1 from Page2, my referrer will be Page1 and will not be set to Page2, so when refreshing the page, introduction block is not hidden. And can only work if I click on the link in the navigation for the second time, being on the same page.
I integrated a menu based on https://www.codeply.com/go/T2mpwMOt60 into a website I'm building. Having used it during the build process there is one feature which I feel it misses.
Ideally I would like to have a menu item stay open when navigating to another page. So, looking at the sample menu, that would mean that if Item 3 was open, it should stay open when the page is reloaded, but close if another menu heading was clicked.
Given that every menu section starts with
<a href="#menu1"
<a href="#menu2"
etc, and when opened, the class changes from
class="list-group-item collapsed"
to
class="list-group-item"
I figured that the current menu state could be written to local storage and then read back in on page load to restore the previous state.
Does anyone know of examples that would point me in the right direction on coding this type of functionality?
I've just tried using the following script to save to localStorage
$(document).ready(function () {
$('a').click(function() {
//store the id of the collapsible element
localStorage.setItem('collapseItem', $(this).attr('href'));
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
})
It doesn't reopen the menu, but I suspect that is due to what is getting put into local.storage
As an example, When I first click to open the 'customers' sub menu, it stores #menu5, which is the sub menu I would want to be reopened on reload, but when clicking any of the children inside that menu, the stored data will change to the url of the last clicked link.
Additional note, if I reload the page whilst #menu1, #menu2 etc is stored, then it loads with the menu displaying correctly. So it is purely a case of figuring out how to NOT store anything other than the initial #menu open.
The problem is with the objects you are referencing in the event handler.
$(document).ready(function () {
$('a').click(function() {
//store the id of the collapsible element
localStorage.setItem('collapseItem', $(this).attr('href'));
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
})
On line 2, it shows that the function will trigger if an a tag is clicked. Try using something else such as button and use that as the link that opens the menus, rather than using the same tag as the one for the hyperlinks. If you can't get that to work then maybe try adding something like an OnMouseDown attribute to each menu-opening button.
Or try my current solution, which checks for a different attribute before saving. This is one that should work, as long as you give each menu-opening link the name here:
<script>
$(document).ready(function () {
$('a').click(function() {
if($(this).attr('name') == "menubtn"){
//store the id of the collapsible element
localStorage.setItem('collapseItem', $(this).attr('href'));
};
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
})
</script>
Test 1
Test 2
I wrote those modifications assuming that $ was already defined in your full project, if not then I'll leave it to you to work on that. Tell me if this works.
The solution I used for this is below.
$(document).ready(function () {
$('a').click(function() {
var menuNumber = $(this).attr('href').slice(0, -1);
//console.log(menuNumber);
if (menuNumber == '#menu') {
localStorage.setItem('collapseItem', $(this).attr('href'));
}
var menuHome = $(this).attr('href').slice(-9, -4);
//console.log(menuHome);
if (menuHome == 'index') {
localStorage.setItem('collapseItem', '');
}
});
var collapseItem = localStorage.getItem('collapseItem');
if (collapseItem) {
$(collapseItem).collapse('show')
}
// Clear local storage on menu close action
$('#sidebar .list-group > div').on('hide.bs.collapse', function () {
localStorage.setItem('collapseItem', '');
})
})
I needed to be able to also clear localStorage if the Home link was clicked to prevent the menu from reopening on the last used submenu.
Also added is a check to clear the localStorage data if the arrow icon on the menu was used to close it.
Although it's unlikely that someone would close the accordion in this way and then refresh the page, I thought it better to be thorough.
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.
In JQuery bPopup, how can i remove the old page from the popup and load a new page in same popup without closing it?
I have tried following 3 things, but still no success:
Applied anchor tag in child page, but it opens the new page in parent page
Applied $('.popup_content').bPopup({...}); in child page, it opens new page along with the previous page, both page are there in two rows.
Put 4 divs for popup in parent page, and called bPopup() for seperate popup divs in child pages. It works well, but keeps open the overlay of the old page.
Try this function:
function fnPopupClose1() {
var popup = $('.popup1').bPopup();
popup.dispose = true;
popup.close();
}
CHANGED: If the user is coming from the 'home page', the ‘Search Supplies’ page shall have one button on the bottom of the page: the ‘Back’ button.
ADDED: If the user is coming from a web page other than the home page, the ‘Search Supplies’ page shall have no buttons.
How would I remove the 'back' button but at the same time keep it? When you access the page directly from the home page the 'back' button needs to be there, but when you come to the 'Search Supplies' page from a different tab other than home, it should not be there.
if (document.referrer != "http://example.com/homepage.html")
document.getElementById("back").style.display = "none";
Here is another example by domain:
var reffererURL = document.referrer.substring(document.referrer.indexOf("/")+2);
if(reffererURL.substring(0,reffererURL.indexOf("/")) == location.host)
document.getElementById("back").style.display = "block";
else
document.getElementById("back").style.display = "none";
With magic
Try to view the HTTP_REFFERER from some server or client variable to see where the user is coming from (or not coming from) and work from there.