We Keep Coding

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);
}

bootstrap modal popup after loading popup from codebehind

i want to show gridview in bootstrap modal popup on button click but until gridview not getting bind i just want to show loading panel and for that what i am doing is..
i am calling loading popup as from button click as below.
<asp:Button ID="btnSearch" runat="server" CausesValidation="true" Text="Search" CssClass="btn btn-info pull-right"
OnClientClick="waitingDialog.show();" ValidationGroup="MinMax" OnClick="btnSearch_Click" />
Meanwhile In codebehind i am calling Button OnClick And There After GridView bind I am Doing below process.
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(#"<script type='text/javascript'>");
sb.Append("$('#myModal').modal('show');");
sb.Append("waitingDialog.hide();");
sb.Append(#"</script>");
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "MinMax Data Report", sb.ToString(), false);
But The Problem is My GridView Is Very Big But When the popup with gridview getting Load It Not Showing horizontal and Vertical Scrollbar. In other word popup just load without scrollbar. And If I remove loading Panel and Calling direct That PopUp then It Working Fine. i am just not getting anything.
i want loading panel because my gridview takes nearly 32 seconds to load.
below is my gridview modal body.
<div class="modal-body" style="width=97%; overflow: auto;">
<div class="tabel-responsive">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:Panel ID="panel2" runat="server" ScrollBars="Auto" Width="100%" Height="100%"
HorizontalAlign="Center">
<asp:GridView ID="gvMeterData" runat="server" RowStyle-Wrap="false" CssClass="table table-striped"
GridLines="Both" OnRowDataBound="gvMeterData_RowDataBound" HeaderStyle-HorizontalAlign="Center">
</asp:GridView>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="gvMeterData" EventName="RowDataBound" />
<asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
My Loading Popup is as below.
var waitingDialog = waitingDialog || (function ($) {
'use strict';
// Creating modal dialog's DOM
var $dialog = $(
'<div class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-hidden="true" style="padding-top:15%; overflow-y:auto;">' +
'<div class="modal-dialog modal-sm">' +
'<div class="modal-content">' +
'<div class="modal-header"><h3 style="margin:0;"></h3></div>' +
'<div class="modal-body">' +
'<div class="progress progress-striped active" style="margin-bottom:0;"><div class="progress-bar" style="width: 100%"></div></div>' +
'</div>' +
'</div></div></div>');
return {
/**
* Opens our dialog
* #param message Custom message
* #param options Custom options:
* options.dialogSize - bootstrap postfix for dialog size, e.g. "sm", "m";
* options.progressType - bootstrap postfix for progress bar type, e.g. "success", "warning".
*/
show: function (message, options) {
// Assigning defaults
if (typeof options === 'undefined') {
options = {};
}
if (typeof message === 'undefined') {
message = 'Loading';
}
var settings = $.extend({
dialogSize: 'm',
progressType: '',
onHide: null // This callback runs after the dialog was hidden
}, options);
// Configuring dialog
$dialog.find('.modal-dialog').attr('class', 'modal-dialog').addClass('modal-' + settings.dialogSize);
$dialog.find('.progress-bar').attr('class', 'progress-bar');
if (settings.progressType) {
$dialog.find('.progress-bar').addClass('progress-bar-' + settings.progressType);
}
$dialog.find('h3').text(message);
// Adding callbacks
if (typeof settings.onHide === 'function') {
$dialog.off('hidden.bs.modal').on('hidden.bs.modal', function (e) {
settings.onHide.call($dialog);
});
}
// Opening dialog
$dialog.modal();
},
/**
* Closes dialog
*/
hide: function () {
$dialog.modal('hide');
}
};})(jQuery);
Edited: I think there might be problem with update panel. isn't that? but without update panel also i can not tracking the error. and again when i look in inspect element in browser than there also no error in console such as missing .js or anything.
Thanks In Advance.

I could not figure out that where should be the mistake in my code as above and i can not use AJAX for this because it is not supported in Yocto OS as i have to make this code run in there.
so at last i have make changes in my solution as below and i found the way to show loading..
There Are 2 ways i found..
1 is in this link.. Loading In Popup..
Another Way Is I kept Timer And Load 'Loading Image' In Start of page and Stop That Loading Image when my gridview bind fully by disabling timer. That Logic is as below.
.aspx Page..
<asp:Timer ID="Timer1" runat="server" OnTick="TimerTick" Interval="6000">
</asp:Timer><asp:Image ID="imgLoader" runat="server" ImageUrl="~/loading7.gif" />
.CS page
protected void TimerTick(object sender, EventArgs e)
{
this.fillGrid();
Timer1.Enabled = false;
imgLoader.Visible = false;
}
This Works Good.
But Still I am Waiting For Answer of My Actual Question. That Why Scroll Goes Out or Not Working.

Jquery UI and ASP.NET PostBack fail after post back

I have a asp.net web forms app with update panels.
and its also in a listview and I dont know if that matters or not.
I have the following Javascript..
<script lang="javascript" type="text/javascript">
function pageLoad(sender, args)
{
$(document).ready(function () {
$('textarea.epop').live('click', test);
});
function tes(event)
{
var btn = $(this);
alert(btn.val());
$('#editortext').val(btn.val());
var dialog = $('#edialog').dialog({
modal: true,
width:'auto',
resizable: false,
buttons: {
'OK': function() {
alert($('#editortext').val());
alert(btn.val());
btn.val($('#editortext').val());
$('#editortext').val("");
$(this).dialog('close');
return false;
}
}
});
// Move the dialog back into the <form> element
dialog.parent().appendTo(jQuery("form:first"));
$('#edialog').dialog('open');
return false;
}
}
</script>
Then I have this in the html body..
<div id="edialog" title="Edit SQL" style="display: none">
<label for="editortext">
SQL Query:</label>
<textarea rows="20" cols="100" id="editortext" class="editortext"></textarea>
</div>
and then in one of my list items in my list view wich is inside a update panel. I have..
<asp:TextBox ID='txtSQLQuery' CssClass="epop" TextMode="multiline" Columns="50" Rows="5" runat="server" Text='<%# Eval("SQLQuery") %>' />
code works perfect the first time with no post back.
but say I change the selection, and then a auto postback happens...
then the code no longer sets the text.. when you click ok..
using alerts I can see that its actually still referencing the old value and not the new current displayed value which seemed to invoke the click.
At this point I am stumped..

If you have your controls inside updatepanel and the update panel is set to updatemode ="condicional" you probably have to invoke updatePanel.update() from your server side code to update values.
Another thing that often happens is that the update panel and jquery are not best friends, so it will be better writing or initialize your code like this:
$(document).ready(function () {
$('textarea.epop').live('click', function(e){
test();
});
});
// register again after postback's
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function() {
$('textarea.epop').live('click', function(e){
test();
});
})

