We Keep Coding

Using onclick on an <a> element

I have an a element containing an href attribute. Clicking on it would delete data so I want the user to confirm that action. The href attribute refers to a php file with an id of the data that will be deleted in the GET parameter. I've added an onclick attribute, that should execute the following piece of JS (it shows a Semantic UI modal that asks for confirmation):
confirmmodal = function () {
beforeunload = function () {
$('.ui.basic.modal')
.modal({
closable: false,
onDeny: function () {
return false;
},
onApprove: function () {
return true;
}
})
.modal('show')
;
}
}
But when I run this it still goes to the page that would delete the data (although I haven't built it yet, so nothing is deleted). Would there be an option that gives the onclick attribute priority over the href attribute somehow?

You need to add event.preventDefault() at the end of your code.
Eg:
Delete
function showDialog(e) {
// custom code to show dialog here
e.preventDefault();
}

Okay, I got there with a few tweaks on the script, taking gavgrif's comment into account as well.
I made the <a> element a little different, so it won't contain an href attribute anymore:
<a title="Delete post" onclick="confirmmodal(this)" data-postid="'. $row['postnr'] .'"><i class="large delete middle aligned icon"></i></a>
Now, if the icon is clicked, the postid is available for the JS as well, so we can just refer to that in the GET parameter when the confirm button is clicked:
confirmmodal = function (a) {
$('.ui.basic.modal')
.modal({
closable: false,
onDeny: function () {
return true;
},
onApprove: function () {
window.location.href = "deletepost.php?id=" + a.dataset.postid
return true;
}
})
.modal('show')
;
}
Which is a semi-ugly fix, but it's not that many more lines, and I don't know s*** about JQuery :)
Thanks for all the help, I almost got there with preventDefault() but I couldn't continue if the action was confirmed, so this is an easier solution.

Perform different actions with a button based on the data attribute

I have one button. His first action is to stop a video. Then it's icon change and data-status too. His second action is to reload the page.
The problem is that I can't do the second even if I code some conditions. Sometimes it don't do anything, sometimes the second action comes at the same time of the first one.
Here is my Jquery code:
// STOP VIDEO (ACTION 1)
$("#button").click(function(){
$('#button').attr({
src: 'img/film.png',
'data-status':'stop'
});
});
// RELOAD (ACTION 2)
$("#button[data-status='stop']").click(function() {
location.reload();
});
// OTHER METHOD FOR RELOAD (ACTION 2)
if ($("#button").data( "status", "stop" )) {
$("#button").click(function() {
location.reload();
});
}
Here is my HTML code:
<img id="button" src="skip.png" data-status="play">
Can you help me?

By binding the click event multiple times, you're firing both the functions on the second click. Instead, you should put the logic that decides to stop/reload inside the one event callback:
$("#button").click(function(){
var button = $(this);
if(button.attr('data-status') === 'stop') {
// Already stopped
location.reload();
} else {
// Stop
button.attr({
src: 'img/film.png',
'data-status':'stop'
)};
}
)};

How can I set alert confirmation window when delete button pressed

I want to add confirmation window when someone click on delete button, I'm using this code
$(document).ready(function() {
$("#btn_delete").click(function() {
$("#delete_id").val("y");
$("#myform").submit();
});
});
It just delete data without confirmation/alert message, anyone help me to sort out my query.
Thanks

You can use the confirm dialog to have a confirmation dialog displayed
$(document).ready(function () {
$("#btn_delete").click(function (e) {
e.preventDefault();
if (confirm('Do you want to delete')) {
$("#delete_id").val("y");
$("#myform").submit();
}
});
});

jQuery event priority

I have an element which I bind more than one event handlers:
<div id="info">
<button class="action-delete" type="button">Delete</button>
</div>
$("#info").on("click", ".action-delete", function() {
$.event.trigger({
type: "application",
message: {
name: "item-delete",
item: $("#info").data("item")
}
});
});
Then I want the user to make sure before the delete operation is done, since there are so many elements with action-delete working for different models, so I tried to inject the following scripts to the page(from another js file):
$(document).on("click", ".action-delete", function(e) {
return confirm("Sure to delete?");
})
However I found that event the confirm window displayed, the delete operation is still completed before the user choose.
Any idea to fix it?

The problem is in your confirm call here:
$(document).on("click", ".action-delete", function(e) {
return confirm("Sure to delete?");
})
It should be something like this:
$(document).on("click", ".action-delete", function(e) {
e.preventDefault(); //prevent default behavior
var conf = confirm("Sure to delete?");
if(conf == true){
$("#info").trigger( "click" ); //trigger click event for delete
}
});
Plus I would recommend removing the click event from the parent div. Instead make a delete function and let the confirm dialog ('yes') trigger the function.

jQuery bind to submit causing problems

I show a form using jQuery Fancybox -- in the form, the user has the option to edit the record or delete the record.
The JS config for this popup is as follows:
$('tr.record').click(function() {
var record_id = $(this).attr("id");
var link = 'http://' + window.location.hostname + '/expenses/expenses_edit/' + record_id;
$.fancybox({
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'ajax',
'href': link,
'onClosed': function() {
parent.location.reload(true);
}
});
$.bind("submit", function() {
$.fancybox.showActivity();
$.ajax({
type: "POST",
cache: false,
data: $(this).serializeArray(),
success: function(data) {
$.fancybox(data);
}
});
return false;
});
});
This works perfectly when the user changes his data and clicks save, as below:
<form>
<button>
<span>
Save
</span>
</button>
</form>
Next I opened a new form for the delete button
<form>
<button onclick="confirmDeleteRecord();">
<span>
Delete
</span>
</button>
</form>
Which onClick runs this:
function confirmDeleteRecord() {
var agree = confirm("This expense will be removed and you can't undo this action. Are you sure you want to remove this record?");
if (agree) return true;
else return false;
}
The problem I'm having is that when I click on 'Cancel' in the browser modal confirmation, the form is still submitted and the record is deleted.
I suspect this has to do with the bind to submit -- anyone know how to fix this issue? 'Cancel' should just close the browser modal.
Thanks for helping, much appreciated.

Change the button HTML to as follows(use return confirmDeleteRecord();):
<button onclick="return confirmDeleteRecord();">
<span> Delete </span>
</button>
Edit:
Better way is to attach a click event handler to the delete button in an unobstrusive way.
You can try this as an alternative:
<button id="deleteBtn">
<span> Delete </span>
</button>
<script type="text/javascript">
$(function(){
$("#deleteBtn").click(confirmDeleteRecord);
});
</script>

Your bind will bind to every submit. You need to provide an id or class selector for each submit. For instance:
$('#classname').submit(function() { // your code here }
See: http://api.jquery.com/submit/

You must bind the submit handler TO something. This is your problem line:
$.bind("submit", function() {
You'll need to select the form that is being submitted and bind a submit handler to the form. So, for example, if your form has id myForm, it should say something like this:
$('#myForm').bind("submit", function() {
Or even better, use the shortcut call:
$('#myForm').submit(function() {
For your button, remove onclick="confirmDeleteRecord();, and give it a class or id instead:
<button id="btnDelete">
<span>Delete</span>
</button>
And finally, add a click handler assignment to your jQuery:
$('#btnDelete').click(confirmDeleteRecord);
For the sake of tidiness, you could also simplify your confirm function like so:
function confirmDeleteRecord() {
return confirm("This expense will be removed and you can't undo this action. Are you sure you want to remove this record?");
}