We Keep Coding

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.

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.

Window confirm OK/Cancel strange behavior in Dialog Box?

(I made a post about this before but I'll try to be a little more clear in this one.)
I'm having some problem with a windows.confirm box. My click-event opens a jquery dialog-box and loads a list of objects. Every object has a deletebutton which deletes and sends back an updated list (via Django view).
Im trying to put a OK/Cancel confirm before the delete. It works one time. The problem im having is that the next time i open the dialog, click delete i have to press OK/Cancel two times, then three times and so on..
Any ideas? (I've tried also else return false)
$("#mylist").click(function(event) {
event.preventDefault();
$('#dialog').load($(this).attr('href')).dialog({
width: 800,
height: 530,
resizable: false,
title: "Dialog Title",
autoOpen: true,
modal: true
});
$("#dialog").on("click", ".delete", function(event) {
event.preventDefault();
var val = window.confirm('Are you sure you want to delete this?');
if(val == true) {
$("#dialog").load($(this).attr("href"));
}
});
});

Try closing the first function before you define the second:
$("#mylist").click(function(event) {
event.preventDefault();
$('#dialog').load($(this).attr('href')).dialog({
width: 800,
height: 530,
resizable: false,
title: "Dialog Title",
autoOpen: true,
modal: true
});
});
$("#dialog").on("click", ".delete", function(event) {
event.preventDefault();
var val = window.confirm('Are you sure you want to delete this?');
if(val == true) {
$("#dialog").load($(this).attr("href"));
}
});

Maybe your problem is that the click event which contains the confirm is inside the #mtlist click event.
Try this:
$("#mylist").click(function(event) {
event.preventDefault();
$('#dialog').load($(this).attr('href')).dialog({
width: 800,
height: 530,
resizable: false,
title: "Dialog Title",
autoOpen: true,
modal: true
});
});
$("#dialog").on("click", ".delete", function(event) {
event.preventDefault();
var val = window.confirm('Are you sure you want to delete this?');
if(val == true) {
$("#dialog").load($(this).attr("href"));
}
});

Try this instead:
$("#mylist").click(function(event) {
event.preventDefault();
$('#dialog').dialog('destroy').remove();
$('#dialog').load($(this).attr('href')).dialog({
width: 800,
height: 530,
resizable: false,
title: "Dialog Title",
autoOpen: true,
modal: true
});
If it breaks everything try without the remove

wait till jquery dialog box returns

I need to open a popup window on clicking a button and used jquery dialog for this.
$(document).ready(function(){
$("#dialog-form").dialog({
autoOpen : false,
height : 300,
width : 350,
modal : true,
buttons : {
"Add" : function() {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
},
Cancel : function() {
$(this).dialog("close");
}
},
close : function() {
$("#textArea").val("");
}
});
});
function openWindow(){
$("#dialog-form").dialog("open");
statement1;
statement2;
}
<button id="add" onclick="openWindow()">Add</button>
problem over here is when i click the button dialog box is opened, but before even i enter some text in the dialog box statement1 and statement2 are getting executed and then focus is coming to the dialog box.
How can i make the statement1 and statement2 to execute only after dialog box returns?
I don't want to add the statement1 and statement2 to the "Add" function. The reason for not adding the statements in the "Add" function is because i have multiple buttons and each of these should first open the dialog box and then will execute different set of statements.

Easy fix would be to use the close callback:
$(document).ready(function () {
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function () {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
$("#textArea").val("");
//statement1 -- won't fire until dialog is closed
//statement2 -- won't fire until dialog is closed
}
});
});
function openWindow() {
$("#dialog-form").dialog("open");
}
Another thing to consider would be $.Deferred

I have an example for you:
$(".selector").click(function () {
var dialog = $('<div title="Title"></div>').dialog({
open: function (event, ui) {
$.ajax({
url: 'www.google.com.br',
cache: false,
success: function (html) {
$(dialog).html(html);
},
error: function () {
$(dialog).remove();
alert("Some Error MSG");
}
});
},
close: function () {
$(dialog).remove();
},
resizable: false,
width: 500,
modal: true
});
});
In this case, the dialog is receiving the HTML result, only after it opens.

This can be achieved by the following way:-
$('#mydialog').dialog("open");
$('#mydialog').load('serverURL',server_data_variable, function() {
myfunction();
});
This will execute the function once the dialog loading is done.It will register the callback to be executed post dialog done.The variable server_data_variable is optional and is supposed to be used only if user wants to send some data otherwise it can be skipped as.well.

Solution 1: (same as solution from Aaron Blenkush)
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function () {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
//statement1 -- will fire only if "add" button is clicked
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
$("#textArea").val("");
//statement1 -- will fire after dialog is closed
}
});
Solution 2 is to make a promise:
const dialogPromise = new Promise(function (resolve, reject) {
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Add": function () {
$("#tag1").text($("#textArea").val());
$(this).dialog("close");
resolve(true);
},
Cancel: function () {
$(this).dialog("close");
resolve(false);
}
},
close: function () {
$("#textArea").val("");
}
});
});
const addClicked = await dialogPromise;

Call callback function after "open" clause in the dialog setup.
modal: true,
resizable: false,
resize: 'auto',
close: dialogCloseFunction,
**open: function(){if(itemid) {showDailogSides(itemid);}** if(!siteParams[3]) {$(".detailSideClass").hide(); $(".addToChartinDialog").hide();}},
//hide: {effect: "fadeOut", duration: 5000}
show: { effect: "fade", duration: 1000 } //drop blind fade fold slide clip

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