paging of datacontrol in jquery dialog

I'm using Jquery dialogs in my Asp.net web application for all my messages.
Now I've tried to fill a listview with customers inside a dialog and its working, but I want to allow the user to use paging in the listview for choosing his customer out of the list.
When I press the button to move up 1 page, it ain't working...
Maybe it's just not possible? Or does someone have an example of paging a datacontrol in a Jquery dialog?
Greetz,
Ben

I suspect that the dialog is not being displayed after the paging postback?
You have two options:
One: Change to using a popup window with the listview so that the paging is handled in the normal way in its own page
Two: On the serverside, when rendering pages, also render a startup jQuery script that re-displays the dialog.
<div id="dialog" style="display:none;" >
<asp:listview ID="lv" runat="server" />
...etc
</div>
In code behind:
var script = new StringBuilder();
script.AppendLine("jQuery(function($) {");
script.AppendLine(string.Format(" $('#dialog').attr('Title','{0}');", dialogTitle));
script.AppendLine(" $('#dialog').dialog({ closeOnEscape: true, modal: true });");
script.AppendLine("});");
ClientScript.RegisterStartupScript(GetType(), "dialog", script.ToString(), true);

The 2nd option works!
I only added this code in codebehind:
ScriptManager.RegisterClientScriptBlock(this, typeof(Page), "openDialogScript", "$(function() { openCustomerDialog(); });", true);
And in the .aspx file I added this:
openCustomerDialog = function openDialog(){
$("#reportCustomerDialog").dialog({
modal: true,
height: 420,
width: 500,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
$("#dialog").show();
};

Asp.net need Simultaneous display in Second Text Box

I have two text boxes I need a functionality like If I am typing in 1st text box The text should be getting displayed in 2nd text Box with some other font. This is a web Application. And so Text Box doesn't have OnKeyDown event? Do you suggest any way to implement this?
Note: I don't want to implement this with Javascript.

Solution using an asp:UpdatePanel
With this approach, you don't need to write a single line of JavaScript by yourself; everything is handled by the control.
Page.aspx:
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:TextBox runat="server" ID="text1" OnTextChanged="text1_TextChanged"></asp:TextBox>
<asp:TextBox runat="server" ID="text2" class="special"></asp:TextBox>
</ContentTemplate>
</asp:UpdatePanel>
Event handler for the TextChanged event, Page.aspx.cs:
protected void text1_TextChanged(object sender, EventArgs e) {
text2.Text = text1.Text;
}
Solution using ASP.NET and jQuery
Page.aspx:
<script type="text/javascript">
//As soon as the DOM is ready, execute the anonymous function
$(function () {
var textBox1 = $("#<%= text1.ClientID %>");
var textBox2 = $("#<%= text2.ClientID %>");
textBox1.keyup(function () {
textBox2.val(textBox1.val());
});
});
</script>
<asp:TextBox runat="server" ID="text1"></asp:TextBox>
<asp:TextBox runat="server" ID="text2" class="special"></asp:TextBox>
CSS for both approaches:
.special { font-family: YourFontFamilyOfChoice; }
Test Results
I've tested both solutions locally with Firefox 3.6, Opera 10.6, and Internet Explorer 8; both work like a charm.

Use jQuery (JavaScript) combined with CSS. This solution will not trigger a post-back: Your users will see stuff happen as they type.
CSS:
.normalFont { font-family: Arial; }
.alternateFont { font-family: Verdana; }
HTML:
<input ... class="normalFont" />
<input ... class="alternateFont" />
JavaScript (jQuery):
// When the DOM is ready, execute anonymous function
$(function ()
{
// store a reference for the input with the "alternateFont" class
var alternateFontInput = $("input.alternateFont")[0];
// execute anonymous function on key-up event on the input with
// the "normalFont" class
$("input.normalFont").keyup(function ()
{
// set the value of the input with the "alternateFont" class to
// the value of the input with the "normalFont" class (this)
alternateFontInput.value = this.value;
});
});