<span class="MapDirections" style="padding-top:10px">
<span class="HosAddHidden" style="display:none;">
<xsl:value-of select="concat(#ADDRESS_LINE_1,',',#CITY,' ',#STATE,' ',#ZIP)" />
</span>
Maps & Directions
</span>
How do I grab the span class HosAddHidden text which is some address and pass it to the the map url like this:
<a href="http://maps.google.com/maps?q=" onclick="location.href=...." return false;>Maps and directions</a>
I see from your response above that you have multiple HosAddHidden. Provided each one is followed by the anchor you want to manipulate (as your example above), you want to loop over each of the hidden addresses and change the href of the anchor following it. Here you go:
$('.HosAddHidden').each(function(index) {
$(this).next().attr('href', 'http://maps.google.com/maps?q='+$(this).text());
});
Note, this is not on an onclick, but rather should be run when the dom loads and changes all the anchors for you. The benefit of not putting it on an onclick is the actual href has already been changed, so someone can right-click the anchor and copy-it, open in new tab, etc.
Try this instead on using inline click handler. You can use text() to grab the text from span which you can select using .HosAddHidden class selector.
$('a').click(function(e){
e.preventDefault();
location.href = $(this).href + $.trim($('.HosAddHidden').text());
});
Related
I have an a tag as follows:
<a href="data1.html" class="list-group-item" data-toggle="collapse">
<i class="glyphicon glyphicon-folder-close"></i>Root Folder
</a>
I have a function that gets called when you click on a tag. It is as follows -
$(document).ready(function() {
$("a").hover(function(event) {
console.log(event.target.href);
});
});
I can access the properties of a tag. Example: If i want to access the href of the a onclick, I can get it by event.target.href.
I want to access the properties of the i tag that is inside the a tag (for instance, class of i tag is "glyphicon glyphicon-folder-close").
How do I achieve that?
Also, what changes do I have to make to the function, such that it is called only if a tags of class = "list-group-item" are clicked?
Thanks in advance.
I want to access the properties of the i tag that is inside the a tag
Inside any jQuery event handler, this refers to the element on which the event was triggered: therefore you can use any selector relative to that element. $(this).children('i') for example will find the contained i given your HTML; if the element might be nested more deeply you'd want .find() instead of .children().
what changes do I have to make to the function, such that it is called only if a tags of class = "list-group-item"
Change the selector you're using to attach the handler - $("a.list-group-item") instead of $("a") to limit it to items having that class.
Note also that if you want this to work on click as you describe, rather than on hover as in your sample code, you'll need to return false from the event handler (so that the regular link navigation doesn't occur).
$(document).ready(function(e) {
$("a.list-group-item").click(function() {
var myChild = $(this).children('i')
console.log(myChild.attr("class")); // for example
return false; // prevent regular navigation from occurring on click
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="https://example.com" class="list-group-item">
<i class="glyphicon glyphicon-folder-close"></i> Will fire handler on click
</a>
<br>
<a href="https://example.com">
<i class="glyphicon glyphicon-folder-close"></i> Will navigate normally
</a>
Since you are using jQuery, this will be very easy!
$(document).ready(function() {
$("a.list-group-item").click(function(event) {
$(this).find('i').attr('class');
});
});
To get only certain anchor tags you can use a selector, read more about them here. Then you can use the this object to find children. Use the find method in jQuery. Finally use the attr to retrieve the class.
You can rewrite your function like this:
$(document).ready(function() {
//Only use list-group-item
$("a.list-group-item").hover(function(event) {
var $attrNode = $(this).find("i");
//Now that you have the list group item it is easy to get the attribute
var attributeValue = $attrNode.attr("your-attribute");
//You can also set the attribute
$attrNode.attr("your-attribute", "attribute value");
});
});
How to use jQuery to click the span tab like below?
like this:
<span data-bind="event: {click: toggleshow}, css: {open: more()}" class="">
Expand<span></span>Search</span>
You can add a css class to your span and use the css class as your jQuery selector for registring the click event
<span class="myspan" id="someId">Test</span>
<span class="myspan" id="someOtherId">Test Again</span>
And the jQuery code will be
$(function(){
$("span.myspan").click(function(e){
alert("clicked");
var itemId=$(this).attr("id");
alert(itemId);
});
});
Here is a working sample
If you cannot add a css class or other attributes to this span, you might need to use a very wide jQuery selector, which is just the span tag.
$("span").click(function(e){
alert("clicked");
});
But this click event will be registered to all span's in your page. Another option is to wrap these spans inside a container div and use that in your jQuery selector so that only those span's will be registered for the click event.
<div id="myContainer">
<span data-bind="event: {click: toggleshow}, css: {open: more()}" class="">
Expand<span></span>Search</span>
</div>
And the jQuery code to register the click event will be
$(function(){
$("#myContainer span").click(function(e){
alert("clicked");
});
});
Here is a working sample of that.
jQuery can take pretty much any CSS selector.
So if you don't want to use a class or an id (which you should), there are 2 options:
Read up about CSS selectors and find an appropriate one.
Open
the inspector tools in your browser, right click on your span
element in the HTML view and choose the option "Copy Unique
Selector" (Firefox) or "Copy > Copy selector" (Chrome) to get an
automatically generated selector for your element.
Then use it normally with jQuery: $("copy_pasted_probably_very_long_selector").click()
1st: in html use
</span><span>Search</span>
instead of
<span></span>Search</span>
2nd: while you tagged javascript/Jquery for click event so you can use .filter()
$('span').filter(function(){
return $(this).text().trim() == 'Expand';
}).on('click' , function(){
//code here for Expand span
});
Working Demo This will work with Expand span .. use the same way for Search one
You can use the event object to find the nodeType .Here is a snippet to illustrate it
HTML
<span class="item-content">Button 1 </span>
<span class="item-content">Button 2 </span>
<div class="item-content">Button 3 </div>
<button class="item-content">Button 4 </button>
JS
$('body').on('click',function(event){
alert(event.target.nodeName)
})
event object have many other keys which can also come handy when required.You can just console.log(event) so see others keys.
WORKING MODEL
NOTE: I used multiple tags just for demonstration. Also though each element have a class but I used it just for styling.
Hope this will be useful
I've got an input which allows users to add text with anchor tags for hyperlinks. I'd like to keep it simple for the user so all they need to enter is link but would love to add a target attribute to the tag systematically.
Is there an elegant way in JavaScript I can do this without having an ID associated with the tag? (e.g. getElementById wont work here). Other entries I found in stackoverflow address this but only when the anchor tag has an ID.
These links will, however, always have the same parent div class.
Found a JavaScript-only way to accomplish this:
var nLink = $("div.notification-popup-message > a");
nLink.click(function(e) {
e.preventDefault();
window.open(this.href);
});
Another method using querySelecterAll that actually adds the attribute to the HTML in the DOM:
var messageLink = document.querySelectorAll("div.message > a");
$(function() {
$(messageLink).attr("target", "_blank");
});
I am working on an Ajax Live Search. My goal: When you click on one of the suggested results, the result shall be inserted into the search field. For example, when you enter "ros" into the input field and you want to look for roses and roses is a result suggested to you, then I want roses to show up in the search field on click.
<!-- Lets assume that up to this point the user has typed "ros"
into the following field -->
<input id="search" type="text">
<!-- ... then roses is a suggested result, with "ros" being highlighted -->
<ul id="results">
<li class="result">
<a>
<b class="highlight">ros</b>"es"</p>
</a>
</ul>
Here is the jQuery code that I have come up with so far, but it won't work:
$('#results a').click(function() {
var selection = $(this).html();
$('#search').val(selection);
});
Anyone has detected the error?
seems to be case of event delegation:
$('#results').on('click', 'a', function() {
what i see you have some dynamically generated links in the list as if user searches for something. if this is the case then you have to delegate the event to the closest static parent which is in your case is #results because an event is not bound to dynamically generated elements as they were not available when you bound the event.
Also there is a notice as you have a closing tag of </p> which doesn't have a opening tag. also if you want to place the text of the clicked element then you don't have to use .html(), you can use .text() method instead.
Yout HTML is invalid. You have a closing </p> without an opening one inside your <a> tag
Firstly I don't think you should simply use $(this).html() as it will include the html-tags, and you probably don't want that inserted.
But I think the reason you can't get it to work (I'm assuming absolutely nothing happens) is because you set the listener before the results are loaded, and hence they aren't bound to the links. Use $('#results').on('click', 'a', function(){}) to bind events "up front".
$('#results a').click(function() {
var selection = $(this).text();
$('#search').val((selection.replace("\"", "")).replace("\"", ""));
});
I have a list of tags as follows:
<div id="locationA">
<a>APPOEL SHIELDS</a><br>
<a>APPOEL RINANCE LTD</a><br>
<a>APPOEL INC</a><br>
<a>APPOEL INTONER CO LTD</a><br>
<a>APPOELTON POOPERS INC</a><br>
</div>
I wired in remotely an event as follows:
$("#locationA a").click(function(e){$("#locationB").val(this.value);});
The trouble is that this.value is not really referring to the <a> tag on which the user is clicks in order to transfer the value of the <a> tag.
So, how do I indicate in this jQuery command to insert the value of the selected tag into locationB when the user clicks on the <a> tag of choice?
David
Anchors elements don't have a value property. Use this instead:
$("#locationA a").click(function(e){$("#locationB").val(this.innerHTML);});
Or
$("#locationA a").click(function(e){$("#locationB").val($(this).html());});
Or
$("#locationA a").click(function(e){$("#locationB").val($(this).text());});