We Keep Coding

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>

Postback in jQuery UI dialog

I've a gridview with some rows.
On each row I have an imagebutton on the right side of the grid that offer the possibility to delete a record.
Clicking on the imagebutton is show a dialog created with jQuery UI.
jQuery code is:
$("[name*='btn_check']").click(function() {
event.preventDefault();
$("#dialog-confirm").dialog({
autoOpen: true,
resizable: false,
height: 200,
modal: true,
buttons: {
"Accept": function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
});
Code is quite simple and common for jQuery UI dialog.
So, now I wan to execute code when "Accept" button is clicked and I though __doPostBack could be a good solution.
So, I've created an hidden button in my gridview (near the imagebutton), then I've added this code to "Accept" function, as I found on another StackOverflow question:
__doPostBack('btn_hidden', '');
I've also tried to use this:
__doPostBack('<%= btn_hidden.UniqueID %>', '');
But without success.
So, which is the right way to execute a postback and how can I send the ID of the record to delete this record with code behind?

First of all you should have a correct CommandName and CommandArgument set on your ImageButton. Then call dialog from the OnClientClick. As I understood you have only one dialog element hidden somewhere so there should be no problems with ids:
<asp:ImageButton runat="server"
CommandName="Delete"
CommandArgument='<%# Eval("YourKeyFieldNameHere") %>'
OnCommand="ImageButton_Command"
OnClientClick="javascript:return showConfirmDialog(this.name)"
/>
function showConfirmDialog(uniqueId) {
$("#dialog-confirm").dialog({
autoOpen: true,
resizable: false,
height: 200,
modal: true,
buttons: {
"Accept": function() {
$(this).dialog("close");
__doPostBack(uniqueId, '');
},
Cancel: function() {
$(this).dialog("close");
}
}
});
return false; // this is to prevent default click handler to cause a postback
}
Codebehind:
protected void ImageButton_Command(object sender, CommandEventArgs e)
{
// e.CommandArgument will contain the record key and
// e.CommandName will be equal to "Delete" or whatever you'll set on aspx
}

Third asp.net button doesn't open a jQuery dialog

I have a very basic testing asp.net web application. There is one <asp:Button> that pops a jQuery dialog. In this dialog there is another <asp:Button> that makes a <div> tag visible, and in this <div> tag there is a third <asp:Button>. So far everything is okay.
Now according to my code the third button should pop a second jQuery dialog, but this never happens. Where am I mistaking?
Here is my aspx code:
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true"></asp:ScriptManager>
<asp:Button ID="btn" runat="server" Text="btn" />
<div id="div1">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<table>
<tr>
<td>
<asp:Button ID="btn1" runat="server" Text="btn1" OnClick="btn1_Click" />
</td>
<td>
<div id="div2" runat="server" visible="false">
<asp:Button ID="btn2" runat="server" Text="btn2" />
</div>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</div>
<div id="div3" style="display:none">
<h1>test</h1>
</div>
And here is the code for the jQuery:
<script type="text/javascript">
var dialogOpts = {
resizable: false,
bgiframe: true,
autoOpen: false,
width: "710px"
};
$('#div3').dialog(dialogOpts).parent().appendTo($("#form1"));;
$(function () {
$("#div3").dialog({
maxWidth: 1050,
maxHeight: 534,
width: 1050,
height: 534,
resizable: false,
autoOpen: false,
buttons: {
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#btn2").click(function () {
$("#div3").dialog("open");
return false
});
});
</script>
<script type="text/javascript">
var dialogOpts = {
resizable: false,
bgiframe: true,
autoOpen: false,
width: "710px"
};
$('#div1').dialog(dialogOpts).parent().appendTo($("#form1"));;
$(function () {
$("#div1").dialog({
maxWidth: 1050,
maxHeight: 534,
width: 1050,
height: 534,
resizable: false,
autoOpen: false,
buttons: {
Cancel: function () {
$(this).dialog("close");
}
}
});
$("#btn").click(function () {
$("#div1").dialog("open");
return false
});
});
</script>
It is placed in the body and so far only the first jQuery pops up.
And this is my c# function that makes the second <div> tag visible:
protected void btn1_Click(object sender, EventArgs e)
{
div2.Visible = true;
}

visible = false
essentially prevents element from rendering. If you register the onclick event for the unrendered (UNRENDERED, not display:none nor visibility:hidden, your button does not physically reside in the page), the onclick event does not register to anything at all. After you show your button in the update panel, there is nothing to be run on click, because no click handling has been set (the button did not exist in the time of
$("#btn2").click(function () {
$("#div3").dialog("open");
return false
});
)

Jquery UI Dialog with asp button trigger in update panel

I have a issue with Jquery Modal dialog being called from a button inside an update panel..
here are the insights..
Javascript used for opening a Jquery modal dialog in aspx page..
<script type='text/javascript'>
function openModalDiv(divname) {
$('#' + divname).dialog({
autoOpen: false,
bgiframe: true,
closeOnEscape: true,
modal: true,
resizable: false,
height: 'auto',
buttons: { Ok: function () { closeModalDiv(divname) } },
open: function (event, ui) { jQuery('.ui-dialog-titlebar-close').hide(); }
});
$('#' + divname).dialog('open');
('#' + divname).parent().appendTo($('form:FrmSearch'));
$('#' + divname).css('overflow', 'hidden')
}
function closeModalDiv(divname) {
$('#' + divname).dialog('close');
}
</script>
the button in aspx page..
<asp:UpdatePanel ID="upDialogs" runat="server">
<ContentTemplate>
<asp:Button ID="btnOpenDialog" runat="server" Text="Open Dialog" onclick="btnOpenDialog_Click" />
</ContentTemplate>
</asp:UpdatePanel>
The Div which needs to be called from code behind via javascript..
<div id="ErrorDiv2" title="Error" style="visibility:hidden">
<p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Please select an option among the results and try again!</p>
</div>
Finally the code behind ..
protected void btnOpenDialog_Click(object sender, EventArgs e)
{
if (ProfileID == null)
{
Page.ClientScript.RegisterStartupScript(this.GetType(), "ErrorDivOpen", "document.getElementById('ErrorDiv2').style.visibility = 'visible';", true);
Page.ClientScript.RegisterStartupScript(this.GetType(), "ErrorDivShow", "openModalDiv('ErrorDiv2');", true);
}
}
Now the Issue in detail..
Without the update panel the modal dialog pops very fine but makes full post back..
I want to have only a partial post back and hence am using a update panel..
The following are the solutions I have tried..
Added update panel to the existing div, dint work.
added an update panel along with runat="Server" for the div, still dint work..
Can any one help me with possible solutions?

Thanks for your quick reply but I found another solution.
I added both update panel and runat parameters to the Div.
<asp:UpdatePanel ID="upErrorDiv" runat="server"><ContentTemplate>
<div runat="server" id="ErrorDiv2" title="Error" style="visibility:hidden">
<p><span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>Please select an option among the results and try again!</p>
</div>
</ContentTemplate></asp:UpdatePanel>
Changed the code behind as.
if (ProfileID == null)
{
ScriptManager.RegisterStartupScript(ErrorDiv2,this.GetType(), "ErrorDivOpen", "document.getElementById('ErrorDiv2').style.visibility = 'visible';", true);
ScriptManager.RegisterStartupScript(ErrorDiv2,this.GetType(), "ErrorDivShow", "openModalDiv('ErrorDiv2');", true);
return;
}

Could you try injecting the javascript into a Literal control inside UpdatePanel, istead registering it with ClientScriptManager ?
Kris