So I have a series of 2 nested ul's. When you click on the text (which is in an a tag) in the li, my page makes that editable and adds a save button. clicking the save button needs to give me back the new text inside that li and the id of that li. The id is not a problem. I'm trying to use jQuery's .find to select that anchor tag (which is successful) but i can't seem to get the text from it.
Here is an example of the first list and it's sublists.
<ul class='lists'>
<li class='list1'>
<a class='a list' id='list1'> List 1 Name</a>
<img id='savelist1id' onClick="SaveName(this.parentNode.id)" src='save.jpg'>
<ul class='sublists'>
<li class='sub1'>
<a class='a sub' id='sub1id'> Sub 1 Name</a>
<img id='savesub1id' onClick="SaveName(this.parentNode.id)" src='save.jpg'>
</li>
<li class='sub3'>
<a class='a sub' id='sub2id'> Sub 2 Name</a>
<img id='savesub2id' onClick="SaveName(this.parentNode.id)" src='save.jpg'>
</li>
<li class='sub2'>
<a class='a sub' id='sub3id'> Sub 3 Name</a>
<img id='savesub3id' onClick="SaveName(this.parentNode.id)" src='save.jpg'>
</li>
</ul>
</li>
</ul>
Here's the code for identifying which save button you clicked.
function SaveName(parentid){
$('li').find('a').each(function(){
if (this.id == parentid){
alert(this.id+' '+this.text)
}
}
});
I am wanting this.text to show me the text inside the anchor tags. Help, please?
===========================================================
Edit:
Please excuse this post. The problem was that I was using Jeditable and didn't know that it would put in a form in place of the text, so anything that would call text wouldn't work. Sorry.
simply use $(this).text() instead of this.text
To be honest, I don't understand the logic behind this function, because your function could have been written as:
function SaveName(parentid) {
alert($('li a#' + parentid).text();
}
});
Or may I suggest an alternative way of doing what you intented:
<ul class='lists'>
<li class='list1'>
<a class='a list' id='list1'> List 1 Name</a>
<img id='savelist1id' onClick="SaveName(this)" src='save.jpg'>
<ul class='list1subs'>
<li class='sub1'>
<a class='a sub' id='sub1id'> Sub 1 Name</a>
<img id='savesub1id' onClick="SaveName(this)" src='save.jpg'>
</li>
<li class='sub3'>
<a class='a sub' id='sub2id'> Sub 2 Name</a>
<img id='savesub2id' onClick="SaveName(this)" src='save.jpg'>
</li>
<li class='sub2'>
<a class='a sub' id='sub3id'> Sub 3 Name</a>
<img id='savesub3id' onClick="SaveName(this)" src='save.jpg'>
</li>
</ul>
</li>
</ul>
Javascript:
function SaveName(element) {
alert($(element).prev("a").text());
}
Remove the inline handlers, bad karma.
$(document).ready(function(){
$('.list1subs > li').find('img').bind('click', function(e){
var $this = $(this);
alert($this.siblings('a').text());
});
});
Ok, so when I clicked on the field, I was using Jeditable to make the field edit in place. Clearly I didn't understand what this doing, because it inserts a form using what you supply. This is why whatever.text() was coming back blank. It wasn't counting the form as text, so it skipped it.
Related
JSFiddle: http://jsfiddle.net/5qweu58f/4/
HTML (generated using XSLT):
<div id="dvExpProvHolder" class="hidOverflow innerDivCenter">
<ul class="uSPStyle" id="uSPStyle">
<li class="setRelative">
<a class="tfLink clickMe current" title="Care" data-toggle=".tfLink1" id="current" href="javascript:void(0);"><img src="theImages/imgMenu.png" id="imgFirstM" class="imgExpCol" />Care</a>
<ul class="uSPStyle uSPInner" style="width: 80%;">
<li><a class="tfLink clickMe" title="This is sub" data-toggle=".tf1SLink1" href="javascript:void(0);">This is sub</a></li>
</ul>
</li>
<li>
<a class="tfLink clickMe" title="Breast Cancer" data-toggle=".tfLink2" href="javascript:void(0);"><img src="theImages/imgMenu.png" id="imgFirstM" class="imgExpCol" />BC</a>
<ul class="uSPStyle uSPInner" style="width: 80%;">
<li><a class="tfLink clickMe" title="OUR LINK" data-toggle=".tf1SLink2" href="javascript:void(0);">OUR LINK</a></li>
</ul>
</li>
<li>
<a class="tfLink clickMe" title="About" data-toggle=".tfLink3" href="javascript:void(0);">About</a>
</li>
<li>
<a class="tfLink clickMe" title="Anxiety" data-toggle=".tfLink4" href="javascript:void(0);">Anxiety</a>
</li>
<li>
<a class="tfLink clickMe" title="Services" data-toggle=".tfLink5" href="javascript:void(0);">Services</a>
</li>
</ul>
</div>
Why doesn't the first UL lose the current class when another UL
is clicked? everything else works as expected.
The issue comes up when I would want the visitor to see BC > OUR LINK
section which shows "This is for second link sublink 1" without having to come to the page and then click on it. But because
they are all in one page, there is no way to do that out of the box.
I was wondering if there is a way to specify a query string in the
Url and use that to go directly to the sublink? For example:
http://www.myweb1.com/pages.aspx?id=098&menulink=2.1. The 2.1 would represent it is the second main menu and the first submenu. Is there
any way to incorporate that into my Jquery script?
Expanding on the examples from the authoritative question on the subject (How can I get query string values in JavaScript?) to solve this particular problem, you could use any of those methods for parsing window.location and taking action based on a query string parameter.
A working example is below, using a fake URL instead of window.location, as the snippet is in a sandboxed frame. This example uses URI.js, but there are many other options.
function log (o) {
var el = document.createElement('div');
el.innerHTML = o;
document.body.appendChild(el);
}
document.getElementById('button-1').onclick = function () {
log('Button 1 clicked!');
};
document.getElementById('button-2').onclick = function () {
log('Button 2 clicked!');
};
//Grab the "click" query string parameter. The button with the specified ID will be clicked.
//Using a fake URL instead of window.location inside this sandboxed frame
document.getElementById(URI('http://example.com?click=button-1').search(true)['click']).click();
<script src="https://cdnjs.cloudflare.com/ajax/libs/URI.js/1.16.1/URI.js"></script>
<button id="button-1">Button 1 - Auto-Clicked</button>
<button id="button-2">Button 2 - Not Auto-Clicked</button>
Hi I need some help with this.
Heres my code:-
<ul class="product nobullet clearfix nomargin">
<li class="product1">
<div class="img-holder">
<a href="/Mens/Shower/Bodywash/p/704357">
<img src="/medias/sys_master/front/src/8838871056414.jpg"/>
</a>
</div>
</li>
<li class="product2">
<div class="img-holder">
<a href="/Mens/Shower/shampoo/p/704357">
<img src="/medias/sys_master/front/src/8838871056414.jpg"/>
</a>
</div>
</li>
<li class="product3">
<div class="img-holder">
<a href="/Mens/toiletries/deoderant/p/704357">
<img src="/medias/sys_master/front/src/8838871056414.jpg"/>
</a>
</div>
</li>
<ul>
<script>
$('ul.product').children().has("li").each(function(){
var url = $(this).find('div.img-holder a').attr('href');
url = url.split("/");
alert(url);
$(this).children("li").addClass(url[3]);
});
</script>
It doesn't work I'm still new to jquery and could do with some help.
I need to read each product class li's read the url take the 3 item using / as asperator then add this to the li class. The code needs to loop through all the product li's
There can be upto 20 product classes all start with product then have a number at the end e.g. product1
Not sure if i've explained theat well enough so....
After the jquery code runs the html should look like this:-
<ul class="product nobullet clearfix nomargin">
<li class="product1 bodywash/">
<div class="img-holder">
<a href="/Mens/Shower/bodywash/p/704357">
<img src="/medias/sys_master/front/src/8838871056414.jpg"/>
</a>
</div>
</li>
<li class="product2 shampoo">
<div class="img-holder">
<a href="/Mens/Shower/shampoo/p/704357">
<img src="/medias/sys_master/front/src/8838871056414.jpg"/>
</a>
</div>
</li>
<li class="product3 deoderant">
<div class="img-holder">
<a href="/Mens/toiletries/deoderant/p/704357">
<img src="/medias/sys_master/front/src/8838871056414.jpg"/>
</a>
</div>
</li>
<ul>
Check this
As you are iterating over li's you just need to use $(this).addClass(url[3]);
$('ul.product li').each(function(){
var url = $(this).find('div.img-holder a').attr('href');
url = url.split("/");
alert(url);
$(this).addClass(url[3]);
});
Nitin's answer is almost correct.
Firstly since you're new to jQuery it's worth explaining that your selector isn't matching <li>s like you think it is
$('ul.product').children().has("li")
Will match any children of the ul which have a descendant which is an <li>. Since the list items are the children of the list they themselves will not have list items as children.
$('ul.product li').each(function(){
var url = $(this).find('div.img-holder a').attr('href');
url = url.split("/");
alert(url);
$(this).addClass(url[3]);
});
With reference to this code ^ it's worth noting that JavaScript is a zero-based language. So you'll want to use url[2] to get the third item in that array
When i click on any name I have to add class "active" for selected name's anchor tag and as well as department names of that user.
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a>Rahul </a> <!--User -->
</li>
<li>
<a>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active">Rokesh </a>
</li>
<li>
<a>Preeti</a>
</li>
</ul>
</li>
</ul>
I am using below code, can anyone tell what correction i need to do..?
if (orgID != null && orgID == 'dId') {
$("#dId li a").removeClass("orglistactive");
$(this).attr("class","orglistactive");
var parentID = $(e.target).parent().parent().parent().attr("id");
alert($(e.target).parent().parent().parent().attr("id"));
$("#"+parentID+" a").attr("class","orglistactive");
}
Looks like you are trying to achieve something as shown below:
<script type="text/javascript">
var orgID = $('#dId');
if(orgID.attr('id') == 'dId'){
orgID.find('>li>a').addClass("orglistactive");
var parentID = orgID.attr("id");
alert(orgID.attr("id"));
}
</script>
But couple of things are found, are not correct from html and jquery perspective.
Id are unique but you have used 'dId' for more than one time.
e.target works only when there is an event attached with an element or can be captured using "window.event || e". In your code I could not see the purpose of e.target
Hope this helps! :)
This can be quickly achieved with a little of jQuery.
First Approach
$('ul a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at a live demo: http://jsfiddle.net/augusto1982/6xM2P/
Second Approach
One thing to keep in mind is that this code works ok if there's no other list in the page. If this is not the case, you should use some CSS class to determine the object to bind the click function. Otherwise, the jQuery selector gets a bit messy.
$('#orglistingid li ul li a').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Example: http://jsfiddle.net/augusto1982/GXcvD/
Third Approach
I would also recommend you to add a class to each user anchor, to make it easier.
HTML
<ul id="orglistingid">
<li>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).parent().parent().parent().find('a:first').addClass('orglistactive');
});
Take a look at this second example: http://jsfiddle.net/augusto1982/GW4mt/
Final Approach
In order to avoid all the parent()...parent() calls, you could use the closest method, but you need to change your HTML a bit.
HTML
<ul id="orglistingid">
<li class='department'>
<a>Sales </a> <!--Deparemtn Name -->
<ul id="dId">
<li>
<a class='user'>Rahul </a> <!--User -->
</li>
<li>
<a class='user'>Nitin </a>
</li>
</ul>
</li>
</ul>
<ul id="orglistingid">
<li class='department'>
<a class="active">Development</a>
<ul>
<li id="dId">
<a class="active user">Rokesh </a>
</li>
<li>
<a class='user'>Preeti</a>
</li>
</ul>
</li>
</ul>
jQuery
$('.user').click(function(){
$(this).addClass('orglistactive');
$(this).closest('.department').find('a:first').addClass('orglistactive');
});
Demo: http://jsfiddle.net/augusto1982/e7PVF/
Like other comments, I'd recommend you to have unique IDs. While this is not a restriction, is a best practice.
I am sorry for the title. I don't no how to write the title for the below scenario .
The below question would be easier for an expert. Kindly bear with my English.
I am creating a single page portfolio. In the web site I have top menu,breadcrumb,content & footer.
If i click any menu or submenu the corresponding div is loading properly but I want to change my breadcrumb dynamically based on the menu
Here is the HTML code for top menu
<div id="eyMenuNav">
<ul id="navmenu">
<li class="on">
<a class='link1' href="#first">Article on Technology</a></li>
<li>
<a class="sub" href="#">Success Stories</a>
<ul>
<li>
<a class='link2' href="#second" onclick="onctext();">Customer Quotes</a>
</li>
<li>
<a class='link3' href="#third" onclick="onctext();">CSS, Appreciation - Metrics</a>
</li>
<li>
<a class='link4' href="#four" onclick="onctext();">Lesson Learnt</a>
</li>
</ul>
</li>
<li>
<a class='link5' href="#five">Hexaware Key Contributor</a>
</li>
</ul>
</div>
Here is the HTML code for breadcrumb
<div id="eyBreadCrumb">
<ul>
<li>
<a id="crumb" href="#"><!-- Here I need update my breadcrumb based on the link which i clicked -></a>
</li>
</ul>
<!-- Clearing Element -->
<div style="clear:both;"></div>
<!-- end breadcrumb --> </div>
Here Is the code for javascript which i tried it is working for one menu click but i want for all.
function onctext()
{
document.getElementById("crumb").innerHTML="Success Stories - Customer Quotes";
}
Kindly help me for the above scenario
Note : I am not using jquery only iam working with javascript.
Thanks
Mahadevan
Add this parameter to your onctext() call, so your menu items look like so:
<a class='link3' href="#third" onclick="onctext(this);">CSS, Appreciation - Metrics</a>
And then change your onctext function to retrieve the text from this:
function onctext(elm) {
var text = elm.innerHTML;
document.getElementById("crumb").innerHTML = text;
// set active class
var active = document.getElementsByClassName('active')[0];
if (active) {
active.className = active.className.replace(' active', '');
}
elm.className += ' active';
}
I need your help
If document.getElementById("file").children[1].style.display = "none"; hides the "Save" item in the "file" menu, then document.getElementById("edit").children[1].style.display = "none"; does not work properly and does not hide the "Add new" item in the "edit" menu item.
<div id="menuwrapper">
<div id="menu" style="width: 1001px; height: 20px">
<ul>
<li>
<div id="div_rssims_file">File</div>
<ul id="file">
<li><a onclick="window.print()"><div id="div_rssims_file_print">Print</div></a></li>
<li id="li_rssims_file_save"><a onclick="rssims_save()"><div id="div_rssims_file_save">Save</div></a></li>
<li><a onclick="rssims_save();window.close()"><div id="div_rssims_file_save_exit">Save & Exit</div></a></li>
<li><a onclick="window.close()"><div id="div_rssims_file_exit">Exit</div></a></li>
</ul>
</li>
<li>
<div id="div_rssims_edit">Edit</div>
<ul id="edit">
<li><div id="div_rssims_edit_addnew">Add new</div></li>
<li><div id="delete">Delete</div></li>
<li><div id="clear">Clear Form</div></li>
</ul>
</li>
<li>
<div id="div_rssims_view">View</div>
<ul>
<li><div id="goto_first">>> Go to First</div></li>
<li><div id="goto_next">>Go to Next</div></li>
<li><div id="goto_prev">Go to Previous></div></li>
<li><div id="goto_last">Go to Last>></div></li>
</ul>
</li>
<li>
<div id="div_rssims_reports">Reports</div>
<ul>
<li><div id="export_excel">Export to Excel Table</div></li>
<li><div id="export_html">Export to HTML Table</div></li>
<li><div id="export_list">Export to HTML List</div></li>
<li><div id="export_contact">Export as Contact Card</div></li>
</ul>
</li>
<li>
<a style="cursor: pointer;" onclick="sims_logoff()"><div id="div_rssims_logoff">Logoff</div></a>
</li>
</ul>
</div>
</div>
Try this
document.getElementById("edit").children[0].style.display = "none"
Add New is a first position of #edit
You're not deleting the right item, because [1] will select the second child. To grab the first one, use [0] instead:
document.getElementById("edit").children[1].style.display = "none"
That this works for the first example given is probably because it is the second element.
document.getElementById("file").children[1].style.display = "none";
Is hiding the 'Save' menu item (the 2nd child of <ul id="file">).
document.getElementById("edit").children[1].style.display = "none";
Is hiding the 'Delete' menu item (the 2nd child of <ul id="edit">).
If you want to hide the 'Add New' submenu item, you should target the first child of <ul id="edit"> like this:
document.getElementById("edit").children[0].style.display = "none";
If you want to hide the entire 'Edit' submenu with all items, you should target the <ul id="edit"> like this:
document.getElementById("edit").style.display = "none";
This does point out an important drawback of using children as a means of selecting menu items. If the order of the items changes, so does your Javascript.
You are much better off targeting the items by their classnames or ids. If you remove the inner div from the a link in each item (this is superfluous), and replace the id on the li element, you can target just the menu item you want:
<ul id="edit">
<li id="div_rssims_edit_addnew">Add new</li>
<li id="delete">Delete</li>
<li id="clear">Clear Form</li>
</ul>
document.getElementById("div_rssims_edit_addnew").style.display = "none";
This always works, no matter what the order of the items is. It still blows up with an error if the element(s) are not present in the page. To prevent this, you best use a javascript library like jQuery to do this: http://api.jquery.com/hide/.