getting content of <li> when it is clicked - javascript

I have a list. And am trying to get the context of the list when the user clicks the text using prototype. But this code doesn't not alert the message. What is the wrong with the code?
The code can be seen here:
www.modernarapca.com/test.php
JavaScript:
$$('ul#myList2 li').each(function(elmt) {
elmt.observe('click', function(ev) {
var tab;
tab = elmt.down('a').readAttribute('href');
alert("entered");
});
});
Markup:
<ul id="myList2">
<li>
<a href="javascript:;" class="" >text1</a>
</li>
<li>
<a href="javascript:;" class="" >text2</a>
</li>
<li>
<a href="javascript:;" class="" >text3</a>
</li>
</ul>

Or maybe this one...
$('document').ready(function() {
$('#myList2 li').on('click', function(el) {
console.log(el.target);
var cont = $(el.target).html();
alert(cont);
});
});

Related

How to select value of dropdown with ul

Here is my code and it's not selecting the value of the drop down list.
I tried many different ways but not working
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
something <!-- here should be desplayed the dropdown-menu list when i click -->
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<!--<ul class="dropdown-menu">
<li>
Soemthing
</li>
</ul> -->
</li>
</ul>
</div>
<script>
$('.dropdown-menu li').find('a').change(function() {
var dropdown = $(this).closest('.dropdown-toggle');
var radioname = $(this).attr('name');
var checked = 'a[name=' + radioname + ']:checked';
//update the text
var checkedtext = $(checked).closest('.dropdown-menu li').text();
dropdown.find('a').text(checkedtext);
//retrieve the checked value, if needed in page
var thisvalue = dropdown.find(checked).val();
alert(thisvalue);
});
</script>**
The button where you click on the drop-down menu, I want to display the value on the button part. Also, I am using the CMS code so, any suggestion?
How can I solve this?
First you need to get container div using closest() and use find to get dropdown-toggle using find().
And also you have used wrong method for a tag, you need to use click instead of change like this
$('.dropdown-menu li a').click(function() {});
DEMO
$('.dropdown-menu li a').click(function() {
var dropdown = $(this).closest(".container").find('.dropdown-toggle');
dropdown.text($(this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" style="height: 0;">
<ul class="psh__dpdw ">
<li class="button-dropdown">
<a class="dropdown-toggle">
<img src="{{theme_url}}/assets/images/arrow-down.png" alt="arrow-down">
</a> {{ content:categories category_group_id="57" class="dropdown-menu" id=""}}
{{special}} {{ /content:categories }}
<br><br>
<ul class="dropdown-menu">
<li>
Prishtinë
</li>
<li>
Gjilan
</li>
<li>
Prizren
</li>
<li>
Pejë
</li>
<li>
Mitrovicë
</li>
<li>
Gjakovë
</li>
<li>
Ferizaj
</li>
</ul>
</li>
</ul>
</div>

Adding a class to body when a Hyperlink tag is clicked which is in the child ul of li tag using jquery

I want to add a class to body when a link is clicked. This is easily done when the link is in the parent ul, but my problem is that i want to do that for the the link present in the child ul of parent li. Whenever I try to do this It has no effect.
What I am trying to do is as given below:
Script:
<script>
$(document).ready(function () {
$("ul.treeview-menu").find("a.links").click(function () {
$("body").addClass("sidebar-collapse");
});
});
</script>
<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
<li class="treeview">
<a rel="tooltip" data-placement="right" target="_self" href="">
<span class="caption">Parent Link</span>
</a>
<ul class="treeview-menu">
<li>
child link
</li>
</ul>
</li>
<ul>
Thank you in advance.
Try with on('click',...), may be your Navigation will generate dynamically after load page so you have to use delegated event binding
$(document).ready(function () {
$(document).on('click','ul.treeview-menu a.links',function () {
$("body").addClass("sidebar-collapse");
});
});
<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
<li class="treeview">
<a rel="tooltip" data-placement="right" target="_self" href="">
<span class="caption">Parent Link</span>
</a>
<ul class="treeview-menu">
<li>
child link
</li>
</ul>
</li>
<ul>
you have two issues:
1- this line //}); it was commented and was preventing your code from working.
2-when the hyperlink is clicked it refreshes the page and thus any class you've added to your previous html has been erased that's why you want be able to see any change.
try this:
<script>
$(document).ready(function () {
$("ul.treeview-menu").find("a.links").click(function (e) {
e.preventDefault()
$("body").addClass("sidebar-collapse");
});
});
</script>
<ul class="sidebar-menu nav nav-list" id="dashboard-menu">
<li class="treeview">
<a rel="tooltip" data-placement="right" target="_self" href="">
<span class="caption">Parent Link</span>
</a>
<ul class="treeview-menu">
<li>
child link
</li>
</ul>
</li>
<ul>
$(document).ready(function () {
$("ul.treeview-menu").find("a.links").click(function (e) {
e.preventDefault()
$("body").addClass("Enter your class name");
});
});

Created a tab but wont function on click - jQuery issue/newbie

My website builder has a generic tab function but I don't like it, so I thought I would learn how to build one myself. I'm more comfortable with CSS than scripts at the moments and it shows with what I created, where it looks how I want but is not yet functional on clicks.
Here is the JSFiddle: https://jsfiddle.net/6oq3t9ev/1/
<ul class="tab_conts" id="recent" style="display: block;">
<li class="tab_cont">
Test
<a>
<desc>Testing</desc>
</a>
</li>
<li class="tab_cont">
Test
<a>
<desc>Testing</desc>
</a>
</li>
</ul>
<ul class="tab_conts" id="new" style="display: none;">
<li class="tab_cont">
Test
<a>
<desc>Testing</desc>
</a>
</li>
<li class="tab_cont">
Test
<a>
<desc>Testing</desc>
</a>
</li>
<li class="tab_cont">
Test
<a>
<desc>Testing</desc>
</a>
</li>
</ul>
$(document).on("ready int:ready", function() {
var e = $(".tab_name"),
t = $(".tab_conts").hide();
e.prependTo(".tabs-cn"), e.click(function(n) {
n.preventDefault();
var i = $(this),
r = e.index(i);
e.removeClass("tab_name-active"), i.addClass("tab_name-active"), t.hide().eq(r).show()
}), e.first().click() })
Something like this should do the trick:
$(document).ready(function(){
$('.tab_name').on('click',function(){
var href = $(this).attr('href');
$('.tab_conts').css({'display':'none'});
$(href).css({'display':'block'})
});
});
PS. make sure you include jquery in your head
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

Add/Remove class based on active URL

My HTML code looks like this:
<div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
<div class="menu_section">
<ul class="nav side-menu">
<li>
<a>
<i class="fa fa-home"></i>home
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu" style="display: none">
<li>
Dashboard
</li>
<li>
dashbord2
</li>
</ul>
</li>
<li>
<a>
<i class="fa fa-edit"></i>form
<span class="fa fa-chevron-down"></span>
</a>
<ul class="nav child_menu" style="display: none">
<li>
general form
</li>
<li>
form validation
</li>
</ul>
</li>
</ul>
</div>
</div>
to add/remove class based on current url, i am using this:
$(function () {
var url = window.location.href;
$('#sidebar-menu a[href="' + url + '"]').parent('li').addClass('current-page');
$('#sidebar-menu a').filter(function () {
return this.href == url;
}).parent('li').addClass('current-page').parent('ul').slideDown().parent().addClass('active');
});
It works, but when i click this link
dashbord2
the class="current-page" doesn't change to current path url
How i fix this?
Your issue arises from the page not being reloaded when you click on the link with hash in it, while your code only executes on page load, or dom ready to be exact. The solution is to whether use window's hashchange event (not supported in < IE8) or, like #sirrocco mentioned, use click event with setTimeout to detect the change of hash:
function setCurrentMenuPage() {
var url = window.location.href;
var anchors = $('#sidebar-menu a');
anchors.parent('li').removeClass('current-page');
anchors.filter(function () {
return this.href == url;
}).parent('li').addClass('current-page').parent('ul').slideDown().parent().addClass('active');
}
$(function () {
setCurrentMenuPage();
$('#sidebar-menu a').on('click', function (e) {
if ($(this).attr('href').indexOf("#") >= 0) {
setTimeout(function () {
setCurrentMenuPage();
}, 100);
}
});
});
Hope that helps.

Filter collapse div and highlight current link through data-filter

How can I filter the content of a div using data-filter and highlight current link at same time?
In this example the 'Item A' should be loaded as current item. The current item should have the text-bold class.
jsFiddle
<ul class="menu">
<li class="menu-list">
<a class="menu-list-link js-menu-list-link" href="#" data-filter="1">Item A</a>
</li>
<li class="menu-list js-menu-list">
<a class="menu-list-link js-menu-list-link" href="#" data-filter="2">Item B</a>
</li>
<li class="menu-list">
<a class="menu-list-link js-menu-list-link" href="#" data-filter="3">Item C</a>
</li>
</ul>
try this code:-
$(function(){
//this is for first page load
$('a[data-filter="1"]').addClass('text-bold');
filter(1);
//when click on anchor tag
$('.menu-list a').click(function(){
$('.menu-list a').removeClass('text-bold');
$(this).addClass('text-bold');
var data=$(this).data('filter');
filter(data);
});
});
and create a function:-
function filter(filter){
$('.container [data-filter]').hide();
$('.container [data-filter="'+filter+'"]').show();
}
Demo

Categories

Resources