I would like to open "nav-Customer" drop-down menu option with a Javascript command.
(There is no way to change source html file below)
<ul id="nav-People-container">
<li id="nav-Owner">
Owner
</li>
<li id="nav-Responsible">
Responsible
</li>
<li id="nav-Customer">
Customer
</li>
</ul>
Trying with document.getElementById("nav-Customer").click(); does not open the pop-up window that should activate upon mouseclick.
I tried this script with regular buttons, it works. but I need it in this specific case.
Can anyone help me? What am I not doing right?
(I have no Javascript experience)
You can do it this way:
$(document).ready(function(e) {
$('body').on('click', '#nav-Customer', function(e) {
// do something after click
// comment out to stop debug
console.log("something was clicked");
alert("You Clicked the Link");
});
});
Check if document is ready.
onclick #nav-Customer do something.
Related
I am trying to make a web page easier to use. At the moment, there is a drop down menu with a 'Delete' button. When I inspect, it looks like this:
<a title="" class="ajax-command" command="deletePost" href="#">Delete</a>
Is there any way I can execute this somehow? I am trying to create a new button that executes this command without the need of the dropdown. It is part of a set of buttons under this dropdown menu:
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li class="item">
I have tried just replicating the click of the drop down selection, but I can't get it to work. Any help would be great!
jquery solution
$(".ajax-command[command='deletePost']").click()
Simulate the click event on the link, it doesn't matter that it's hidden. I'll demonstrate this here by writing script that clicks meta link in hidden stackoverflow dropdown to the left:
// Straight from MDN
var evt = new MouseEvent("click", {
bubbles: true,
cancelable: true,
view: window
});
var cb = document.querySelectorAll("div.js-help-dialog li:nth-child(3) a.js-gps-track");
var canceled = !cb[0].dispatchEvent(evt);
This is what you should do. If you try to run their AJAX request you will find yourself re-inventing half of the whole application frontend.
Requirements:
When I clicked first time on menu item which has dropdown menu, It should show its dropdown and when I clicked on the same menu item second time it will redirect to its own page.
Please consider the situation. Menu item redirect to its own page only when its dropdown are opens
Reference Images:
Reference website link:
Reference website link
Note for referaence website:
1) Please open reference website link on mobile view.
2) Click on about page than Dental Page and than again About page , When you second time clicked on about page It goes to its own page. But on this occasion I want to open its dropdown and again If I clicked About page than it goes to its own page
Currently I am using jQuery bind function and disable link through event.preventDefault() but i didn't resolve my problem
Here's my code
jQuery Code:
$(document).ready(function(){
$(".flexnav li.parent-menu-item > a").bind("click.myclick", function(event) {
event.preventDefault();
$(".flexnav li .sub-menu").hide();
$(this).unbind(".myclick");
$(this).parents(".flexnav li.parent-menu-item").children(".sub-menu").toggle();
});
});
Sorry for my language mistakesThanks!
Instead of handling the click event inside the $(document).ready function, you should try doing it inline with each li.
<li id="link1" onclick="ShowMenu('#menu1', 'index.html')">
<ul class="dropdown" id="menu1">
...
</ul>
</li>
<li id="link2" onclick="ShowMenu('#menu2', 'aboutus.html')">
<ul class="dropdown" id="menu2">
...
</ul>
</li>
<script>
function ShowMenu(menuId, linkRef){
var display = $(menuID).css('display');
if(display == 'block')
window.location.href = linkRef;
else{
$('dropdwon').hide();
$(menuId).show();
}
}
</script>
So, here, what I am doing is to call the ShowMenu() function with the id of the menu I want to show, as the parameter and the url of the page linked to it.
The function then checks if that menu is being displayed or not. If being displayed then it redirects the user to the url. If not, then it proceeds to hide all other dropdowns and shows only the one that was clicked.
You can use CSS class toggle to see if the dropdown is open or not and perform the action accordingly. (Assuming your current code is working fine to open dropdown)
$("body").on("click",".flexnav li.parent-menu-item > a",function(e){
var dropdowns=$(this).parent('li').children(".sub-menu");
var menu=$(this).parents(".flexnav li.parent-menu-item").children(".sub-menu");
if(dropdowns.size()>0) {
if(!menu.hasClass('open')) {
e.preventDefault();
menu.addClass('open');
menu.show();
}
}
});
I'm using tabs with Twitter Bootstrap 3 and want one of them to function as an external link that opens a new window. I removed the data-toggle="tab" and added some JQuery to accomplish this. The code below doesn't work and gives me the following error message, however if I add class="active" to the li element, it works perfectly (other than that tab having incorrect styling). Why is this the case? How can I alter my code so I don't need class="active" on the parent li?:
HTML:
<li>
<a href="https://www.google.com/" class="external-link" target="_blank">
<span class="nav-text-wrapper">Example Tab Name</span>
</a>
</li>
Javascript:
$('.external-link').click(function(){
window.open($(this).attr('href'));
});
EDIT:
I found the solution. I had the following JQuery code to allow for nested tabs, but apparently this conflicted with me using external links on tabs
var $mainTabs = $('.tab-menu a');
$mainTabs.click(function (e) {
e.preventDefault();
$(this).tab('show');
});
How about this?
$('a.external-link').on('show.bs.tab', function (e) {
e.preventDefault(); // prevents the default tab selection behavior
window.open($(this).attr('href'));
});
show.bs.tab is an event that gets raised for a tab right before it is shown. By cancelling it with e.preventDefault(), you're interrupting the tab's show() function early on and inserting your own behavior. If you don't stop the show() function early like this, it will try to select the tab panel referenced in your href in order to show it. The error you were getting was because the tab plugin was trying to find a DOM element with a selector like this: $('https://www.google.com').
I am using Nightwatch.js to test a website. I want Nightwatch.js to click on a tab on the website, but the click is not working. At least it does not have an effect...
The HTML code of the element to click on looks like this.
<div>
<ul id="tabs">
<li id="tiresTab">
Word
</li>
</ul>
</div>
In Nightwatch.js I wrote:
.waitForElementVisible('li[id="tiresTab"]', 10000)
.click('li[id="tiresTab"]')
But nothing happens. The tab is not being opened. And the next command in Nightwatch is failing. This means that the click is being performed by Nightwatch, but the tab does not open. However I can open the tab when I manually click it. What could be the problem here?
you can do one thing, try the following code and run.
.waitForElementVisible('#tabs li#tiresTab a', 1000);
.click('#tabs li#tiresTab a', function (clickStatus) {
console.log(clickStatus.status);
});
and if above code doesn't work do one more thing within click call back perform click again like following.
.waitForElementVisible('#tabs li#tiresTab a', 1000);
.click('#tabs li#tiresTab a', function (clickStatus) {
browser.click('#tabs li#tiresTab a');
console.log(clickStatus.status);
});
it will work, happy testing!!! :)
<div>
<ul id="tabs">
<li id="tiresTab">
Word
</li>
</ul>
</div>
IN Nightwatch.js You write:
.waitForElementVisible('li[id="tiresTab"]', 10000)
.click('a[name="tires"]')
I think this will work.
Probably you're trying to click an element which isn't visible to the user. For example, you're clicking a dropdown option then -
Wait for the dropdown to be visible
click on the dropdown, now do the following in a callback :
wait for the dropdown option to be visible (do not mention a full css path!)
now click the dropdown option
A sample code is here -
.waitForElementVisible('.someClass > .btn-group:nth-child(3)',6000)
.click('.someClass > .btn-group:nth-child(3)',function(){
this.waitForElementVisible('#idOfOption',10000);
this.click('#idOfOption')
})
I am pretty new in JQuery and I have a question about addClass(). I spent some time to try to get this working, but seems like I did something wrong. I created a top menu with HTML and bootstrap. I assume visitors will land on my index.php first, so I created the class="active" for my index.php. Then if they click on any other link on the top menu (ex. About Us), then the class="active" will add to the and remove the class="active" from the "li" tab for index.php.
Below is my HTML code:
<div class="nav-collapse collapse">
<ul class="nav pull-right">
<li id="home" class="active"> Home</li>
<li id="about"> About Us</li>
<li id="browse"> Browse</li>
<li id="contact"> Contact</li>
</ul>
</div>
And below is the JQuery code that I use and try to get this done.
$(function (){
var sidebar = $('.nav');
sidebar.delegate("li", "click", function(){
if($(this).hasClass('active')){
//If click on the tab that is currently active, it will do nothing.
}else{
sidebar.find('.active').addClass('inactive');
sidebar.find('.active').removeClass('active');
$(this).removeClass('inactive');
$(this).addClass('active');
}
});
});
I tested it out on my local server. I could see the tab in my top menu turned to grey after I clicked it, but it didn't stay. So I am sure I did something wrong, but not sure where. I am really new in JQuery, so I hope I can learn from you guys. thank you!
When the link is clicked on, it takes the browser to a whole new page which starts a whole new javascript environment and nothing you've done to the current page carries over to the newly loaded page.
Thus the active class may be changed on the current page, but then a whole new page loads which inherits nothing from the first page (e.g. it's starts over from scratch). Your code from the first page is no longer in play once the new page is loaded.
You need to either just code the active class into each separate page (since each page knows what page it is) or have one common set of JS that sets the active class when the page loads based on the URL so it is intialized properly when the page loads.
Also, you probably don't need an inactive class. The default CSS state can represent the inactive look and the active class can apply a CSS override to show the active state.
This is not working, because when someone clicks on another link, they are redirected to a different page. However, your header doesn't really know which link was clicked on nor which page it is on. You need to let your header know which page you are. Does this make sense?
The other answers are correct, when you click on the tag you are opening a new page and therefore losing your javascript environment.
If you want to have a single page app, you can use preventDefault to stop the browser from following the link.
sidebar.delegate("li", "click", function(e){
e.preventDefault();
if($(this).hasClass('active')){
//If click on the tab that is currently active, it will do nothing.
}else{
sidebar.find('.active').addClass('inactive');
sidebar.find('.active').removeClass('active');
$(this).removeClass('inactive');
$(this).addClass('active');
}
});