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);
});
});
});
Related
I want to add click for tags <a> and at the same time add attribute "active" for the current <a>;
I had done it like this, but it doesn't work:
HTML:
<div class="leftFocus">
<a class="leftFocusItem active" href="/" ><i class="fa fa-fire mr5 text-red fa-fw"></i>今日动态</a>
<a class="leftFocusItem" href="/recommend"><i class="fa fa-user-plus mr5 text-violet fa-fw"></i>您的关注</a>
<a class="leftFocusItem" href="/activity" ><i class="fa fa-gamepad mr5 text-blove fa-fw"></i>热门活动</a>
<a class="leftFocusItem" href="/rank" ><i class="fa fa-trophy mr5 text-yellow fa-fw"></i>排行榜</a>
</div>
JS:
$(document).ready(function(){
"use strict";
$('.leftFocus a').on('click', function(){
$(this).addClass('active').siblings('.leftFocusItem').removeClass('active');
});
});
How should to write the right js for this problem?
Your logic is fine but you will lose what has been selected as soon as the browser loads a new page.
You could add preventDefault() to the code to stop the browser from following the link, but then the links won't work ;)
$(document).ready(function(){
"use strict";
$('.leftFocus a').on('click', function(e){
// link will have correct class but no longer will navigate
e.preventDefault();
$(this).addClass('active').siblings('.leftFocusItem').removeClass('active');
});
});
It seems like you should instead be checking to see which link is the current path and setting the class on that, like so:
"use strict";
$(document).ready(function(){
document.querySelectorAll('.leftFocus a').forEach(function (link) {
if (link.href === window.location.href) {
link.classList.add('active');
}
});
});
Clicking a link causes the browser to leave the current page and load a new one.
Any DOM modifications you make to the current page will be lost.
You need to add the class in the new page. Ideally, you would do this using server-side code but you could use client-side JavaScript by comparing location.href to the href property of each link in the menu.
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 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
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.
My function is not fired when the tag is clicked. Here is my code:
HTML:
<div data-role="footer">
<div data-role="tabstrip" id="tabs">
Home
Settings
<a onclick="signOff()" href="views/home.html" data-icon="settings" id="contacts">Log Out</a>
</div>
</div>
JavaScript:
function signOff() {
console.log("something");
VCare.VCareWebService.signOff({cache:false,
callback:function(xml) { // invoke the service
// use jQuery to extract information we are interested in
console.log(xml);
}
});
}
You can't have both an onClick function and valid href attribute in <a>.
Change your anchor element to:
<a onclick="signOff()" href="javascript:void(0)" data-icon="settings" id="contacts">Log Out</a>
You can redirect the page using javascript if you want to.
Another way is to make sure that your onclick returns a false to stop the default event from running.
<a onclick="signOff(); return false" href="views/home.html" data-icon="settings" id="contacts">Log Out</a>
Or..
<a onclick="return signOff();" href="views/home.html" data-icon="settings" id="contacts">Log Out</a>
function signOff() {
console.log("something");
VCare.VCareWebService.signOff({cache:false,
callback:function(xml) { // invoke the service
// use jQuery to extract information we are interested in
console.log(xml);
}
});
return false;
}
you need to change your A tag to
<a href="javascript:signOff();
window.location = "views/home.html" data-icon="settings" id="contacts">Log Out</a>
I would recommend not using the onclick method. Not only does it apparently conflict with the default href operation, but it can also cause some minor visual issues where clicking in the margins of the element, etc., can call the function without highlighting the text the way you would expect in a normal link.
Instead, use:
Log Out
Then just change the page address programatically in the signOff function, using this.document.location.href = location or similar
EDIT: it's looking like window.location works better. +1 for Omar, looks like he has the same answer