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
Related
I have one fixed left side menu bar with 5 menus in layout.html page. each li contains separate html file.I am loading .body-content from external HTML.My doubt is when I click on menu list, regarding content should be displayed inside of body content.But in my code its navigating to new page. I know that is because of I gave directly file path to href.
can anyone tell me how to change Only .body-content data at the time of href is clicked?
layout.html
<ul class="nav main-menu">
<li class="dropdown" ng-repeat="parent in menu">
<a href="home.html" class="dropdown-toggle">
<i class="fa fa-tachometer"></i>
<span class="hidden-xs">Dashboard</span>
</a>
</li>
<li class="dropdown" ng-repeat="parent in menu">
<a href="usermanagement.html" class="dropdown-toggle">
<i class="fa fa-calendar"></i>
<span class="hidden-User Management</span>
</a>
</li>
</ul>
<div id="content">
<div class="body-content">
</div>
</div>
home.html
<h2>Sample content</h2>
<p>This HTML tutorial contains hundreds of HTML examples.
With our online HTML editor, you can edit the HTML, and click on a button to view the result.</p>
usermanagement.html
<h2>Sample content</h2>
<p>jQuery is a JavaScript Library.
jQuery greatly simplifies JavaScript programming.
jQuery is easy to learn.</p>
Just use the following jquery (ajax) function to load the html of another page in given div, you can also call this on page onload or any event.
$(function() {
$(".dropdown > a").click(function(e){
$( ".body-content" ).load( "usermanagement.html", function() {
alert( "page content has been loaded" );
});
});
}
It seems that you are using AngularJS in your code, you can also use the ng-include to load html page content as following way,
<div class="body-content" ng-include="usermanagement.html"></div>
What are you looking for is AJAX. Use ajax() method preferably because load() is actually deprecated, and get()/post() methods mentionated by the other users can be specified in ajax()(by default is GET).
You will also need html() to set the content of the div and preventDefault() method to stops the default action of the anchor from happening:
$(document).ready(function(){
$(".dropdown > a").click(function(e){
e.preventDefault()
var val = $(this).attr("href")
$.ajax({
url: val,
success: function(result){
$(".body-content").html(result);
}
});
});
});
You could use $.get() to get the data and html() to add it to your div.
$.get( "file.html", function( data ) {
$('.body-content').html( data );
});
To make your menu dynamic, I suggest to bind a function to all the anchors inside .main-menu:
$(function() {
$('.main-menu a').on('click', function(e) {
e.preventDefault(); /* prevent the link from opening */
var url = $(this).attr('href'); /* get the url */
$.get( url, function( data ) {
$('.body-content').html( data );
});
});
});
I am using one of the bootstrap snippet for login dropdown box in the login box there is a link for Join Us I wanted that when i click on Join Us, the content within the box should get replaced by another box that contains login credentials
I modified the following code
New here ? <b>Join Us</b>
with the code below
New here ? <b>Join Us</b>
and created another content that had id signup-dp like this
<ul id="signup-dp" class="dropdown-menu">
// signup data Inside this part
</ul>
Now when i click on the Join Us link the url of the page gets changed i.e #signup in the end of the url, but the content does not get displayed,
can anyone please tell how to do so
Please check jquery included or not.
Use return false like below
<b>Join Us</b>
#signup-dp{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<b>Join Us</b>
<div id="login-dp">login-dp</div>
<div id="signup-dp">signup-dp</div>
Its very simple and you code is working for me only.
<a href="#" onClick="$('#login-dp').hide(); $('#signup-dp').show()">
<b>Join Us</b>
</a>
<a href="#" onClick="$('#login-dp').show(); $('#signup-dp').hide()">
<b>Login</b>
</a>
<ul id="signup-dp" class="dropdown-menu">
// signup data Inside this part
</ul>
<ul id="login-dp" class="dropdown-menu">
// login data Inside this part
</ul>
Please follow this link . JSfiddle
Onclick jQuery is not working, So user Javascript code
New here ? <a href="#" onclick='document.getElementById("login-dp").style.display = "none";document.getElementById("signup-dp").style.display = "visible";'><b>Join Us</b></a>
Put the new hidden element somewhere before your existing element.
unless you write your jQuery code in $(document).ready(); in a separate file, or internal.
Your code is correct. But please check have you included jquery file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
This jquery should be included before the jquery code you have written.
Put following jquery code to make signup div initially hidden.
<script type="text/javascript">
$(document).ready(function(){
$("#signup-dp").hide();
});
</script>
First of all, for make good programming habit you have to bind click event instead of write javascript code inside of tag onClick attribute.
<b>Join Us</b>
In your javascript code (try to write code in other js file instead of inline code in HTML page.)
$(document).ready(function(){
$("#btn_join_us").click(function(e){
e.preventDefault();
$('#login-dp').hide();
$('#signup-dp').show();
return false;
});
});
This kind of code make some secure event binding. otherwise anyone can make change your code from inspect element and execute this.
I have a header.jsp file
$(document).ready(function() {
alert("calling in header");
$(document).on('click', '#get-info-list', function(event) {
event.preventDefault();
alert('hiiiiiii');
$.get('getNotification', function(data) {
console.log(data);
$("#infolist").append(data);
});
});
});
Some where in code
<li class="dropdown">
<span id="info-count"></span>
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="get-info-list">
<i class="fa fa-list-alt" ></i>
</a>
<ul class="dropdown-menu" id="infolist" role="menu">
</ul>
</li>
I have a test.jsp file where in header div id i have added above header.jsp
<div id="header">
<jsp:include page="/pages/common/header.jsp"/>
</div>
Here I am running test.jsp file script on header.jsp is excecuting and
showing alert calling in header but it is not calling method below it.
On console also it is not printing any error.
what may be the problem??
How to resolve this??
I asked the related problem here. It is working properly on same file.
But on my system this is not working.
Try to wrap your click event inside a function and add onclick="functionName(event)" to your get-info-list element and see what happens.
JS:
function clickMe(evt){
evt.preventDefault();
alert('hiiiiiii');
$.get('getNotification', function(data) {
console.log(data);
$("#infolist").append(data);
});
}
HTML:
<a href="#" class="dropdown-toggle" data-toggle="dropdown" id="get-info-list" onclick="clickMe(event)">
If your code is working on same file, then I guess that you're loading the html file/those elements later on page (via ajax request for eg), so all the bindings will not be available for those elements because they don't exists when the script is loading.
Javascript code will not execute unless you'll specify script tags, add your js code inside script tag in your header.jsp.
Thanks
If another library uses the dollar sign, it will override it if that library is included after the $(document).ready() call, you can safely use the $ parameter passed by $(document).ready() like this:
jQuery( document ).ready(function( $ ) {
$(document).on('click', '#get-info-list', function(event) {
event.preventDefault();
alert('hiiiiiii');
$.get('getNotification', function(data) {
console.log(data);
$("#infolist").append(data);
});
});
});
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>
I am trying to make a button bar that changes an attr of a defined object but cannot get it to work. See below code snippets (CSS Not included):
Button Bar Code
<ul id="filtering-nav">
<li class="work button active" value="../servlet/Web">Work</li>
<li class="like button" value="../servlet/Home">home</li></ul>
Script Code
<script> var buttons = $("#filtering-nav .button"); buttons.click(function(){
buttons.removeClass("active");
$(this).addClass("active");
$( "#alpha100" ).attr("data", $("#filtering-nav .button.selected").val() );});</script>
Target Object Code
<object id='alpha100' type="text/html" data="" width="100%" height="100%"></object>
Does anyone know what I am doing wrong here?
I can get something similar to work with a drop down box.
You seem to want .button.active instead of .button.selected.
But you can make your code simpler :
var buttons = $("#filtering-nav .button");
buttons.click(function(){
buttons.removeClass("active");
$(this).addClass("active");
$("#alpha100" ).attr("data", $(this).attr('value'));
});
Note that today custom attributes should be named data-something. data and value aren't good attribute names. Using standard custom data attributes, you'd use the specific data function :
$("#alpha100" ).data("something", $(this).data('otherthing'));
I don't know what is happening behind the scenes when you try to use value for a li tag. That might be part of the problem so I suggest you this approach (using data attribute)
HTML
<ul id="filtering-nav">
<li class="work button active" data-value="../servlet/Web">Work</li>
<li class="like button" data-value="../servlet/Home">home</li>
</ul>
JS
<script>
var buttons = $("#filtering-nav .button"); buttons.click(function(){
buttons.removeClass("active");
$(this).addClass("active");
$( "#alpha100" ).attr("data", $("#filtering-nav .button.selected").data('value') );});
</script>
Something else (as dystroy pointed out): did you mean .button.active instead of .button.selected?