We Keep Coding

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

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.

simple jquery dialog box can't create input

may any one help me create a input box inside my dialog box? i am using the jquery-ui.js. this is my code:
$(document).on("click",".savebtn",function(). {
var id = $(this).attr("id");
$.dialog({
title: "Activation date ",
content:"Activation date ",
create: function() {
$("#inputBox").val();
},
closeBack:function(){
$.dialog.message({
content: "The id is "+ id
});
},
buttons:[
{
text:"Click me"
}
]
});
});

You can try this:
Fiddle
HTML:
<div id='dialog' style='display: none;'>
<input type="text" />
</div>
<button>
Click Me!
</button>
Jquery:
$(document).ready(function() {
$("button").click(function() {
$("#dialog").dialog({
resizable: false,
modal: true,
title: "My Awesome Title",
buttons: {
"Do Something": function() {
alert("Do something if I was clicked.");
},
Cancel: function() {
alert("Dialog Canceled");
$(this).dialog("close");
}
}
});
});
});

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.

JQueryUI model not working as expected

First time I am using JqueryUI.
I am trying to pop a conditional modal to alert the user.
In my ajax call I have the following code:
.done(function (result) {
$('#reportData').append(result);
var totalColumns = '#(ViewBag.TotalColumns)';
if (totalColumns > 10) {
callDialog();
}
else {
print();
}
})
The callDialog function is:
function callDialog() {
$("#dialog-message").dialog({
modal: true,
draggable: false,
resizeable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 600,
dialogClass: 'ui-dialog-osx',
buttons: [{
text: "OK",
click: function () {
print();
}
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}]
});
};
The HTML for the modal is:
<div style="margin-left: 23px;">
<p>
Some Text
</p>
</div>
The issue I am seeing is the the modal appears, but then quickly goes away and the print() is then called.
I would expect the modal to appear and if the user clicks the OK button the print() would fire off and if the user clicks the cancel it woudl just close the modal.

From the API documentation: http://api.jqueryui.com/dialog/#option-buttons
The way you are using the button option is not correct.
Here is the working snippet:
buttons: [{
text: "OK",
click: function () {
print();
}
}, {
text: "Cancel",
click: function () {
$(this).dialog("close");
}
}]

SimpleModal: how to pass mailtolink after Submit in the modal window

I'm using simple modal to display a legal alert before the user can send email to a specific address:
On my main page:
somebody#abc.com
jQuery being used:
jQuery(function ($) {
$('.legalnotice').click(function(e) {
var src = "email_alert.html";
$.modal('<iframe src="' + src + '" height="400" width="390" style="border:0" id="legalFRAME">', {
closeHTML:"",
closeCLASS:"simplemodal-close",
containerCss:{
backgroundColor:"#f8f8f8",
borderColor:"#f8f8f8",
height:500,
padding:0,
width:400
},
overlayClose: true
});
return false;
});
});
email_alert.html contains:
<form name="alertFORM" id="alertFORM" action="">
<div class="row-box"><input type="checkbox" /><label>I understand and agrees</label></div>
<input name="Submit" type="submit" class="modal-close simplemodal-close" id="Submit" value="Close" />
</form>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$('#alertFORM').submit(function() {
window.parent.jQuery.modal.close(true);
});
</script>
When the user clicks the email address, the window opens as expected.
They check "I understand" to accept the notice, hit "Submit", and the window closes - as expected. However, I can't figure how to get the opening page to go ahead and continue from where it left off so their email client now opens so they can write an email to the selected address.
Little help please??

You could trigger the mailto window to open by using:
window.location.href = "mailto:email#example.com";
Therefore you could just add that after the modal is closed:
$('#alertFORM').submit(function() {
$.modal.close();
window.location.href = $('.legalnotice').attr('href');
});
If you want a dynamic approach that passes the href mailto value when the dialog is opened, use:
$('.legalnotice').on('click', function (e) {
e.preventDefault();
var mailto = $(this).attr('href');
$.modal($('#alertFORM'), {
closeHTML: "",
closeCLASS: "simplemodal-close",
containerId: "modal",
containerCss: {
backgroundColor: "#f8f8f8",
borderColor: "#f8f8f8",
height: 500,
padding: 0,
width: 400
},
overlayClose: true,
onClose: function (dialog) {
$.modal.close();
window.location.href = mailto;
}
});
});
Within the onClose callback, trigger the mailto window to open with window.location.href = mailto when the dialog is closed:
onClose: function (dialog) {
$.modal.close();
window.location.href = mailto;
}
.. and for your iframe:
$('.legalnotice').on('click', function (e) {
e.preventDefault();
var src = "email_alert.html";
var mailto = $(this).attr('href');
$.modal('<iframe src="' + src + '" height="400" width="390" style="border:0" id="legalFRAME">', {
closeHTML: "",
closeCLASS: "simplemodal-close",
containerId: "modal",
containerCss: {
backgroundColor: "#f8f8f8",
borderColor: "#f8f8f8",
height: 500,
padding: 0,
width: 400
},
overlayClose: true,
onClose: function (dialog) {
$.modal.close();
window.location.href = mailto;
}
});
});
});

Slight variation to get the iframe with the external file back in there, and it works a treat.
$('.legalnotice').on('click', function (e) {
e.preventDefault();
var src = "email_alert.html";
var mailto = $(this).attr('href');
$.modal('<iframe src="' + src + '" height="400" width="390" style="border:0" id="legalFRAME">', {
closeHTML: "",
closeCLASS: "simplemodal-close",
containerId: "modal",
containerCss: {
backgroundColor: "#f8f8f8",
borderColor: "#f8f8f8",
height: 500,
padding: 0,
width: 400
},
overlayClose: true,
onClose: function (dialog) {
$.modal.close();
window.location.href = mailto;
}
});
});
});
Thanks for the assistance!!