I am using ajax using jquery, I am deleting a row using the following code snippet:
$('#example a.delete'). live('click', function (e) {
e.preventDefault();
if (confirm("Are you sure you want to delete this row?"))
{
alert("Hello World!")
}
});
When I click grid view show button, grid view appears without page refreshing due to ajax. If I click grid view show button more than one time, it refresh again grid view area, accordingly. But confirm box show more than one time,which is equal to my no. of clicks on grid-view show button, when I click on a single row delete button.
How can avoid this !
Edited
HTML CODE:
<td><a class="delete" href="#" style="margin-left: 10px"><img src="images/delete-icon.png" width="16px" height="16px" /></a></td>
Edited
Complete Code Snippet:
$('#example a.delete'). live('click', function (e) {
e.preventDefault();
if (confirm("Are you sure you want to delete this row?"))
{
$getCode = $(this).parent().parent().attr('id');
var oTable = $('#example').dataTable();
var index =oTable.fnGetPosition( document.getElementById($getCode) );
$.post("DeleteDepartment", {
depID:$getCode
}, function(data) {
if(data.result >0){
var oTable = $('#example').dataTable();
oTable.fnDeleteRow( index );
}else{
alert("Operation Fail");
}
});
}
});
$('#example a.delete').unbind('click').bind('click', function (e) {
e.preventDefault();
if (confirm("Are you sure you want to delete this row?"))
{
alert("Hello World!")
}
});
You appear to be attaching multiple events to the button. Are you sure you're only calling live() ONCE, and once only? If you call it multiple times, you get multiple handlers.
(Of course, this is why I prefer to just use .onclick = function() {...} personally)
It looks like the code is written to do the confirm once for each click.
If you want it to confirm only once you have to make the code remember that you already confirmed.
The row is not deleted until the server calls your success callback function. During that time you can keep clicking on the row and firing the click event.
You could set a variable or a property on the row when the user confirms and then check this variable each time they click. Only show the confirm message if the variable is not set.
Or you could change the state of the element you click, change its image, change style, set an attribute. You could both inform your code that it has been clicked and indicate to the user that the row is already marked for deletion.
Or you could try jquery's .one() method to attach the event.
Related
I am making a new Datatable and there is such functionality in it that I could extend a row if someone has pressed on it:
// Add event listener for opening and closing details
$('#datatable-buttons tbody').on('click', 'tr', function(){
var tr = $(this);
var row = a.row( this );
if(row.child.isShown()){
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
} else {
row.child(format(row.data())).show();
tr.addClass('shown');
}
});
So, if someone has pressed on a button at an extended line than I could listen it:
$('#datatable-buttons tbody').on('click', 'td button', function(){
var tr = $(this);
var row = a.row( this );
However I have tried 100 ways to submit a form of this line and nothing works proper.
This is simple function which extends a row:
function format ( d ) {
var editform = '<form> ... <button type="submit" class="btn
btn-primary mb-2" >Submit</button></div> </div></form>';
return editform;
}
So, now I could only listen to it when button is pressed but I don't know how to take this data and submit a form.
Once again: 1. Datatable have rows and doesn't have any buttons. 2. If you press on any one of the rows - it will extend and show it's details (new area below of the row will appear). 3. It is a form on this area. 4. I can't to submit it.
UPDATE: jsfiddle You can see an issue pressing any row and submitting a button. So you could have an alert but not the form data.
From your JSFiddle code and the comments, it seems you were trying to suppress the form submission with a view to using an AJAX request to submit the data instead. However, you'd done it by trying to modify the "action" attribute of the form tag, and in doing so introduced a syntax error.
Although you might be able to make this technique work, it's not the recommended way, and does have some drawbacks. It's better to handle the form's "submit" event using a standard jQuery (delegated) event handler:
$('#table_id tbody').on('submit', 'form', function(event) {
event.preventDefault();
//...and then your AJAX code goes here
});
event.preventDefault will stop the regular form submission from happening, so that you can then run the AJAX code.
Here's an adapted version of your JSFiddle showing it in action: https://jsfiddle.net/moa1nr9j/
Firstly, here is my code:
<script>
$(document).ready(function(){
$("#search_dropdown").on('change', function() {
ajax_search();
});
});
function ajax_search(){
var search_this = $("#search_dropdown").val();
$.post("../includes/db-search-properties.php", {searchit : search_this}, function(data){
$("#display_results").html(data);
});
}
</script>
What I am trying to achieve here is quite simple. I have a select dropdown with a list of clients. On click, the select changes the data table (called #display_results) without the need of pressing a button and that is why the change function is used.
This works, how ever you can only click the select dropdown twice and then it will not drop down again unless the page is refreshed. The event also causes my other jQuery events to break (such as my menu accordion to go up and down repeatedly) and I don't know how to tell this script to only focus on the task at hand.
Even though i've removed the login script, you can view the errors via this link:
https://www.summersproperty.com/dashboard3/directory/search-properties.php
Click the drop down on the right a few times and it will stop working, click the navigation menu items afterwards and they will bounce.
I would try stopping the event from propagating further. Like so:
$(document).ready(function(){
$("#search_dropdown").on('change', function(e) {
ajax_search();
e.stopPropagation();
});
});
Documentation
It does appear after much trial and error a bug with Chrome, as it works wonders in all other browsers but stops after a few clicks in Chrome.
$(document).ready(function(){
$("#search_dropdown").on('change', function() {
var search_this = $(this).find('option:selected').val();
if(search_this !=''){
$.post("../includes/db-search-properties.php", {searchit : search_this}, function(data){
$("#display_results").html(data);
});
}
else{ console.log("no value found"); }
return false; # optional
});
});
Have you tried this ? passing the value of current selection to your ajax call ?
for running example check this
I'm trying to create confirmation boxes after clicking to "Delete This" links.
I can do this with the use of onClick event. However, I read that this is not cool. So, I found a cool library to make confirmation boxes for me. It's called Bootbox, but I guess that does not matter.
This is what I did (pasted, actually):
I got a link like this:
<a class="confirm" href=#>Delete Record|</a>
This is the javascript code to handle clicking events for this anchor:
$(document).on("click", ".confirm", function(e) {
bootbox.confirm("?", function(result) {
console.log(result);
});
});
I can get the user input like this. However, I don't know how to let user go to delete page if he/she clicked on Yes, or do nothing when he/she clicked No.
What's the best way to do this?
It really depends on how you store data, you want to delete. If you just want to hide deleted element from page, you can do that with javascript.
eg.:
$(document).on("click", ".alert", function(e) {
bootbox.confirm("?", function(result) {
$(this).hide(200); // animated
});
});
If you store data you show in database, you should use ajax to request for example php that erase data from database.
EDIT : (first was off topic)
You must redirect the href of your link in callback result only result is true so
Delete
$(document).on("click", "a.confirm", function (e) {
e.preventDefault();
var target = $(e.target);
bootbox.confirm("?", function (result) {
if (result) {
window.location.href = $(target)[0].href;
}
});
});
For some weird reason i'm getting my confirm box coming up twice. here is my code:
$(".DeleteComment").live("click", function(){
var CommentID = $(this).attr("rel");
var confirm
if (!confirm('Are you sure you want to permanently delete this comment?')){
return false;
}else{
$(this).html("loading").css("color", "#999");
//AJAX HERE
return false;
}
});
Do you load any content dynamically (via ajax)? It could be the case that the click event is bound to the same element twice resulting in the double confirmation.
It happens when we bind event on the elements which are loaded dynamically via AJAX
So for example we are loading some dynamic html content (e.g. dynamic content in modal) on click of the edit form button,
And in that content if we have binded click event on some button e.g. delete button, then every time we click on edit form button, it binds the click event to delete button every time,
And if you have set confirm box on click event of delete button then, it will ask you as many time as it was binded for that click event means here if we have clicked edit form button 5 times then it will asks for your confirmation 5 times.
So for solving that issue you can unbind the event every time before binding event to dynamically loaded element as following :
$(document).off('click', '.DeleteComment').on('click', '.DeleteComment', function () {
if (confirm('Are you sure you want to permanently delete this comment?')){
//Delete process
return true;
}
return false;
}
Or Another way to solve this problem is to add your script in main page, means static page not in dynamically loaded one.
try this:
$_blockDelete = false;
$(".DeleteComment").live("click", function(event){
event.preventDefault();
//event.stopPropagation(); // it is not necessary
if (!$_blockDelete)
{
$_blockDelete =true;
var rconfirm = confirm('Are you sure you want to permanently delete this comment?');
if (rconfirm)
{
$(this).html("loading").css("color", "#999");
var CommentID = $(this).attr("rel");
//AJAX HERE
//return the value "false" the variable "$_blockDelete" once again ajax response
}
}
});
Did you try removing that not-used var confirm?
I know this would be difficult to understand but please give a try.
Have a look at the screenshot.
The small input box's name is murl.
add() is used to submit the form. if murl is empty the form has to be submitted directly, if its not empty the murl entry has to be checked against the database if it exists. if it doesn't exist add() is called.
The problem is the button has to be clicked twice to trigger the function.
The code on the button is:
<button type="button" value="My button value" onclick="javascript: niju();" name="microsubmit" id="microsubmit">button</button>
the JavaScript which that button calls is:
function niju()
{
var flag=1;
var micro=document.getElementById('murl').value;
$('#microsubmit').click(function()
{
if(micro=="")
{
add();
}
else
{
//remove all the class add the messagebox classes and start fading
$("#msgbox")
.removeClass()
.addClass('messagebox')
.text('Checking...')
.fadeIn("slow");
//check the username exists or not from ajax
$.post("<?php echo SITE_ROOT;?>inc/user_availability.php",
{ murl: $("input:murl").val() },
function(data)
{
if(data=='no') //if username not avaiable
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this)
.html('This User name Already exists')
.addClass('messageboxerror')
.fadeTo(900,1);
flag=0;
});
}
else
{
$("#msgbox")
//start fading the messagebox
.fadeTo(200,0.1,function()
{
//add message and change the class of the box and start fading
$(this)
.html('Username available to register')
.addClass('messageboxok')
.fadeTo(900,1);
flag=1;
add();
});
}
});
}
});
if(micro=="" && flag==1)
{
add();
}
}
Screenshot:
It has to be clicked twice because you are defining #microsubmit's click event inside the function. So the first time you click you bind the event handler, and the 2nd time the event handler is in place and gets fired. I haven't gone over the logic behind what you're trying to accomplish but my guess is that if you move the event binder outside the function and make sure all your variables are in the right scopes then it'll work.
The first time you load the page, the click handler is not hooked to the button, is only until you click the button the first time that you are calling the niju() and hooking the click event. You need to do something like
$(document).ready() {
niju();
}
and remove the onclick from the button declaration
Move your flag out of the function niju.
var flag=1;
function niju()
{
}