I have a small issue:
I have a jquery onclick event set for a row() in a table and in the last column I have a link that opens a confirmation pop-up(asking if I am sure to do that bla bla . . .). If I click the link, the pop-up opens, and if I press no, it should stay on the current page, but instead it continues with the event from the row(that click is triggered). What do you think?
Link:
<tr class="clickableRow" id="someId"> bgcolor="color">
..........
<td>
<img src="images/delete.png" border="0">
</td>
</tr>
Javascript:
$(".clickableRow").click(function() {
window.open("companynewestimate.php?id="+this.id,"_parent");
});
Del function
<script language="javascript">
function del_prompt(id)
{
if(confirm ("Are you sure you want to delete selected Record")){
location.href = "companyopenestimates.php?act=del&id="+id;
}
else{
return false;
}
}
</script>
Without some code, it's hard to get the correct answer. But maybe this helps:
$("#element").on("click",function(e){
//do something
e.preventDefault();
e.stopPropagation();
})
See here:
http://api.jquery.com/event.stopPropagation/
Changing your link's onclick should do the trick:
onClick="del_prompt('<?=$line['id_est']?>'); return false;"
Note that the javascript: is not at all needed.
Related
I'm having a tough time using jQuery to give a button the ability to delete it's own row. Specifically, I the selection process find extremely confusing.
The table has an id of foo and the button has a class of 'delete. Shouldn't the following code select the button? It's just the ****.on('click', function(event){}) part that I am struggling to understand. I just want the button created to be selected to have the on response.
$('#foo tr:last').after(`<tr id="1"><td>fname</td>
<td>lname</td>
<td>pnumber</td>
<td>address</td>
<td><button class="delete" id="1" type="click">Delete</button></td>`)
$("#foo .delete").on('click', function(event) {
event.preventDefault()
let rowID = event.target.id
if (rowID !== '') {
$(`#foo,#${rowID}`)[1].remove()
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="foo">
<tr></tr>
</table>
Read this Jquery doc https://learn.jquery.com/events/event-delegation/
$(document).on('click', "#foo .delete", function(event){
//do something here
})
So I have the following code:
JS
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
return true;
}
$("#close-link").click(function(event) {
event.preventDefault();
var targetUrl = $("#confirm").attr("href");
});
$("#confirm").click(function(event) {
event.preventDefault();
});
$("#go").click(function(event) {
event.preventDefault();
});
HTML
<div id="overlay">
<div id="dialog">
<h3 class="top-bar">Leaving so soon?</h3>
<span class="close-button-container">[X]</span><br /><br /><br />
Example text
<br />No, take me there anyway...
</div>
</div>
<!-- ... -->
Example Link
The Problem
I tried adding a link to another site. But I wanted to add a confirmation box once this link is clicked. The #close-link is used to close the dialog and the #confirm link as seen above should open it. The #go link is inside the dialog and if clicked brings the user to the location of the #confirm link. But something went wrong... Now when I click #confirm it opens the dialog for a second and directly sends me to its href. Shouldn't event.preventDefault fix this? If so, then why doesn't it?
Add an event to overlay(event). This function needs to prevent the click so it should have the e.preventDefault()
Example Link
function overlay(event) {
event.preventDefault();
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
var href = event.target.href
//If click button close
//Hidden div, no go
//If click button go
//window.location = href
}
Explanation
Your <a> has two events binded to it. One with #confirm and one with the inline onclick=. You should choose only one :)
So, a few things;
Remove all inline event handlers
When using jQuery, make the most of it and avoid writing vanilla javascript unless there is a reason to do so.
Do not use A for any other purpose than an actual link (The close button in your case). Use a button/other tags.
Take a look the below code and see if that's what you wanted.
$("#confirm, #close-link").click(overlay);
function overlay(evt) {
evt.preventDefault();
var el = $("#overlay");
el.css({"visibility": el.css("visibility") === "visible" && "hidden" || "visible"});
if ( this.tagName === 'A' ) {
el.find("a").attr("href", this.href);
}
}
#overlay {
height: 150px;
width: 200px;
background: green;
visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="overlay">
<div id="dialog">
<h3 class="top-bar">Leaving so soon?</h3>
<span class="close-button-container" id="close-link">[X]</span><br /><br /><br />
Example text
<br />No, take me there anyway...
</div>
</div>
<!-- ... -->
Example Link
If your code was called as part of an event listener callback, event.preventDefault() would work. But your code is running due to onclick which simply runs the function overlay() - attaching listeners to various elements (#close-link, #go, #confirm) using jQuery. After the listeners are attached, they start listening for events, which never come since the <a href="..."> changes the page.
Solution:
It is best to stop using on* attributes for all your codes. Take it out. Then use only event listeners for all your needs.
$('#confirm').on('click', function(event) {
event.preventDefault(); // this will work
// Do your toggle visibility and whatever else you need here.
});
There are other possible solutions that continue to use onclick calling a function, but I wouldn't recommend it.
Try attaching the click event to the #confirm element inside $(document).ready:
$(document).ready(function() {
$("#confirm").on("click", function(event) {
event.preventDefault();
});
});
In a page I'm creating there are some WebGrid components serving as master grids, and on clicking a row, a details area is shown. Now every row shall also have a delete button, so that clicking this button, the row is deleted.
Now because I have a click handler for #myGrid tbody tr, and the button (which is actually just an image) is inside the tr, both click handlers are executed when I click on the button. What can I do to prevent this and just execute the click handler for the button, that is, for the "top" element?
Here is a jsFiddle roughly demonstrating what I'm currently doing
Is there an elegant way to do this, or is there maybe an alternative to what I'm currently doing?
For reference, here's some even shorter sample code. HTML:
<table id="tbl">
<tr>
<td><img src="someImage.png" class="delete-button" /></td>
</tr>
</table>
JavaScript:
$(document).ready(function () {
$("#tbl tr").click(function () {
alert("row click");
});
$(".delete-button").click(function () {
alert("delete-button click");
});
})
Use stopPropagation
Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
$(".delete-button").click(function (e) {
// ^
alert("delete-button click");
e.stopPropagation();
// ^^^^^^^^^^^^^^^^
});
https://jsfiddle.net/tusharj/nbvdw0q1/3/
Docs: http://api.jquery.com/event.stopPropagation/
You simply need to stop the propagation of the click event of the elements containing the button:
$(".delete-button").click(function (event) {
alert("delete-button click");
event.stopPropagation();
});
Updated fiddle.
You can just capture the parent click then compare the event target against the delete button.
(Demo)
$("#tbl tr").hover(function() {
$(this).toggleClass("clickable");
}).click(function(e) {
if ($(e.target) === $('.delete-button')) {
alert("delete-button click");
} else {
alert("row click");
}
});
Just wrote a jquery to show a comment button, when click on the textarea. Hide comment button clicking on somewhere else in the screen. Its working fine in Firefox. But in Chrome it working only once. When I click on textarea again the submit button is not showing, its still hidden.
$(document).on('click', ".comment_txt, .comment_btn", function() {
var post_id = $(this).attr("post-id");
$("#comment_btn_div_"+post_id).show();
});
$('body').click(function() {
$(".comment_btn").hide()
});
<form class="comment_submit" action="http://localhost:3000/api/v2/posts/48774/comment" data-post-id="48774" id="comment_form_48774">
<textarea post-id="48774" id="comment_txt_48774" placeholder="Comment" cols="40" rows="1" class="width100 comment_txt"></textarea>
<div id="comment_btn_div_48774" class="right comment_btn" post-id="48774" style="display:none">
<button onclick="$(this).text('commenting...')" class="btn btn-small btn-info right" id="comment_btn_48774" type="submit">Comment</button>
</div>
</form>
Not sure why this is not working in Chrome. There are many form in my page. So I have did $(".comment_btn").hide() on body click. In order to show a particular comment button i'm using this code $("#comment_btn_div_"+post_id).show();
Update:
After the comment button is hidden, Even when i do a $("#comment_btn_div_23232").show() from firebug console. Its not showing the div.
Update 2 (testing with alert):
$(document).on('click', ".comment_txt, .comment_btn", function() {
alert("commenttext area clicked");
$(".comment_btn").show()
});
$('body').click(function() {
alert("body clicked");
$(".comment_btn").hide()
});
Clicked textarea, got alert a. body clicked b. commenttext area clicked. Now comment button is shown
Clicked body got alert a. body clicked. Now Comment button is hidden
Clicked textarea, got alert a. body clicked b. commenttext area clicked. Now comment button is not shown.
Thanks!
Try it with blur
$(document).on('click', ".comment_txt, .comment_btn", function () {
var post_id = $(this).attr("post-id");
$("#comment_btn_div_" + post_id).show();
});
$('.comment_txt').blur(function () {
$(".comment_btn").hide()
});
FIDDLE
I run into this every once in a while. Have yet to figure out why it happens; it befuddles me. I solve it by using one of the other ways of "showing" divs. Most recently, I changed the css display property:
$("#comment_btn_div_"+post_id).css('display','block');
var post_id=null;
$(document).on('click', ".comment_txt, .comment_btn", function(event) {
post_id = $(this).attr("post-id");
$("#comment_btn_div_"+post_id).show();
event.stopPropagation();
$('body').bind("click",function() {
$("#comment_btn_div_"+post_id).hide()
$(this).unbind();
});
});
I hope it will work for you
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