I'm loading data from a PHP page with JQuery and it works fine. Now I want that when I click on one of these loaded elements an alert shows the id of the selected element. How can I do? Because I want to send the if later on using ajax. I tried this code, but it didn't work.
HTML
<li><strong>CATEGORY</strong><span> MENU ELEMENTS</span>
<ul class="sub-menu">
<li><a id="id_1" data-target='post_category'>Sub_1</a></li>
<li><a id="id_2" data-target='post_category'>Sub_2</a></li>
<li><a id="id_3" data-target='post_category'>Sub_3</a></li>
<li><a id="id_4" data-target='post_category'>Sub_4</a></li>
<li><a id="id_5" data-target='post_category'>Sub_5</a></li>
<li><a id="id_6" data-target='post_category'>Sub_6</a></li>
<li><a id="id_7" data-target='post_category'>Sub_7</a></li>
<ul>
</li>
JQuery
<script>
$(document).on("click", "a", function() {
alert('worked!');
});
</script>
sending data code
$(document).on("click","a",function(e){
$.ajax({
type: "POST",
data: "id=" + $(this).attr("id"),
url: "post_category.php"
});
});
as I wrote that the alert didn't appear which mean click event in JQuery code doesn't work for some reason.
Thank you for your tips I tried them all, but the found the cause of the problem it's from the script that loading the page using ajax.
<script>
$(document).ready(function(){
//set trigger and container
var trigger = $('#nav ul li a'),
container = $('#container');
//do on click
trigger.on('click', function(e){
/***********/
e.preventDefault();
//get the link location that was clicked
pageurl = $(this).attr('href');
//to change the browser URL to th if(pageurl!=window.location){
window.history.pushState({path:pageurl},'',pageurl+'.php');
/* reload content without refresh */
//set loading img
$('#container').append('<div id = "loading">WAIT... <img src = "img/ajax-loader-small.gif" alt="Currently loading" /></div>');
//change img location to center
$("#loading").css({"position": "absolute", "left": "50%", "top": "50%"});
//get the trigger to reload the contents
var $this = $(this),
target = $this.data('target');
container.load(target + '.php');
return false;
});
});
// fix url in the browser when click on backward and foreword arrows
$(window).bind('popstate', function() {
$.ajax({url:location.pathname+'?rel=tab',success: function(data){
$('#container').html(data);
}});
});
</script>
I really don't know which part that cause this problem. Please help/
I think the probelm is with your identification of which element is clicked. I would do it this way: First, in your html move the id to the li element
<ul>
<li><strong>CATEGORY</strong> MENU ELEMENTS
<ul class="sub-menu">
<li id="id_1"><a data-target="post_category"></a>Sub_1</li>
<li id="id_2"><a data-target="post_category"></a>Sub_2</li>
<li id="id_3"><a data-target="post_category"></a>Sub_3</li>
<li id="id_4"><a data-target="post_category"></a>Sub_4</li>
<li id="id_5"><a data-target="post_category"></a>Sub_5</li>
<li id="id_6"><a data-target="post_category"></a>Sub_6</li>
<li id="id_7"><a data-target="post_category"></a>Sub_7</li>
</ul>
</li>
</ul>
You should then be able to get the id with:
jQuery("#container-fluid > section > div > div.box-body > ul > li > ul").children().on("click", function() {
alert('worked!');
alert(this.id);
});
Try below code. It's working fine.
<li><strong>CATEGORY</strong><span> MENU ELEMENTS</span>
<ul class="sub-menu">
<li><a id="id_1" class="abc" data-id="id_1" data-target='post_category'>Sub_1</a></li>
<li><a id="id_2" class="abc" data-id="id_2" data-target='post_category'>Sub_2</a></li>
<li><a id="id_3" class="abc" data-id="id_3" data-target='post_category'>Sub_3</a></li>
<li><a id="id_4" class="abc" data-id="id_4" data-target='post_category'>Sub_4</a></li>
<li><a id="id_5" class="abc" data-id="id_5" data-target='post_category'>Sub_5</a></li>
<li><a id="id_6" class="abc" data-id="id_6" data-target='post_category'>Sub_6</a></li>
<li><a id="id_7" class="abc" data-id="id_7" data-target='post_category'>Sub_7</a></li>
<ul>
</li>
<script type="text/javascript">
$(".abc").click(function () {
var id_value = $(this).data('id');
alert(id_value);
});
</script>
I believe you are setting up click events before the links are added to the dom. Ajax calls are a little bit different than the regular functions. They don't block your code so when you do an ajax call, javascript calls the function and doesn't wait for the response. It goes and implements the rest of the functions.
Simpler version of your function
$.get(url, function (data) {
// success -> Usually just calling your function here solves the problem.
}).done(function () {
setupClickListener(); // If it doesn't append this to it for extra security.
});
function setupClickListener(){
$(document).on("click", "a", function() {
alert('worked!');
});
}
The problem is return false in the loading receipt.
I removed return false and kept e.preventDefault(); so it will do the same thing.
Related
jQuery doesn't process dynamically added anchor tags. The <li> <a> tags are added more dynamically. The below code works to add attributes for the anchor's tags that are already there but more pagination is added by XHR AJAX calls and the .each() function doesn't work.
$(document).ready(function () {
$("ul.page-selector-list li a").each(function () {
var pageText = $(this).text();
$(this).attr("aria-label", "click here for " + pageText);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="page-selector-list">
<li class="page-selector-item-first inactive">First</li>
<li class="page-selector-item-previous inactive">Previous</li>
<li><a class="page-selector-item-link active" data-offset="0" data-itemnumber="1" href="#">1</a></li>
<li><a class="page-selector-item-link" data-offset="10" data-itemnumber="2" href="#">2</a></li>
<li><a class="page-selector-item-link" data-offset="20" data-itemnumber="3" href="#">3</a></li>
<li><span class="page-selector-more">...</span></li>
<li><a class="page-selector-item-link" data-offset="2020" data-itemnumber="203" href="#">203</a></li>
<li class="page-selector-item-next">Next</li>
<li class="page-selector-item-last">Last</li>
</ul>
Please try below code when you find your code is not working after AJAX:
$( document ).ajaxComplete(function() {
$('ul.page-selector-list li a').each(function(){
var pageText = $(this).text();
$(this).attr('aria-label', 'click here for '+ pageText);
});
});
Please let me know if you find any issues.
Here I have a tab-based nav-bar and I want to the active class functionality when someone clicks on the tab.
EX- Let us click the second tab, it should be active and fetch the data from URL on click.
Here the problem is in my code is - when I am clicking on the second tab the class is showing active but the content is not displaying.
Could you guys suggest any solution to render data dynamically from the database and set the active class to that tab when I click on that?
<div class="box-header">
<ul class="nav nav-tabs">
<li class="active" >Delhi</li>
<li>Mumbai</li>
</ul>
</div>
<script>
$(document).ready(function () {
$('.nav li a').click(function(e) {
$('.nav li.active').removeClass('active');
var $parent = $(this).parent();
$parent.addClass('active');
e.preventDefault();
});
});
/script>
Please refer to this fiddle. You can use data attributes like in this fiddle.
JS Code:
$(document).ready(function () {
$('.nav li').click(function(e) {
var $_this = $(this)
$('.nav li').removeClass('active');
$_this.addClass("active");
var url = $_this.attr("data-url");
var data = {} //your post data
$.ajax({
method: "POST",
url: "some.php",
data: { name: "John", location: "Boston" }
})
.done(function( msg ) {
// Do somthing with your data
});
e.preventDefault();
});
});
HTML:
<ul class="nav nav-tabs">
<li class="nav-item active">
<a class="nav-link" data-url="/delhi/list_sudents">Mumbai</a>
</li>
<li class="nav-item">
<a class="nav-link" data-url="/delhi/list_sudents">Delhi</a>
</li>
I'm trying to add "active" class to menu when user clicks on the button but for some reason it's not working correctly. They have to click really fast and two times. I've tried both click and on click function but still not working.
$('#menu li').click(function() {
$('#menu li.active').removeClass('active');
$(this).addClass('active');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right" id="menu">
<li class="nav active">Home
</li>
<li class="nav">About
</li>
<li class="nav">Services
</li>
<li class="nav">Gallery
</li>
<li class="nav">Contact
</li>
</ul>
</div>
you must handle active li after page loaded.Add this at the end of your code:
var curruntLocation = window.location.href;
$('#menu li a').each(function ()
{
var thisHref = $(this).attr('href');
if (curruntLocation.indexOf(thisHref) > 0)
{
$(this).parent().addClass('active');
}
});
The links included in the menu items are reloading the page while clicking and when the page is reloaded, the initial setting comes first. You can use preventDefault() if you'd like to run the function but then, your links won't work.
I suggest you use anchors instead of query string.
I have a href link for my unordered list.
When the page loads for the first time, only the welcome page is visible as expected.
When I click on the list for the first time after the page loads, I get the desired results on the desired div after clicking on the href link on the ul li.
However, if I subsequently click on the other tab, the results are displayed on the one I had clicked before. For example, if i click on href #tab2a, the results will be displayed on #tab2b and vice versa. AJAX will direct results to the div I clicked on previously.
I'm at a loss here! How can I force the results to be displayed in the div that's referenced by the href id tag? I'm using an if else if condition; is this the right approach?
JS
$(document).ready(function() {
$("#tab2").hide();
$("#tab3").hide();
$("#tab6").hide();
$("#tab2a").hide();
$("#tab2b").hide();
$('ul li a').click(function() {
href = undefined;
if (($(this).attr('href')) == "#tab2a") {
var href = $(this).attr('href');
$.ajax({
url: "http://mypage1_action=execute"
}).done(function(data) {
$(href).html(data);
});
$(href).show();
$('form#tab div:not(' + href + ')').hide();
} else if (($(this).attr('href')) == "#tab2b") {
var href = $(this).attr('href');
$.ajax({
url: "http://mypage1_action=execute"
}).done(function(data) {
$(href).html(data);
});
$(href).show();
$('form#tab div:not(' + href + ')').hide();
} else {
$(href).show();
$('form#tab div:not(' + href + ')').hide();
};
});
HTML
<form id="cssmenu">
<ul>
<li class='active'><a href='#tab1'><span>Home</span></a>
</li>
<li class='has-sub'><a href='#tab2'><span>Tab2</span></a>
<ul>
<li><a href='#tab2a'><span>Tab 2a</span></a>
</li>
<li><a href='#tab2b'><span>Tab 2b</span></a>
</li>
<li class='last'><a href='#tab2c'><span>Tab 2c</span></a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#tab3'><span>Tab 3</span></a>
<ul>
<li><a href='#'><span>Tab 3a</span></a>
</li>
<li><a href='#'><span>Tab 3b</span></a>
</li>
<li class='last'><a href='#'><span>Tab 3c</span></a>
</li>
</ul>
</li>
<li class='has-sub'><a href='#tab4'><span>Tab 4</span></a>
<ul>
<li><a href='#'><span>Company</span></a>
</li>
<li class='last'><a href='#tab5'><span>Contact</span></a>
</li>
</ul>
</li>
<li class='last'><a href='#tab6'><span>Contact</span></a>
</li>
</ul>
</form>
<form id="tab" class=".allclass">
<div id="tab1" class='active'>
<h1>Welcome Page</h1>
</div>
<div id="tab2">
</div>
<div id="tab2a">
</div>
<div id="tab2b">
</div>
<div id="tab3">
</div>
<div id="tab6">
</div>
</form>
Here is the fiddle: https://jsfiddle.net/kBoni/1ag0ymh/#&togetherjs=m9pPoV3yoy
This is probably caused because by the time the .done() executes, the value of the href variable may have changed because you've clicked another tab, a simple way to avoid that is to wrap the ajax() code into a new function, and pass the href value as a parameter
function changeTab(href) {
$.ajax({
url: "http://mypage1_action=execute"
}).done(function(data) {
$(href).html(data);
});
$(href).show();
$('form#tab div:not(' + href + ')').hide();
}
$(document).ready(function() {
$("#tab2,#tab3,#tab6,#tab2a,#tab2b").hide();
$('ul li a').click(function() {
href = undefined;
if (($(this).attr('href')) == "#tab2a") {
var href = $(this).attr('href');
changeTab(href);
} else if (($(this).attr('href')) == "#tab2b") {
var href = $(this).attr('href');
changeTab(href);
} else {
$(href).show();
$('form#tab div:not(' + href + ')').hide();
};
});
});
Now, if you also want to have a different url for every tab, (which you probably do), you can add it as a data-attribute to your a and pass it to the function:
function changeTab(href,url) {
$.ajax({
url: url
}).done(function(data) {
$(href).html(data);
});
$(href).show();
$('form#tab div:not(' + href + ')').hide();
}
.
.
.
if (($(this).attr('href')) == "#tab2a") {
var href = $(this).attr('href');
var url = $(this).attr('data-url');
changeTab(href,url);
}
how do i keep selected tab active after page reload or refresh i have working on drop line navigation menu
function is working fine for parent ul li and also parent active when click on parent link
but problem is that when i click on sub menu link and redirect to another page then clicked parent ul li didn't active and every-time Home Tab active or highlight whenever page refresh or redirect to another page
for example i want like this
Account Menu is parent menu and child menu like user profile and user accounts
when i click user profile or user accounts script should active or highlight
Account Menu Tab Not Home Tab
Here Javascript
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(function () {
$("li:first-child").addClass("active");
$('li').click(function () {
$('.secondary li').removeClass('active');
$(this).addClass('active');
});
})
});//]]>
</script>
Html Code
<div role="navigation" id="navPrimary">
<ul class="secondary">
<li >Home</li>
<li>Account Menu
<ul>
<li>OVERVIEW</li>
<li>EDIT PROFILE</li>
<li>MANAGE EMAILS</li>
<li>EDIT PASSWORD</li>
<li>CREDIT CARDS</li>
<li>BANK ACCOUNTS</li>
<li>CLOSE ACCOUNT</li>
<li>LOGOUT</li>
</ul>
</li>
<li>Payments Menu
<ul>
<li>OVERVIEW</li>
<li>EDIT PROFILE</li>
<li>MANAGE EMAILS</li>
<li>EDIT PASSWORD</li>
<li>CREDIT CARDS</li>
<li>BANK ACCOUNTS</li>
<li>CLOSE ACCOUNT</li>
<li>LOGOUT</li>
</ul>
</li>
<li>Request Money
<ul>
<li>Manage Invoices</li>
<li><a href="" >Request Money</a></li>
<li><a href="" >Create Invoice</a></li>
<li><a href="" >Invoice Settings</a></li>
</ul>
</li>
<li><a href="#" >Merchant Services</a></li>
<li><a href="#" >Products & Services</a></li>
</ul>
</div>
Updated Javascript but not working
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
$(document).ready(function () {
var index = Cookies.get('active');
$('.secondary').find('a').removeClass('active');
$(".secondary").find('a').eq(index).addClass('active');
$('.secondary').on('click', 'li a', function (e) {
e.preventDefault();
$('.secondary').find('a').removeClass('active');
$(this).addClass('active');
Cookies.set('active', $('.clearfix a').index(this));
});
});
}//]]>
</script>
You will definitely store somewhere the data, wich was the last active tab. If you want to do this on client side only, one solution can be the cookies. See here: How do I set/unset cookie with jQuery?
If you are using HTML5, then you can use web storage. See here.
If you are rendering your page by PHP, you can use $_SESSION variable for this. When user clicks a tab, you make an ajax request, and store the value of the active tab in a $_SESSION variable, but as i see, you want to do it on the client side.
UPDATE
Ok, i just created it for you.
First thing is to set an id for every a element in my example, to know, wich is that. You can do it some other way, but now this is the most simple.
Second is to download the jquery.cookie.js, and do not use the URL, store it locally.
Third, here could be a problem, if cookies are disabled on the client machine.
You need to do something like this:
HTML
<div role="navigation" id="navPrimary">
<ul class="secondary">
<li>Home</li>
<li>Account Menu
<ul>
<li>OVERVIEW</li>
</ul>
</li>
</ul>
</div>
CSS
.active {font-weight: bold; color: #F00}
JQUERY
ok, stacoverflow does not allow me to paste here a code but i loaded here the
https://raw.githubusercontent.com/carhartl/jquery-cookie/master/src/jquery.cookie.js script also!
<script type='text/javascript'>
$(function() {
//$.removeCookie("active");
var activeMenu = $.cookie("active");
console.log(activeMenu);
if (typeof activeMenu === 'undefined') {
$("#home").addClass("active");
} else {
$('#' + activeMenu).addClass('active');
}
$('li a').click(function(e) {
e.preventDefault();
var listItems = $("#navPrimary li a");
listItems.each(function(idx, li) {
$(li).removeClass('active');
});
$(this).addClass('active');
var id = $(this).attr('id');
$.cookie("active", id);
});
})
</script>