I have an ASP.net project which used Bootstrap controls. I have the following Bootstrap dropdown menu which pulls in the list items programmatically from a database.
However, when i click on the menu and select one of the items, i obviously need that item to show in the dropdown box. Instead, when an item is clicked, nothing happens apart from the dropdown menu is closed.
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" id="merchantList" data-toggle="dropdown" aria-expanded="false"> Choose Merchant <span class="caret"></span></button>
<ul class="dropdown-menu" role="menu" aria-labelledby="merchantList" id="myList" runat="server">
<asp:Literal runat="server" id="merchantDropDown"></asp:Literal>
</ul>
</div>
I'm assuming some kind of JavaScript is needed to set the dropdown menu to whichever item has been selected. But i'm not sure how to do it.
I've tried:
$("#myList li a").click(function () {
alert('clicked');
var selText = $(this).text();
$(this).parents('.btn-group').find('.dropdown-toggle').html(selText + ' <span class="caret"></span>');
});
also tried:
$('#myList li a').on('click', function () {
$('#merchantList').val($(this).text());
});
But these never seems to get called. Any ideas? It would be even better if I could do this in the code behind as I prefer to work back there.
Correct me if I am misunderstanding what you are looking to do but shouldn't you be able to find the item that they selected and set its css class="active". To figure out that the current item they selected matches the current page they are on there are several techniques using the URL.
Try doing something like the following on your master page:
var url = window.location;
$('ul.nav a[href="'+ url +'"]').parent().addClass('active');
I did it like this in the end and it seems to all be working. Simple enough i just couldn't figure it out as i'm a JS newbie!
<script>
$().ready(function () {
$('a').click(function () {
var value = $(this).text();
$('#merchantList').html(value + ' <span class="caret"></span>');
alert(value);
});
});
</script>
Related
Hi I'm working on a MVC application that has a drop down menu in it, and the items
in this drop down are fetched from the DB via a foreach.
foreach (Category item in Model.CategoriesV){
<input type="submit" class="dropdown-item" id="Show"
value="#item.CategoriesName" name="CategName" />
}
I get 3 results from this for each (Mobiles-Consoles-Tablets),
I have another div that contains an image gallery.
I used this code to hide this gallery once I click on an item in the drop down menu.
Here's the image galley(I put it in a Partial View)
<div id="ImageGalleryDiv">
#Html.Partial("_ImageGallery", Model)
</div>
And here's the script that I used to hide the gallery once I click on drop down items list.
<script>
$(document).ready(function () {
$('#Show').click(function () {
$('#ImageGalleryDiv').hide("100");
});
});
Everything is working fine when I click on Mobiles (the first item in the drop down),the others items aren't working.
Any help would be appreciated.
id should be unique. That is it's purpose. Uniquely identifying an element. You are not allowed to use duplicate id's on a page. It can result in unwanted behavior like you are experiencing now. Basically, jQuery gets the first element that it finds with the id and then ignores all the other. Also in plain javaScript we not not have a getElementsById method but getElementById.
Read more about it here -> Why are duplicate ids not allowed in HTML
So you can use a class instead.
Also, class and id should be lowercase and dash separated string-string ( if the consist of multiple words ) , not camelCase.
See example below
const categories = ['Mobiles', 'Consoles', 'Tablets']
categories.forEach(categ => {
const input = `<input type="submit" class="dropdown-item show" id="show-${categ}" value=${categ} name=${categ} />`
$('#categories').append(input);
});
$('.show').click(function() {
$('#image-gallery-div').hide("100");
});
#image-gallery-div {
height: 100px;
background: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="categories">
</div>
<div id="image-gallery-div">
</div>
I have made a simple dropdown list in which the data is filled by the ajax call.
Here is the code(for simplicity,I am just sharing the body content of the html page):
<body>
<div class="dropdown">
<span id ="id-wala" class="glyphicon glyphicon-th-large btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
</span>
<span id="notification_count"></span>
<ul id ="fill_list" class="dropdown-menu" aria-labelledby="id-wala">
</ul>
</div>
<script type="text/javascript">
$("#id-wala").click(function(){
/*$("#id-wala").click(function(){
$("#id-wala").addClass("selected");
});*/
//$("#id-wala").next('ul#fill_list').hide();
$.ajax({
type:"GET",
url:"notification_list.php",
beforeSend: function(html) {
$("#fill_list").html('');
//$("#jk").show();
},
success: function(html){
$("#fill_list").show();
$("#fill_list").append(html);
}
});
});
</script>
</body>
On clicking the dropdown icon,the click event is fired and a get request is made to notification_list.php,it correctly echoes the data which is then showed on the html page.
The problem is that when I click the dropdown icon again,the list doesn't disappears.Maybe it's because of the click event,I tried to attach some events within the click event(commented in the code) to remove the dropdown list but they don't seem to work.
Can anyone please suggest how to add another event to remove this list?
It's because you are manually showing the dropdown when the AJAX comes back:
success: function(html){
$("#fill_list").show();
...
Bootstrap JavaScript already handles hiding/showing, you don't need to do it.
Another problem is that you are doing AJAX calls on both opening and closing the dropdown. You should probably do it on opening only.
I'm working on a wordpress site with a mobile dropdown menu. The dropdown works fine but clicking on any link in the dropdown menu just closes the menu and doesn't go to the link.
I can't find the JS code for this functionality so is there any code I can add to make sure clicking on any menu item within the menu div won't close the menu?
Below is the html.
Here's the site: www.nomad8.com
<header class="edgtf-mobile-header">
<div class="edgtf-mobile-header-inner">
<div class="edgtf-mobile-header-holder">
<div class="edgtf-grid">
<div class="edgtf-vertical-align-containers">
<div class="edgtf-mobile-menu-opener">
<a href="javascript:void(0)">
<span class="edgtf-mobile-opener-icon-holder">
<i class="edgtf-icon-font-awesome fa fa-bars " ></i> </span>
</a>
</div>
</div>
</div>
</div>
</div>
<nav class="edgtf-mobile-nav">
<div class="edgtf-grid">
<ul id="menu-production-1" class=""><li id="mobile-menu-item-5597" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item current_page_item menu-item-home edgtf-active-item"><span>menuiteams</span></li></span></a></li>
</ul>
</div>
</nav>
</div>
</header>
UPDATE:
I've added this code to the header and it kind of works. But the anchor tags don't work all the time. Only on the first click:
(function($) {
$(document).ready(function(){
$(".edgtf-mobile-menu-opener").click(function(){
$('.edgtf-mobile-nav').fadeToggle(300);
$('.edgtf-mobile-nav').css("display", "block");
$('.edgtf-mobile-nav').css("height", "100px !important");
e.stopPropagation();
});
$(".edgtf-mobile-nav .edgtf-grid").click(function(e){
e.stopPropagation();
});
$('.edgtf-mobile-nav > li').click(function(){
$('.edgtf-mobile-nav').fadeIn('fast');
});
});
})(jQuery);
I wish i could inspect your code in chrome broswer. That would have helped to determine the menu list wrapper/container.
But i am guessing that your wrapper is edgtf-mobile-menu-opener
However, you can target the wrapper that contains mobile menu list and the do something like this:
$(document).ready(function(){
$(".edgtf-mobile-menu-opener").click(function(){
$('.edgtf-mobile-nav').fadeToggle(2000)
});
fadeToggle will fade the menu in and it will stay until you click the menu-icon again
Just try that first and lets see
Well, clear the cache.
However, i would like to know where you added the script to in your wp theme because you can be adding it wrongly.
Add this to the CSS. It's an issue with the theme framework itself it looks like. I had this issue myself and this worked as a fix.
.dropdown-backdrop{
position: static;
}
That is most probably because you toggle (open/close) the navigation whenever you click on .edgtf-mobile-header.
Try to change the toggle selector to .edgtf-mobile-opener-icon-holder.
Thanks to #Dayo-Greats answer I managed to work this out..kind of.
Here's the code that makes things work. But for some reason #anchortag menu links still don't work. Otherwise the links are now clickable. Any reason wy the anchor tags wouldn't work?
Here's my code:
(function($) {
$(document).ready(function(){
$(".edgtf-mobile-menu-opener").click(function(){
$('.edgtf-mobile-nav').fadeToggle(300);
$('.edgtf-mobile-nav').css("display", "block");
$('.edgtf-mobile-nav').css("height", "100px !important");
e.stopPropagation();
// return;
});
$(".edgtf-mobile-nav .edgtf-grid").click(function(e){
e.stopPropagation();
// return;
});
});
})(jQuery);
I don't have a privilege to make a comment yet.
However, you did not pass the function argument(function()) before you called e.stopPropagation(); as seen below:
(function($) {
$(document).ready(function(){
....
e.stopPropagation();
Quickly fix a bug in the your new code like this function(e)
(function($) {
$(document).ready(function(e){
....
e.stopPropagation();
Try it again and lets see
At the same time, i am thinking you can use another approach that shows the menu again, even when you clicked on the menu li element like this:
....
$(".edgtf-mobile-menu-opener").click(function(){
$('.edgtf-mobile-nav').fadeToggle('slow', function(){
#-> trying to target ul>li
$('.edgtf-mobile-nav > li').click(function(){
#-> and when clicked ('.edgtf-mobile-nav > li') then show menu again
$('.edgtf-mobile-nav').fadeIn('fast');
})
...just thinking anyway
I have a simple dropdown like this:
<div class="btn-group">
<a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li>Choice1</li>
<li>Choice2</li>
<li>Choice3</li>
<li class="divider"></li>
<li>Choice..</li>
</ul>
</div>
and JavaScript for choosing one of the options like this:
$(".dropdown-menu li a").click(function(){
$(".btn:first-child").html($(this).text()+' <span class="caret"></span>');
});
My drop down is not working, the option I choose from the dropdown does not get chosen, and in-fact my script.js file doesnt even appear in the source whiles while I try to debug in chrome.
I initialise my script file at the top of my html file like this
<script type="text/javascript" src="source/script.js"></script>
what am I doing wrong ?
You need to run your code when document is ready:
from jQuery:
$( document ).ready(function() {
or
$(function() {
If you run your code before the document is ready your code cannot work because the elements like $(".dropdown-menu li a") are not yet in the document.
So wrap your code in the document ready.
$(function () {
$(".dropdown-menu li a").click(function(){
$(".btn:first-child").html($(this).text()+' <span class="caret"></span>');
});
});
There appears to be nothing wrong with your code (I have a working example of it here https://jsfiddle.net/xzfq7q5t/ ) however your script tag's path may be wrong.
What does your file structure look like? In other words, where does your script.js file live in relation to your html page? Is it in the same folder? Is it in a 'source' folder?
<script type="text/javascript" src="source/script.js"></script>
The above is saying, go to my current folder, then go inside the source folder, then look for script.js
This question already has answers here:
Attaching click event to a JQuery object not yet added to the DOM [duplicate]
(10 answers)
Closed 8 years ago.
I'm using multiple Bootstrap dropdown controls and need to set a value to an input field when a list item of a specific dropdown is selected. For example, say I have 3 dropdowns:
ulSaukContact
ulMoselContact
ulShipContact
All three are running on the server, and I need to get the value of each so I can save them somewhere. So I figured I should probably save the value of each to a hidden input field that I can reference later. Here is my attempted JS code for doing this:
$("#ulSaukContact li a").on("click", function () {
alert('sauk'); // <--- Alert is not shown
var elem = document.getElementById("inpSaukValue");
elem.Value = $(this).text();
});
and the accompanying markup
<div class="dropdown">
<button type="button" class="btn btn-default dropdown-toggle" id="btnSaukList" data-toggle="dropdown" runat="server"
style="width: 100%;">
<span style="padding-right: 250px;">Select a Saukville contact</span>
<span class="caret"></span>
</button>
<ul id="ulSaukContact" class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1" runat="server" style="width: 100%">
<!--NOTE: Intentionally left blank; li's are generated by code behind to populate users from Sharepoint.-->
</ul>
<input id="inpSaukValue" type="hidden" />
</div>
When I run the app and select a value in the Saukville dropdown, no alert is displayed. Note that the li's and a's within the ul is created on Form_Load so they can be populated with data. I think my selector is wrong. I cleared out my cached files in Chrome (which caused issues before) and I still do not see the alert.
Any advice appreciated (thanks for all the recent JS/BS/JQ advice)...
Because the elements don't exist at the time you're attempting to bind events to them, you need to delegate events to the containing element with on:
$("#ulSaukContact").on("click", "li a", function () {
...