We Keep Coding

C# MVC ajax call to database with a popup model does not recognize cancel button click

I have a c# application which displays a webgrid populated by a database. When I double click on a grid element, jquery captures the double click, determines the row of the grid, finds the ID column and does an ajax call to pass the ID back to my controller. Ajax is instructed to expect html as the response.
When the controller receives the ID from the view, it reads the record from the database with that ID, populates a list with a set of fields, and passes that list as a parameter to a partial view.
The partial view returns html to the ajax call. The html includes a form where the database fields are displayed in text boxes so the user can update the data. There is a submit button and a cancel button at the bottom of the form.
The is the ajax code:
$("body").on("dblclick", "#WebGrid td", function () {
var row = $(this).closest("tr");
var FirstName = row.find("td").eq(1).text();
var LastName = row.find("td").eq(2).text();
var ID = row.find("td").eq(0).text();
$.ajax({
url: "/Home/Details",
type: "POST",
data: { ID: ID, FirstName: "", LastName: "", EmailAddress: "", EmailType: "" },
dataType: "html",
success: function (result) {
$('#dialog').html(result);
$('#dialog').dialog('open');
},
failure: function (result) {
alert("FAILURE " + result.responseText);
},
error: function (result) {
alert("ERROR " + result.responseText);
}
});
return false;
});
And this is how I define the division that the returned html gets placed into:
<div id="dialog" style="display: none">
</div>
And this is the function that I have:
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
title: "Update"
});
});
When I run the application, and I double click on a grid item and the partial view gets passed back to the ajax call, the dialog division gets displayed correctly with the data from the database.
The problem is when I click on the Cancel button nothing happens. And I do not get the 'cancel button clicked' message on the console. I have this code to capture the click of the cancel button:
$("#btnCancel").on('click', function (event) {
console.log("cancel button clicked");
$('#dialog').hide;
toastr.warning("Your update has been cancelled");
clear();
display();
});
Any suggestions? Thank you.
edit:
Here is the entire code of the initial View where the grid is rendered:
#model List<CodingChallengeV4.ViewModels.ContactPassData>
#{
ViewBag.Title = "UpdateAllData";
}
#{
Layout = null;
WebGrid grid = new WebGrid(source: Model, canPage: true, canSort: false);
}
<!-- jQuery library -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/jquery-migrate-3.0.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js">
</script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<!-- Latest compiled JavaScript -->
<!-- add thids links for the error message-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/css/toastr.css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/toastr.js/1.3.1/js/toastr.js"></script>
<style type="text/css">
.Grid {
border: 1px solid #ccc;
border-collapse: collapse;
}
.Grid th {
background-color: #F7F7F7;
font-weight: bold;
}
.Grid th, .Grid td {
padding: 5px;
width: 150px;
border: 1px solid #ccc;
}
.Grid, .Grid table td {
border: 0px solid #ccc;
}
.Grid th a, .Grid th a:visited {
color: #333;
}
</style>
<h2>Update All Contacts</h2>
#grid.GetHtml(
htmlAttributes: new { #id = "WebGrid", #class = "Grid" },
columns: grid.Columns(
grid.Column(header: "", format:#<text><div class="edit" data-id="#item.passedID" data-propertyname="passedID">#item.passedID</div></text>),
grid.Column(header: "First Name", format:#<text><div class="edit" data-id="#item.passedID" data-propertyname="passedfName">#item.passedfName</div></text>),
grid.Column(header: "Last Name", format:#<text><div class="edit" data-id="#item.passedID" data-propertyname="passedlName">#item.passedlName</div></text>),
grid.Column(header: "eMail Address", format:#<text><div class="edit" data-id="#item.passedID" data-propertyname="passedeMail">#item.passedeMail</div></text>),
grid.Column(header: "eMail Type", format:#<text><div class="edit" data-id="#item.passedID" data-propertyname="passedeMailTypeString">#item.passedeMailTypeString</div></text>)
)
)
<div id="dialog" style="display: none;" >
</div>
<script>
$(function () {
$("#dialog").dialog({
autoOpen: false,
modal: true,
title: "View Details"
});
});
$(document).ready(function () {
$('#toast-container').find('.toast-top-center').removeClass('.toast-top-center');
toastr.options = {
"closeButton": true,
'autoWidth': false,
"debug": false,
"newestOnTop": true,
"progressBar": true,
"positionClass": "toast-center-center",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "3000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
$("#btnCancel").on('click', function (event) {
console.log("cancel button was clicked");
$('#dialog').dialog('hide');
toastr.warning("Your update has been cancelled");
clear();
display();
});
$("body").on("dblclick", "#WebGrid td", function () {
var row = $(this).closest("tr");
var FirstName = row.find("td").eq(1).text();
var LastName = row.find("td").eq(2).text();
var ID = row.find("td").eq(0).text();
$.ajax({
url: "/Home/Details",
type: "POST",
data: { ID: ID, FirstName: "", LastName: "", EmailAddress: "", EmailType: "" },
dataType: "html",
success: function (result) {
$('#dialog').html(result);
$('#dialog').dialog('open');
},
failure: function (result) {
alert("FAILURE " + result.responseText);
},
error: function (result) {
alert("ERROR " + result.responseText);
}
});
return false;
});
});
</script>

JQuery Dialog Not Opening from C# Code Behind when autoOpen is False

I have an ASP.Net web application (with Master Page) and I've created a jQuery Dialog on one of the child pages. This dialog is used to display error messages to the operator if and when they happen in the code behind (e.g. saving error, etc.). So there isn't any one button or control that opens this dialog. For testing purposes only, I created an ASP button on the page to be sure I could open the dialog from the code behind. If the jQuery dialog is set with autoOpen:true, that ASP button will open the dialog every time. Obviously the dialog is open initially on page load, but if I close it, I can open it back up with that button. However, if I set autoOpen:false, that ASP button will not show/open the dialog. So I know for sure that my code behind for opening the dialog is correct since it works as stated previously. I've got the jQuery dialog code wrapped in a function that I reference in a "$(document).ready", but it still isn't working. Not sure what I am doing wrong. The div for the dialog is NOT contained in an UpdatePanel. I've seen many other posts about "similar" issues with showing the dialog when autoOpen:false, but some of them don't apply and others I've already tried or incorporated their suggestions.
$(document).ready(function ()
{
ShowPopup();
});
function ShowPopup(msgBoxTitle) {
$(function () {
$("#UserMessageBox").dialog(
{
autoOpen: false,
resizable: false,
height: "auto",
width: 600,
modal: true,
title: msgBoxTitle,
dialogClass: 'UserMessagBox',
buttons:
{
"Close": function () {
$(this).dialog("close");
},
"Next Message": function () {
var disableCloseBtn = ShowNextMessage();
if (disableCloseBtn) {
$(".ui-dialog-buttonpane button:contains('Close')").button("disable");
}
else {
$(".ui-dialog-buttonpane button:contains('Close')").button("enable");
}
},
},
open: function () {
$(".ui-dialog-buttonpane button:contains('Close')").button("disable");
},
});
});
};

When "autoOpen" is "false" the dialog will not open when you initialize it like you do on your function. you need to use the "open" method for this:
$("#UserMessageBox").dialog("open");
Documentation is here:
autoOpen
open
Update: exactly like the link you provide in the comment. and works.
you can actually call the open method where ever you want after you first initilized the dialog. so after you run ShowPopup, you can run "open" where ever you want on your app.
Update: i did some more changes like to match what you wrote.
So now you initilize the dialog and then call it on your script "ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Popup", "ShowPopup('" + message + "');", true);" just to update the data and title and open it. i put the first open on load just to show that when you close it you can run the ShowPopup any time (on my test it was with the button) like in your script.
$(document).ready(function ()
{
InitPopup();
//just for test
//ShowPopup('My Test Message');
//put this code where ever you want. like in the button i createed
//$("#UserMessageBox").dialog("open");
});
function InitPopup() {
//i removed the function you created here
$("#UserMessageBox").dialog(
{
autoOpen: false,
resizable: false,
height: "auto",
width: 600,
modal: true,
title: '',
dialogClass: 'UserMessagBox',
buttons:
{
"Close": function () {
$(this).dialog("close");
},
"Next Message": function () {
var disableCloseBtn = ShowNextMessage();
if (disableCloseBtn) {
$(".ui-dialog-buttonpane button:contains('Close')").button("disable");
}
else {
$(".ui-dialog-buttonpane button:contains('Close')").button("enable");
}
},
},
open: function () {
$(".ui-dialog-buttonpane button:contains('Close')").button("disable");
},
});
};
function ShowPopup(msgBoxTitle) {
$("#UserMessageBox").html('');
$("#UserMessageBox").append('<p>' + msgBoxTitle + '</p>');
$("#UserMessageBox").dialog("option", "title", msgBoxTitle);
$("#UserMessageBox").dialog("open");
}
$('#btn').on('click', function() { ShowPopup('New Message.'); })
<link href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div id = "UserMessageBox"></div>
<button id="btn">button</button>

Using #Yair solution, I modified it slightly to include what the OP did in the this post
Here is the final working script code:
<script type="text/javascript">
$(document).ready(function () {
InitPopup();
//just for test
//ShowPopup('My Test Message');
});
function InitPopup() {
$("#UserMessageBox").dialog(
{
autoOpen: false,
resizable: false,
height: "auto",
width: 600,
modal: true,
title: '',
dialogClass: 'UserMessagBox',
buttons:
{
"Close": function () {
$(this).dialog("close");
},
"Next Message": function () {
var disableCloseBtn = ShowNextMessage();
if (disableCloseBtn) {
$(".ui-dialog-buttonpane button:contains('Close')").button("disable");
}
else {
$(".ui-dialog-buttonpane button:contains('Close')").button("enable");
}
},
},
open: function () {
$(".ui-dialog-buttonpane button:contains('Close')").button("disable");
},
});
};
function ShowPopup(msgBoxTitle)
{
$(function ()
{
$("#UserMessageBox").dialog("option", "title", msgBoxTitle);
$("#UserMessageBox").dialog("open");
});
return false;
}
</script>
Here is the other markup (minus master page stuff):
<asp:Button ID="ShowPopupMsgTestBtn" runat="server" Text="Show Popup" OnClick="ShowPopupMsgTestBtn_Click" />
<asp:HiddenField ID="NextMessageIndexHF" runat="server" />
<asp:HiddenField ID="userMessagesHF" runat="server" ValidateRequestMode="Disabled"/>
<asp:HiddenField ID="UserDialogVisableHF" runat="server" />
<%--the following div makes up a dialog box used by the jQuery dialog--%>
<div id="UserMessageBox" title="User Message" style="display:none; ">
<div style="text-align: left; margin-bottom: 5px; border-bottom: 2px solid black; padding: 5px 5px 5px 10px">
<asp:Label ID="popupMsgHeaderLbl" runat="server" Text="Message" ForeColor="Black"></asp:Label>
</div>
<div style="text-align: left; padding: 10px; margin-bottom:40px">
<asp:Label ID="popupMsgLbl" runat="server" Text="Here is a message" ValidateRequestMode="Disabled"></asp:Label>
</div>
</div>
And here is the code behind for the ASP button control I was using only for testing purposed to show I could open the jQuery dialog box from code behind.
protected void ShowPopupMsgTestBtn_Click(object sender, EventArgs e)
{
string message = "Test Message";//not used right now but we may use this later as a parameter to "ShowPopup2()" below
ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "Popup", "ShowPopup('" + message + "');", true);
}

How to fix scroll problem when the modal dialog is show up?

when I show up my modal dialog popup (after a click on a button), the scroll-bar in the background scroll-down and idk why.
I've already tried some css modification like this one
$('body').css('overflow', 'inherit')
and I've also tried
window.scrollTo(0,0)
<div
class="modal fade" id="PopUpModificaPOS" role="dialog"
style="display:none">
<div class="modal-dialog" style="width:100%" id="divPopupMod">
<% Html.RenderPartial("Partial/PopUpModificaPOS", Model); %>
</div>
</div>
//after a click on a button,this button call
function showPopUpModificaPOS(){
$("#PopUpModificaPOS").dialog({
height: 325,
width: 500,
modal: true,
position: "absolute" }).dialog("widget")
.position({ my: "top", at: "top", of: window });
}
I expect the scroll-bar must not scroll-down.

I solved the problem changing the way I build the popup.
<script id="modificaTemplate" type="text/x-kendo-template">
<form class='formPopUpPos' id='formModifica'>
//put here your popup layout
</form>
</script>
//then call the script
function showpopup(){
var template = kendo.template($("#modificaTemplate").html());
var result = template();//pass here your parameters if u have someone
$("#popupKendoDialog").html(template);
var popupModificaPOS = creazioneDelPopupDialog();
popupModificaPOS.dialog({ title: 'Modifica dispositivo POS' });
popupModificaPOS.dialog({ width: '500' });
popupModificaPOS.dialog('open');
}
function creazioneDelPopupDialog() {
var popupRegistrazionePOS = $("#popupKendoDialog").dialog({
autoOpen: false,
height: 'auto',
width: 'auto',
position: { my: "center top", at: "center top", of: window },
modal: true,
open: function () {
$(".formPopUpPos").css({ "color": "#4d4d4d" });
$(".formPopUpPos").css({ "font-family": "inherit" });
$(".formPopUpPos").css({ "font-size": 12 });
}
});
return popupRegistrazionePOS;
}
I still dk why doens't work in the other way.

jquery buttons are not showing

The buttons in this jquery are not showing;
function jqcall() {
$(document).ready(function () {
var dlg1 = $("#dialog").dialog({
width: 1250,
height: 575,
autoOpen: false,
buttons: {
'Ok': function () {
$("[id*=Button1]").click();
},
'Close': function () {
$(this).dialog('close');
}
}
});
dlg1.parent().appendTo($("form:first"));
});
}
Originally this dialog box was opening on clickig link button in Gridview and also the save button is not working in gridview; it is posting back to server and not showing any error but data is not saving to the database.

Note the use of the initializer options:
position: { my: "left top", at: "left top", of: $("#divId") }
Puts the left top of the element at the left top of $("divId").
appendTo: "#divId"
Positions the dialog appended within the #divId element. Similar to position,
modal: true
Positions it above all other elements on the page, effectively disabling them while the dialog is open.
$(document).ready(function() {
var dlg1 = $("#dialog").dialog({
width: 1250,
height: 575,
position: { my: "left top", at: "left top", of: $("#divId") },
autoOpen: false,
//appendTo: "#divId",
//modal: true,
closeText: "hide",
title: "Dialog Title",
buttons: [{
text: "Ok",
icons: { primary: "ui-icon-heart" },
click: doSomething
}, {
text: "Close",
icons: { primary: "ui-icon-heart" },
click: () => $(this).dialog('close')
}]
});
$("#dialog").dialog( "open" );
});
$("[id*=Button1]").click(doSomething);
function doSomething() {
console.log("Something");
}
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<div id="divId"></div>
<div id="dialog"></div>

$(function() {
$('#clickMe').click(function(event) {
var mytext = $('#myText').val();
$('<div id="dialog">'+mytext+'</div>').appendTo('body');
event.preventDefault();
$("#dialog").dialog({
width: 600,
modal: true,
close: function(event, ui) {
$("#dialog").remove();
}
});
}); //close click
});
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<h3 id="clickMe">Open dialog</h3>
<textarea cols="0" rows="0" id="myText" style="display:none">Some hidden text display none</textarea>

how to BlockUI content in new page ASP.NET C#

I can't figure out how to block content in new page with jQuery BlockUI. I have application in aSP.NET MVC. In one view I click the button and new report is generated and opened in new tab/window and I want block this page content until report is not loaded. But in my case content is blocked on first page with button and not in this new one. Can someone help me how to do this, please?
<div>
<button id="btnSubmit">Report</button>
</div>
<script type="text/javascript">
$(function () {
$('#btnSubmit').click(function () {
$.blockUI({ css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
});
setTimeout($.unblockUI, 5000);
window.open(link, "Report");
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
return false;
</script>

May require some further debugging but this is the idea:
var w = window.open(link, "Report");
$(w.document).ajaxStart($.blockUI).ajaxStop($.unblockUI);