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

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>

Hide div tag on page load

I have some div's in my project which has some animation on mouse-over done using java-script.
Now my problem is on page load i need to hide all the div's and display only title of the div,and on mouse-over of this title i should be able to make the div visible with all the animation done.
Below is my code:
<div id='Qhse' class="item user">
<h2>qhse</h2>
<div id='qhse' class="qhse" runat="server" >
</div>
</div>
<div id='Policies' class="item home">
<h2>policies</h2>
<div id='policies' class="policies" runat="server" >
</div>
</div>
CSS
#qhse{
padding-top: 0.3em;
padding-bottom:0.3em;
background-color: #2C6D2C;
width: 100%;
height: 100%;
text-align: center;
vertical-align:middle;
}
#policies{
padding-top: 0.3em;
padding-bottom:0.3em;
background-color: #2C6D2C;
width: 100%;
height: 100%;
text-align: center;
vertical-align:middle;
}
JS
$(function () {
$('#nav > div').hover(function () {
visibility: visible;
var field = $('#<%= hdnSelected.ClientID %>');
field.val(this.id);
var $this = $(this);
$this.find('div').stop().animate({
'width': '100%',
'height': '100%',
'top': '-25px',
'left': '-25px',
'opacity': '1.0'
}, 500, 'easeOutBack', function () {
$(this).parent().find('ul').fadeIn(700);
});
$this.find('a:first,h2').addClass('active');
},
function () {
var $this = $(this);
$this.find('ul').fadeOut(500);
$this.find('div').stop().animate({
'width': '52px',
'height': '52px',
'top': '0px',
'left': '0px',
'opacity': '0.1',
'visible': 'false'
}, 5000, 'easeOutBack');
$this.find('a:first,h2').removeClass('active');
});
});

Here is a Working Fiddle.
Added this to Document Ready.
$('#policies,#qhse').hide();
And following minor errors fixed.
visibility: visible;
'visible': 'false'
Still not able to figure out where <ul> tags are. Hide,Hover works fine.

First, a bunch of remarks:
There is no #nav in your HTML.
visibility: visible; inside a function is not a valid JavaScript.
'#<%= hdnSelected.ClientID %>' looks like you're generating your JavaScript using a server-side language. If you do, don't do it. If you don't (i.e. if it's some client-side template engine I've never seen before), make sure this line is doing what you expect it to do.
Make sure $this variable is declared.
What have you tried?
You already have your animation. What you want to do next is to show and hide elements. A simple Google search leads you to the jQuery function show(); similarly, there is a hide() function.
How can you apply those two functions to your actual code?

define the border of ui-widget-content in the jquery modal dialoge

I have two modals on one page. The border for the first is defined in the jquery.ui.theme.css file in the .ui-widget-content class.
Is there a way to append a style attribute and overwrite the one defined by the css file?
I want the second modal to have a different color border.
Here is my div:
<div id="dialog-modal" title="Discharge Warning">
<p>Are you sure you want to discharge this Patient</p>
</div>
Here is the jQuery for my second modal:
$('#dialog-modal').dialog(
{
modal: true,
autoOpen: false,
resizable: false,
draggable:false,
show:
{
effect:"blind",
duration:500
},
buttons:
{
'discharge':
{
text: 'Discharge Patient',
click: function () { $('#DischargeReferralForm').submit(); },
class: 'btn purple',
style: 'font-family: "Segoe UI", Helvetica, Arial, sans-serif'
}
},
});
$('.ui-dialog-buttonpane')
.find('button:contains("Discharge")')
.prepend('<i class="icon-ok"></i>');
$('#DischargeMgs').click(function () { $("#dialog-modal").dialog("open"); });
FYI: The page inspect trace's the color back to the ui-widget-content class.

I took a closer look at jQuery UI Dialog individual CSS styling and added to my css file:
.ui-dialog-content1
{
border-color:#6d1b81 !important;
}
and to my jquery file:
dialogClass: 'ui-dialog-content1'

How to add an image to a dialog form with jQuery

I am working on MVC application and on one of my pages I have an image gallery. I want to do the following: when I click on any given image to open a modal dialog and display the image (the reason for that is because I don't have much space on my page).
Javascript code:
function openDialog(url)
{
$("#dialog-form").dialog("open");
document.getElementById("dialog-form").style ="display: block;"
document.getElementById("modalImg").src = url;
}
$( "#dialog-form" ).dialog({
autoOpen: false,
height: 800,
width: 850,
modal: true,
buttons: {
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
allFields.val( "" ).removeClass( "ui-state-error" );
}
});
Razer View:
<div style="height: auto; width: 100%;">
#foreach (var photo in Model.Application.Screenshots.Where(p => p.Device == 1))
{
<div style="float: left; width: 250px;">
<img alt='Patka' src='#Url.Content(photo.Url)' width='250' onclick="openDialog('#Url.Content(photo.Url)')"/>
</div>
}
<div id="dialog-form" title="Screenshot Preview" style="display: none;">
<img alt='ModalPatka' id="modalImg" src=".."/>
</div>
<div style="clear: both;"></div>
</div>
However when I click on any image nothing happens. Any idea why?

Are you getting any javascript errors in your console (Firebug for Firefox or the Chrome debug console)? I am not sure of the exact problem, but I can say that you should probably clean up your javascript and use the full power of jQuery selectors, this might help solve your issue.
Here are the changes that I would recommend:
Place a class on your preview images so that we can attach a jQuery handler to the click of that element.
I am not sure if .src is a valid jQuery selector on an element. Try using the .attr() designator
Let's remove the GetElementById calls in your JavaScript and use the jQuery selectors
I think the dialog call needs to be in your .Ready jQuery function. See the examples here
Update your DOM elements before calling the .Dialog function to prevent screen flashing.
Remove the spaces in your jQuery selectors, I dont think this is causing an issue, but it would not hurt to clean those up as well (e.g. (this) instead of ( this ))..even though the jQuery UI examples have them, maybe this is just a coding style concern.
JavaScript Code
$(function(){
$(".OpenDialog").on("click", function(){
$("#dialog-form").style ="display: block;";
$("#modalImg").attr("src", $(this).attr("src"));
$("#dialog-form").dialog({
autoOpen: false,
height: 800,
width: 850,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog("close");
}
},
close: function() {
allFields.val("").removeClass("ui-state-error");
}
});
});
});
Razor View
<div style="height: auto; width: 100%;">
#foreach (var photo in Model.Application.Screenshots.Where(p => p.Device == 1))
{
<div style="float: left; width: 250px;">
<img alt='Patka' src='#Url.Content(photo.Url)' width='250' class="OpenDialog"/>
</div>
}
<div id="dialog-form" title="Screenshot Preview" style="display: none;">
<img alt='ModalPatka' id="modalImg" src=".."/>
</div>
<div style="clear: both;"></div>
</div>