why does this jquery snippet does not works? - javascript

I wonder why this snippet works on chrome (Version 31.0.1650.57 m) and not in firefox (25.0)
<span class="chat-user" id="directeur">
<a class="user" user="directeur" room="" href="#">
directeur
</a>
</span>
<script>
$("a[class=user]").click(function(event) {
alert();
});
</script>
I click on the "directeur" link, on chrome, I get an alert window, nothing happens in firefox.
Edit, I found out what was realy the problem
I was changing the DOM in another function:
window.setInterval(function() {
$.get("url",
function(data) {
data.forEach(function(entry) {
if (0 != $( ".chat-connected" ).find($("#"+entry.user)).size()) {
$("#"+entry.user).find("a").css("color", "red");
$("#"+entry.user).find("a").attr("room", entry.room);
}
});
});
}, 30000);
That change was modyfing the DOM and the click jquery function was not applied anymore to the <a> attribute.

I don't know what's causing differences between browsers. Perhaps the missing < on the </script> tag? Anyway, you should really be using
$("a.user").click(function(event) {
alert();
});

Try this instead :
<span class="chat-user" id="directeur">
<a class="user" user="directeur" room="" href="#">
directeur
</a>
</span>
<script>
$("a.user").click(function(event) {
alert("It works !");
});
</script>
Using the CSS selector when it exists is much more straightforward...

The solution was to change $("a.user").click(...) with $("a.user").on("click", ...)

Related

One div appear on click and second closes

i know simple java script function on click
$(document).ready(function(){
$(".click").click(function(){
$(".fade", this).fadeToggle();
});
});
but i want that on click one div appears and second one closes . like on this page http://www.wpbeginner.com/free-wordpress-blog-setup/, but on viewing source i could not find any code . Don't worry this link doesn't belong to me or my website
I think that should do it
$(document).ready(function(){
$('.click').click(function(){
if ($('.first').is(':visible')) {
$('.first').css('display', 'none');
$('.second').fadeIn(2000);
} else {
$('.second').css('display', 'none');
$('.first').fadeIn(2000);
}
});
});
http://jsfiddle.net/57VaZ/
Assuming your html looks something like this:
<a class="click">click</a><br />
<a class="fade1">fade1</a><br />
<a class="fade2">fade2</a><br />
Make sure the one that you want to show on click is hidden by default:
.fade2 { display:none }
Then do the following in jQuery:
$(document).ready(function(){
$(".click").click(function(){
$(".fade1, .fade2").fadeToggle();
});
});
Here is a fiddle demo

How do I disable a link with javascript and css?

Do you know how to disable link for user only? I have
<div class="searchoffertext" onclick="searchoffertext_selected('Banana')">Banana</div>
So idea is that link /search/Banana is a valid link and I want to keep it for search indexing engines. However, I want when user click on link, the function searchoffertext_selected was called and nothing more happened.
To stop the link from taking its default action add return false; to the onclick event:
<div class="searchoffertext" onclick="searchoffertext_selected('Banana'); return false;">Banana</div>
It's probably a better idea to put the onclick directly on the <a>
But an even better approach would be to use unobtrusive JavaScript to attach an event to the link via a selector.
See also: Stackoverflow: When to use onclick in HTML?
Using jQuery:
$('#selector').click(function(e){
e.preventDefault();
});
VanilaJS:
<a onclick="return false;">
Try this?
js
document.querySelectorAll('.searchoffertext > a').onclick = function(e) {
e.preventDefault();
searchoffertext_selected(this.getAttribute("data-fruit"));
}
html
<div class="searchoffertext">
Banana
</div>
HTML
<div class="searchoffertext" onclick="searchoffertext_selected('Banana')">
Banana
</div>
CSS
Use pointer-events, but this is unsupported in versions of IE older than 11.
.searchoffertext > a {
pointer-events: none;
}
JavaScript
Prevent the default action from executing when the link is clicked:
var links = document.querySelectorAll('.searchoffertext > a'), i;
for(i = 0; i < links.length; i += 1) {
links[i].addEventListener('click', function(e) {
e.preventDefault();
}, false);
}

how to call jquery function with different <a href="">

