I want to show pop up modal when click on delete image - javascript

Jquery code is
$(".confirmDialog").live("click", function (e) {
// e.preventDefault(); use this or return false
var url = $(this).attr('href');
$("#dialog-confirm").dialog({
autoOpen: false,
resizable: false,
height: 170,
width: 350,
show: { effect: 'drop', direction: "up" },
modal: true,
draggable: true,
buttons: {
"OK": function () {
$(this).dialog("close");
window.location = url;
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$("#dialog-confirm").dialog('open');
return false;
});
HTML.cshtml code is
<div id="dialog-confirm" style="display: none">
<p>
<span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span>
Are you sure to delete ?
</p>
button is
when I using button it is deleting data
#Html.ActionLink("Delete", "Delete", new { id = item.Sid }, new { #class = "confirmDialog" })
But not showing popup. and
How to delete and show popup when using image.

put jquery code in document.ready and use .click instead of .live
Document.ready(function(){
$(".confirmDialog").click(function(){
});
});

As Rory McCrossan and Raphael Mayer in your comments has suggested to use ".on" instead of ".live" as this has been removed from newer versions of jQuery.
$(".confirmDialog").on("click", function (e) {
...
...
});
Here is some documentation from jQuery:
http://api.jquery.com/live/
http://api.jquery.com/on/
Hope this helps.

Related

IF ELSE statements both are getting executed on click of a link in jquery

There is a student table, if the student is pass then i want to delete the record from the table on a click on link otherwise not and for that i am checking status and showing popup. But in both the cases it is showing me both the popup.
Bellow is my anchor tag :
<a data-dialog-href="#" id="delete-#Model.StudentId" href="#" data-status="#Model.Status">Delete</i></a>
and Jquery :
<script>
jQuery('body').on('click', '[data-dialog-href]', function (e) {
var studentStatus = jQuery(this).attr('data-status');
if (studentStatus == "Completed") {
$("#dialog-delete").dialog({
resizable: false,
modal: true,
title: "Confirm Delete",
height: 250,
width: 400,
buttons: {
"Yes": function (e) {
$("dialog-confirm").css("display: block");
$(this).dialog('close');
},
"No": function () {
$(this).dialog('close');
}
}
});
}
else
{
$("#dialog-ok").dialog({
resizable: false,
modal: true,
title: "Inforamtion",
height: 250,
width: 400,
buttons: {
"OK": function () {
$("dialog-confirm").css("display: block");
$(this).dialog('close');
}
}
});
}
});
</script>
div for popup :
<div id="dialog-delete">
Are you sure you want to Delete Student?
</div>
<div id="dialog-ok">
The student is not pass, Cant Delete this student.
</div>
dialog-ok is getting executed first then dialog-delete.
Please help me out. Thanks in advance.
You are getting value in studentStatus variable and you are using status variable in the rest of your code.

Dialog Removes All My Binds That are not related to it

Everytime I use dialog, all my other elements bind get lost, for example, I bind click event of elements with class '.submit-button' it works fine until I open a dialog...
Any idea?
Yours,
Diogo
edit:
Example:
Sure!
<span onclick="normalDialog()">Open Dialog</span>
<span class="submit-butto">alert ok</span>
<script>
$('.submit-butto').click(function(){
alert('Ok');
});
function normalDialog(){
$("#dialog").dialog({
title: 'Hello',
bgiframe: true,
resizable: false,
draggable: false,
height:160,
width:290,
modal: true,
overlay: {
backgroundColor: '#000',
opacity: 0.5
},
buttons: {
"Close": function() {
$(this).dialog('close');
}
});
}
</script>
When I click 'open dialog','alert ok' stops working...
Found the problem, it was nothing related to dialog,
Found this line on my code, it was resetting everything:
jQuery.cache = { };

Show Popup on Click

Following code, but it is not working.
$('#img').on('click', function () {
$("#new").dialog({
autoOpen: true,
position: { my: "center", at: "top+350", of: window },
width: 1000,
resizable: false,
title: 'Add User Form',
modal: true,
open: function () {
$(this).load('#Url.Action("_new", "Help")');
},
buttons: {
"Add User": function () {
addUserInfo();
},
Cancel: function () {
$(this).dialog("close");
}
}
});
return false;
});
I have a partial view name _new in Help Folder Under Views.
Can someone guide me too achieve it. I am using MVC4 framework :)
You have to move the click to the anchor (a) instead of the img. The click event will never reach the img.
See jsfiddle.

Confirm Jquery UI Dialog Prompt on Enter Key

I've tried the techniques suggested in the following stack answer to no luck:
Submit jQuery UI dialog on <Enter>
Something must be off with my code. On login, I have a disclaimer that pops up to warn the user that the information found within the site is confidential. I would like it so that to continue, all the user has to do is hit the enter key. Here is my original code (I've included a browser check):
$("#loginForm").submit(function (e) {
e.preventDefault();
if ($.browser.msie) {
$("#dialog-confirm")
.dialog({
resizable: false,
height: 300,
width: 550,
modal: true,
buttons: {
"Continue": function (e) {
$("#loginForm").unbind('submit').submit(),
$(this).dialog("close"),
$("#loginForm").submit();
$("#btnLogin").click();
},
Cancel: function (e) {
e.preventDefault();
$(this).dialog("close");
}
}
})
}
else {
$("#dialog-browser")
.dialog({
resizable: false,
height: 220,
width: 480,
modal: true,
buttons: {
"Close": function (e) {
e.preventDefault();
$(this).dialog("close");
}
}
})
};
});
Now here is my code with the keyup commands:
$("#loginForm").submit(function (e) {
e.preventDefault();
if ($.browser.msie) {
$("#dialog-confirm")
.dialog({
resizable: false,
height: 300,
width: 550,
modal: true,
buttons: {
"Continue": function (e) {
$("#loginForm").unbind('submit').submit(),
$(this).dialog("close"),
$("#loginForm").submit();
$("#btnLogin").click();
},
Cancel: function (e) {
e.preventDefault();
$(this).dialog("close");
}
},
HERE>>> open: function() {
$("#dialog-confirm").keypress(function(e) {
if (e.keyCode == $.ui.keyCode.ENTER) {
$("#loginForm").unbind('submit').submit(),
$(this).dialog("close"),
$("#loginForm").submit();
$("#btnLogin").click();
}
});
}
})
}
else {
$("#dialog-browser")
.dialog({
resizable: false,
height: 220,
width: 480,
modal: true,
buttons: {
"Close": function (e) {
e.preventDefault();
$(this).dialog("close");
}
}
})
};
});
This unfortunately is not working for me and I can't for the life of me figure out why? If anyone can see where the issue is, I'd be extremely grateful!
Thanks!!
I put this aside for most of the day and just revisited it. I got it working! Here's my code:
$("#loginForm").submit(function (e) {
e.preventDefault();
if ($.browser.msie) {
$("#dialog-confirm")
.dialog({
resizable: false,
height: 300,
width: 550,
modal: true,
buttons: {
"Continue": {
text: "Continue",
id: "btnContinue",
click: function (e) {
$("#loginForm").unbind('submit').submit(),
$(this).dialog("close"),
$("#loginForm").submit();
$("#btnLogin").click();
}
},
Cancel: function (e) {
e.preventDefault();
$(this).dialog("close");
}
},
open: function () {
$(document).keydown(function (event) {
if (event.keyCode == 13) {
$("#btnContinue").click();
}
});
}
})
}
Essentially, I assigned the button in my dialog an ID value, and instead of $("#dialog-confirm").keydown I used $(document).keydown. Since the function is set only after the dialog opens, it won't necessarily affect the rest of my page. Inside of the keydown function, I have it hitting the continue button of which I call out by ID.
Thanks for the help everyone.
Try using this:
$("#dialog-confirm").keydown(function (event) {
if (event.keyCode == 13) {
// Submit it
}
});
If you don't have any elements in the dialog that will get focus (i.e: input elements), you can try the approach suggested in this question: jquery-ui Dialog: Make a button in the dialog the default action (Enter key)

jquery dialog not opening/closing

i have code like this:
The dialog does not open when i use this.
else if (json.score == -3) {
$("#dialog-unauthenticated").dialog('open');
}
but does when i use this! I have it initialized with autopen false above too.
else if (json.score == -3) {
$("#dialog-unauthenticated").dialog({
resizable: false,
height: 140,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
});
}
what is wrong?
close does not work either.
initialized with:
$("#dialog-unauthenticated").dialog({
autoOpen: false,
resizable: false,
height: 140,
modal: true,
buttons: {
"OK": function () {
$(this).dialog("close");
}
}
});
Not sure if this helps, but im invoking this in response to a jquery post.
you need to initiate the dialog first.
then you can do actions after.
so e.g.
$('<div id="dialog" />')
.dialog({
modal:true,
buttons:{
cancel:function(){
$(this).dialog('close');
}
}
});//init dialog
$('#open').click(function (){
$('#dialog').dialog('open');
});
$('#close').click(function (){
$('#dialog').dialog('close');
});
As you are trying to open the dialog when its not initiated. therefore the dialog does not exist so it cnt be opened

Categories