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>

kendo grid client template input hidden field become editable once click

I'm trying to make a kendo grid column template like this, based on condition show text input and other way round
wrote the following code for this
columns.Bound(p => p.MyColumn).Template(#<text></text>).ClientTemplate(
"# if (myFirstCondion == true) { #" +
"<input type='text' style='width:100%' class='k-textbox' value=#=MyColumn#></input>" +
"# } else { #" +
"<input type='hidden'></input>" +
"# } #"
);
but the problem is when I click hidden column, its become input text field,
how to make this non editable once click hidden field

You could use the column.Editable handler.
e.g.
columns.Bound(p => p.MyColumn).Editable("conditionalEditable").Template(#<text></text>).ClientTemplate(
"# if (myFirstCondion == true) { #" +
"<input type='text' style='width:100%' class='k-textbox' value=#=MyColumn#></input>" +
"# } else { #" +
"<input type='hidden'></input>" +
"# } #"
);
...
<script>
function conditionalEditable(dataItem){
return dataItem.myFirstCondion; // add the same per item condition as in the client template
}
</script>

Let me guess: Your grid is editable right? If so, your grid will take control over the cell's content when editing. You need to customize it, like the example below:
<!DOCTYPE html>
<html>
<head>
<base href="https://demos.telerik.com/kendo-ui/grid/local-data-binding">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
</head>
<body>
<script src="../content/shared/js/products.js"></script>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
fields: {
ProductName: { type: "string" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Discontinued: { type: "boolean" },
Test: { type: "string" }
}
}
},
pageSize: 20
},
height: 550,
scrollable: true,
sortable: true,
filterable: true,
editable: true,
pageable: {
input: true,
numeric: false
},
columns: [
"ProductName",
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
{ field: "Discontinued", width: "130px" },
{ field: "Test", editor: ($td, data) => {
if (data.model.Discontinued) {
let myColumn = 1;
$td.append(`<input type='text' style='width:100%' class='k-textbox' value='${myColumn}'></input>`);
} else {
$td.append("<input type='hidden'></input>");
}
}
}
]
});
});
</script>
</div>
</body>
</html>
Dojo
So inside the editor callback, you can create(or not) your own input depending on any condition you need. You also have the model.

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.

Colorbox working on second click

I'm creating dynamic links through repeater and binding the links from server at OnPreRender. But the color box only works after first click. I'm using live to bind the dynamic links.
Code is follows:
protected virtual void BindJQuery()
{
string jquery = string.Empty;
jquery = StoreLocation() + "Scripts/jui/jquery-1.8.0.min.js";
Page.ClientScript.RegisterClientScriptInclude(jquery, jquery);
}
protected virtual void BindColorBox()
{
string jquery = null;
jquery = StoreLocation() + "Scripts/colorbox/jquery.colorbox-min.js";
Page.ClientScript.RegisterClientScriptInclude(jquery, jquery);
}
protected void BindColorBoxC()
{
StringBuilder urlScript = new StringBuilder();
urlScript.AppendLine("<script type=\"text/javascript\">");
urlScript.AppendLine("$('.iframeC').live('click',function(e){ e.preventDefault(); $(this).colorbox({width: '660px', height: '416px', iframe: true}); });");
urlScript.AppendLine("</script>");
string js = urlScript.ToString();
Page.ClientScript.RegisterClientScriptBlock(GetType(), "colorboxC", js);
}
protected override void OnPreRender(EventArgs e)
{
BindJQuery()
BindColorBox();
BindColorBoxC();
base.OnPreRender(e);
}
Edit:
I had replaced the following line:
urlScript.AppendLine("$('.iframeC').live('click',function(e){ e.preventDefault(); $(this).colorbox({width: '660px', height: '416px', iframe: true}); });");
With:
urlScript.AppendLine("$(document).on('click','.iframeC',function(e){ e.preventDefault(); $(this).colorbox({width: '660px', height: '416px', iframe: true}); });");
But the result is same. It's still not working on first click. And there is no overlay because it's a fresh page load.
Any kind of help is Appreciated. Thanks in Advance.

Replace this line
urlScript.AppendLine("$('.iframeC').live('click',function(e){ e.preventDefault(); $(this).colorbox({width: '660px', height: '416px', iframe: true}); });");
By and then try
urlScript.AppendLine("$(document).on('click','.iframeC',function(e){ e.preventDefault(); $(this).colorbox({width: '660px', height: '416px', iframe: true}); });");

Change this
urlScript.AppendLine("$('.iframeC').live('click',function(e){ e.preventDefault(); $(this).colorbox({width: '660px', height: '416px', iframe: true}); });");
to this
urlScript.AppendLine("$('.iframeC').on('click',function(e){ e.preventDefault(); $(this).colorbox({width: '660px', height: '416px', iframe: true}); });");
.live() is deprecated in jquery so better to use .on() in place of that.And make sure that you are closing your colorbox in a proper manner.Sometimes if the colorbox is not closed properly , the overlay will disabled you to click on any other element.And on first click the overlay will be disapper and on second click you can go with click.SO makesure your colorbox while closing

replace with this line.
urlScript.AppendLine(" $(document).delegate('.iframeC', 'click', function (e) {
$.colorbox({ iframe: true, width: '660px', height: '416px', href: this.href });
return false;
});");