I want to call 2 different jquery functions to hide links
<a href="">.zip file, first link
</a>
<script>
$("a").click(function() {
location.href="first.location";
return false;
});
</script>
<a href="">.tar.gz file, second link
</a>
<script>
$("a").click(function() {
location.href=="second.location";
return false;
});
</script>
How can I call the 2 functions so that I call the first one clicking the first link and the second one clicking the second link?
Thanks a lo
This is not the best solution. For best results you might want to restructure your html and add some sort of classes and IDs to the links or their parent to identify them. But this will work
For the first link
$("a:eq(0)").click(function() {
location.href="first.location";
return false;
});
and for the second link
$("a:eq(1)").click(function() {
location.href=="second.location";
return false;
});
If you set the href in the markup there is no need for JQuery or Javascript.
<a href="first.location">.zip file, first link
</a>
<a href="second.location">.tar.gz file, second link
</a>
You can use the :eq() Selector here like:
// Clicking the first link
$("a:eq(0)").click(function () {
location.href = "first.location";
return false;
});
// Clicking the second link
$("a:eq(1)").click(function () {
location.href = "second.location";
return false;
});
Like it has already been suggested the best way to do it is to have different id's for these a tags. But if for some reason you don't want to assign ids(why on earth would you do that?) you could do the following:
Wrap the anchor tags in a div and give it an id like this
<div id="myDiv">
First Link
Second Div
</div >
Then use jQuery to do the linking:
<script>
$(function(){
$("myDiv").children(a:first-child).click(function(){
// Do stuff here
});
$("myDiv").children(a:last-child).click(function(){
// Do stuff here
});
});
</script>
you can introduce an id attribute to your links. and then trigger the events based on the id of the element.
<a href="" id='link1'>.zip file, first link
</a>
<script>
$("#link1").click(function() {
location.href="first.location";
return false;
});
</script>
<a href="" id='link2'>.tar.gz file, second link
</a>
<script>
$("#link2").click(function() {
location.href=="second.location";
return false;
});
</script>
Give link in html(href)
$("a").click(function()
{
location.href = $(this).attr('href');
return false;
});
I think this might help:
<a id="first" href="">.zip file, first link</a>
<script>
$("first").click(function() {
location.href="first.location";
return false;
});
</script>
<a id="second" href="">.tar.gz file, second link </a>
<script>
$("second").click(function() {
location.href=="second.location";
return false;
});
</script>
$("a:eq(0)").click(function() {
location.href="first.location";
return false;
});
$("a:eq(1)").click(function() {
location.href=="second.location";
return false;
});

How can i prevent double submission of <a href="">?

I have a question regarding the double submission.
I have a multiple <a href = "">.
I want to disables all the <a href=""> if i click in one of the <a href= "">
Code:
<a href="dashboard.php" id ="submitID" class="submit" >Dashboard </a>
<a href="orderList.php" id ="submitID" class="submit" >Order List</a>
New Order
First, please fix your ids to be unique.
If you're using jQuery versions 1.4.3+:
$("a.submit").click(function() {
$("a.submit").bind('click', false);
});
If not, bind function() { return false; }. Then you can also
$("a.submit").unbind('click')
when you want them to work again.
Welcome to Stack Overflow.
First of all, you should never have multiple DOM elements with the same ID.
Second of all, set a variable in a bind to the submit class (the bind is using jquery), and flip it if you submit.
Include jquery with a script tag and then wrap your javascript in document ready
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript>
$(document).ready(function () {
$('.submit').bind('click', function () {
var isSubmitted = false;
if (isSubmitted === false) {
$.get($(this).attr('href'), function () {
isSubmitted = true;
});
}
});
});
</script>
This is of course assuming you want some ajax style functionality. If not, you shouldn't really be worried if you have a link since you'd be posting to a new page
Jquery:
var count=0;
$(".submit").click(function(){
if(count>0){
return false
}
++count;
});
HTML
<a href="dashboard.php" id ="submitID1" class="submit" >Dashboard </a>
<a href="orderList.php" id ="submitID2" class="submit" >Order List</a>
New Order
var submitStatus = false;
$('a.submit').click(function(e){
if (!submitStatus) {
alert('clicked');
submitStatus = true;
} else {
e.preventDefault();
}
});
You can try it here: http://jsfiddle.net/p8a5s/
And dont use the same IDs for different DOM elements, of course

Remove Div on link click

I am doing a code in which I want to delete a div when its inner link("Delete") is clicked. I know this question might be repeating and I have tried so many methods but not working. I dont know what's the problem.
Here is my HTML Rendering Code:
<div id="ViewRows">
<br>
<div class="ViewRow"> NOS: FA Comment: finance
<a class="deleteViewRow" href="#">Delete</a>
<br>
</div>
<div class="ViewRow">
NOS: TPA Comment: Assistance
<a class="deleteViewRow" href="#">Delete</a>
<br>
</div>
</div>
Here is my javascript Code for removal of that div.
$("a.deleteViewRow").live("click", function () {
$(this).parents("div.ViewRow:first").remove();
return false;
});
I also tried following javascript:
$("#ViewRows").on("click", "a.deleteViewRow", function () {
$(this).closest("div.ViewRow").andSelf().remove();
return false;
});
I have tried same code on another page. It is working but when I applied the same logic in another page. It's not working. I know you all are right but I dont know whats problem. In firebug it's not even going into the function.
This should work:
$("#ViewRows").on("click", "a.deleteViewRow", function (e) {
// prevent browser from following link
e.preventDefault();
// ".andSelf()" can be skipped - once the parent div is removed, the link gets removed as well
$(this).closest("div.ViewRow").remove();
});
this simple yet efficient code works fine: http://jsfiddle.net/L2CsH/
$("#ViewRows").on("click", "a.deleteViewRow", function () {
$(this).parent().remove();
});
you need to prevent default action of link. event.preventDefault()
$("#ViewRows").on("click", "a.deleteViewRow", function (e) {
e.preventDefault();
$(this).closest("div.ViewRow").remove(); //.andSelf() is not needed here.
//return false;
});
Demo : Remove Div JSFiddle

Categories