I have my markup like this. I want that when someone click on the div demo then it will redirect to the second anchor tag link.
<div class="demo">
<div class="social">
<ul>
<li>
<a class="icon"></a>
</li>
<li>
</li>
</ul>
</div>
</div>
So for that I have my jquery like this
jQuery(document).ready(function() {
jQuery(".demo").on('click', function () {
var link = jQuery(this).find('li:last-child').children('a').attr("href");
window.location.href = jQuery(link);
});
});
But this one is showing error in console tab like Uncaught Error: Syntax error, unrecognized expression: with the link . So how to solve this issue?
Assign the href string you got in link variable instead of jQuery object, wrapping link in jQuery function consider it as variable passed selector. I think you wont have any variable defined with the name equal to value of link(varible)
Change
window.location.href = jQuery(link);
to
window.location.href = link;
change this:
window.location.href = jQuery(link);
to this:
window.location.href = link;
That is a variable which stored a href attribute value, so you don't have to wrap it with jQuery to create an object of it.
Related
I want to manipulate the DOM using jQuery. In my website, a header is being imported by a widget. I cannot edit this code directly, but a specific anchor in the header should have target _blank. When doing this, nothing happens. I get no error in my console, and nothing changes in the DOM.
I've used this jQuery code:
jQuery(document).ready(function() {
jQuery('#iwgh2-navigation-menu-toggle-animation-wrapper a').attr('target', '_blank');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="iwgh2-navigation-menu-site" style="" href="http://binnenland.vlaanderen.be">Anchor Text</a>
What I have checked:
The code is being executed. When I deliberately write a syntax error, I get an error in my console.
I tried to change the code to use .remove() instead of adding the anchor, but nothing happened as well.
Try using this instead:
jQuery(document).ready(function() {
jQuery('.iwgh2-navigation-menu-site').attr('target', '_blank');
});
I can only assume that the parent element id does not match your selector operator.
The id you use in your JS-code is not present in your HTML.
Add it there and your code will work:
jQuery(document).ready(function() {
jQuery('#iwgh2-navigation-menu-toggle-animation-wrapper a').attr('target', '_blank');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="iwgh2-navigation-menu-toggle-animation-wrapper">
<a class="iwgh2-navigation-menu-site" style="" href="http://binnenland.vlaanderen.be">Anchor Text</a>
</div>
Alternatively you can also just use
jQuery('.iwgh2-navigation-menu-site').attr('target', '_blank');
to add the attribute to every link with the classname.
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
<a id = "click_show_more" href = "" onclick = "showMore()">
<li id = "more">
MORE
</li>
</a>
<div id = "more_hidden">
<ul id = "list_hidden">
<li>EFG</li>
<li>ABC</li>
</ul>
</div>
The above is my html code. I want to call the javascript function "showMore()" when clicking on a the link "MORE" with id "click_show_more".
This is my javascript code.
function showMore() {
var moreShow = document.getElementById('more_hidden');
moreShow.style.opacity = 0.8;
}
I don't know why this code fails. Nothing happens when I clicked on the link.
Please help me figure it out. Thank you so much!
Remove the href attribute from your link or set it to something like # so that a page won't be loaded. You are linking to another page (or the same page) with that.
Further, your html is invalid. <li> does not belong as a child of <a>.
See this demo with your markup corrected demonstrating the difference between the link with the href and with it removed. http://jsbin.com/iJEDiku/2/edit
Please don't use inline javascript (like onclick in your html). Study about this here: Why is inline JS bad?
Here's your code following better practices. Live demo here (click).
Markup:
<a id="change-opacity">Click here to change opacity.</a>
<div id="opacity-gets-changed">
<ul>
<li>EFG</li>
<li>ABC</li>
</ul>
</div>
JavaScript:
var a = document.getElementById('change-opacity');
var div = document.getElementById('opacity-gets-changed');
a.addEventListener('click', function() {
div.style.opacity = 0.4;
});
I'm trying to make an JS, but since I'm not an expert on that, maybe someone could help me. I was searching for that in Google and in Stack Overflow, but didn't find what I need. I just found onmouseover that change the class in element itself. But I want something different:
I want to make a onmouseover on a tag to change the class closed to open in other element. Example:
Link
<ul class="dropdown closed"><li>Item</li></ul>
Regards,
If you include jQuery:
Add id for your elements:
Link
<ul class="dropdown closed" id="ul1"><li>Item</li></ul>
Javascript:
$("#a1").mouseover(function(){
$("#ul1").addClass("open").removeClass("closed")
})
You can use Link
And JS:
function changeClass() {
document.getElementById("other-element").className = "open";
}
More advanced JSFiddle: http://jsfiddle.net/eRdHJ/1/
<a href="#" onmouseover=$("ul.dropdown").addClass("open").removeClass("closed")>Link</a>
<ul class="dropdown closed"><li>Item</li></ul>
Here is the jsfiddle : http://jsfiddle.net/eRdHJ/2/
This will access the first <ul> on the page. To narrow it down you need to do a getElementById first to get the elements based on tag name from that point. It will then only select the children from that tag with that certain ID-name;
<script>
function changeUl() {
// Get the first found UL, anywhere in the body
document.getElementsByTagName('ul')[0].className = 'otherName';
}
</script>
Link
With ID
<script>
function changeUl() {
var wrapper = document.getElementById('wrapper');
wrapper.getElementsByTagName('ul')[0].className = 'otherName';
}
</script>
<div id="wrapper">
Link
</div>
You might want to check if there are any found tho. [0] might trigger an undefined/error if there are no <ul> found.
i have an anchor tag as below.
<a style="border:0px" href='javascript:deleteAttachment(this);' />
Inside the deleteAttachment, how can i get the anchor tag. Sending this to the method, sends the window element to the method.
function deleteAttachment(ancElement){
//Jquery operation on acnElement
}
Please helop me out.
I would recommend a slightly different approach, since what you're trying to do is a bit old.
assuming you already loaded jQuery, here we go:
<a id="myFirstLink" href="someHref" />
<a class="otherLinks" href="secondHref" />
<a class="otherLinks" href="thirdHref" />
<script>
$(function() {
$('#myFirstLink, .otherLinks').click( function(event) {
// stops the browser from following the link like it would normally would
event.preventDefault();
// do something with your href value for example
alert( $(this).attr('href') );
});
});
</script>
So basically what you can do is this: simply generate all your anchors like you would normally would and apply the same class name to each of them - in my example the class would be "otherLinks".
After that, all your links will be handled by that anonymous function.
Use the onclick handler:
<a onclick="deleteAttachment(this)">
or, the cleanest and most accepted method nowadays, have just the raw link in the HTML:
<a id="deleteAttachment">
and add the click event programmatically, in a separate script block, on DOM load:
document.getElementByID("deleteAttachment").onclick =
function() { ... you can use "this" here .... }
you must set its ID attribute
<a id="myAnchor" style="border:0px;" href="javascript:deleteAttachment('myAnchor');"/>
then use jquery to find it
function deleteAttachment(ID)
{
var MyAnchor = $('#'+ID);
}