I work with an Asp.net and C#. When I click on a button to show the message I get one popup box, but when I click close button on popup box it’s not closing the popup.
aspx page syntax:
<div id='dialog-page' title="Modal">
</div>
<asp:LinkButton ID="lbtnModal" runat="server" Text="View" OnClientClick="javascript:return showDialog(this.name);"></asp:LinkButton>
jQuery code:
function showDialog(uniqueName) {
var url = "ReportGenerationSingleACView.aspx?id=";
var temp=document.getElementById('<% =txtCustomerID.ClientID%>').value;
url=url+temp;
$("#dialog-page").load(url).dialog({
title: "AC View Details",
autoOpen: false,
resizable: true,
height: 400,
width: 600,
modal: true,
buttons:
{
Close: function() {$(this).dialog("close");}
}
});
$('#dialog-page').dialog('open');
return false;
}
Here is some more information about the popup work but those not work for me:
Stack Overflow question: jQuery Pop up not working
Why is it not working for me? How to handle or what am I missing? Help me solve this issue.
If have any questions, please ask - thank you in advance, any type of suggestion will be acceptable.
Note: Popup X icon works properly and close button also fired but popup not close
Be sure that {$(this).dialog("close");} targets on the dialog. So you try to close the dialog in your dialog and there are none.
Try out {$(parent).dialog("close");} instead or pass the function to the parent page.
Related
Hi it is very simple question, but I didn't find the answer fit in my situation.
In my jQuery dialog I have buttons which is update and close. User click 'update button' then on code behind I need to update in database then close.
when user click the close button then I close the dialog. the dialog is load aspx page. I have two problems.
The problem is if user click close button which run javascript window.close(). It will pop up the windows "Do you want to close window...."
How can I refresh the parent page and close the dialog by clicking the 'update' button.
there is the code to load the dialog:
function openDialog(url, name, width, height) {
$("#dialog-box").load(url).dialog({
autoOpen: false,
resizable: true,
height: 425,
width: 600,
modal: true
});
$('#dialog-box').dialog('open');
return false;
}
I tried to use $("#dialog-box").dialog("close"); in my function which is called in code behind. but it show the error.
there is my function
function RefreshParentAndClose() {
$("#dialog-box").dialog("close");
}
there is the code I load the dialog on parent page
<div id="dialog-box" title=" "></div>
<td width="33%" align="right"><asp:button id="btnSelect" runat="server" causesvalidation="False" text="Select Locations"
OnClientClick="javascript:return openDialog('popLocation.aspx','select',600,500);" /></td>
Use below code for close
$("#dialog-box").dialog( "close" );
and to refrsh on close use
$("#dialog-box").dialog({
close: function( event, ui ) {
window.location.reload();
}
});
1) You could close the dialog by invoking its close() method:
function OnCloseClick() {
$("#dialog-box").dialog("close");
}
2) You just need to refresh the main page. On the subsequent load the dialog should not be opened (in case you do not load it automatically). More information about the method's parameter used below could be read from this answer on StackOverflow.
function OnUpdateClick() {
window.opener.location.reload(false);
}
I'm having a big problem using using Jquery dialog. The dialog is displayed when the user clicks on a link. The first time the form is opened, it works fine; the form is submitted to the server,
and the part of the page is updated.However, subsequent attempts to use the form are where the problems start. When i click on the hyperlink for the second time,
(with closing dialog or without closing dialog), it is showing the old values. This happens even if I navigate to a different screen in the application and then return.
The content of the page which is re-rendered after each submission includes the form which makes up the dialog,
so the 'old' values which are being submitted no longer even exist in the page markup.
They are being somehow 'remembered' by JQuery UI.
$(document).on("click", "#hyperLink", function () {
$("#divSection").dialog({
title: "User Details",
resizable: false,
autoOpen: false,
height: 'auto',
width: 300,
appendTo: "form"
});
});
I don't know how to work around this behaviour, can anyone please help me how to resolve this?
I'm trying to make a ajax call for the partialview of my webpage, then pull title and data from it before putting it in a Dialog window. However when I create the dialog, it opens once correctly and 6 more times as an empty Dialog - just the title bar.
In chrome I can see the partialView contains the HTMLDivElement, and 7 HTMLScriptElements so that accounts for the multiple opens - however if I open the Dialog for just that div element it will not load the scripts (and thus lookups and tabs do not work).
$.ajax(url)
.success(function (partialViewHtml) {
// get page data
$(partialViewHtml).dialog({
title: title,
modal: true,
resizable: true,
draggable: true,
height: sheight,
width: swidth
});
Any help would be greatly appreciated. I've been banging my head on a wall for a while. Thanks.
As you seem to have understood, this is normal because of the 7 elements in the jQuery collection on which you open the dialog.
You should add the script elements separately to the page, using for example
$('body').append(scriptElementHTML);
And then open your dialog on just the div :
$(divHtml).dialog({
Not sure whthere jQuery ui has a method to close all dialogs, but we can do it like this
function createDailog () {
$(".ui-dialog-content").dialog("close"); // close all dialogs
$("<div>fdfdsfdsfdsfds<div>").dialog({
title: "title",
modal: true,
resizable: true,
draggable: true,
height: 200,
width: 200
});
}
or you can put a condition like this
if(!$(".ui-dialog-content:visible").length){
// show dialog
}
My goal is to display a non-modal jquery-ui dialog box that will display a please wait message along with a loading animation. This dialog box would display on the page the user is coming from, not proceeding too. I largely have this working already with the code below. However, Safari will not display the the please wait dialog. Firefox and Chrome display dialog and following href. Safari just follows the href, but won't display the dialog.
If I try a preventDefault(); or a return false; in the click event handler, then safari (and all browsers) will display the please wait dialog, but of course it will not follow the href. So I do want the default behavior of going to the clicked href, just while going to the href, I want the dialog to display.
I have even tried to do a click handler and inside do a preventDefault(), then open the dialog and then set window.location or location.href, but still Safari will just follow the href and not display the dialog.
Does anyone have any other ideas?
javascript:
$(document).ready(function() {
// Register the pleaseWaitDialog element as a jquery-ui dialog widget with certain options set
$("#pleaseWaitDialog").dialog({
autoOpen: false,
buttons: {},
open: function(event, ui) { $(".ui-dialog-title, .ui-dialog-titlebar-close").hide(); }, // hide the dialog title bar
resizable: false,
show: {effect: 'fade', duration: 500},
height: 120,
width: 300
});
// When a link to add a meeting is clicked, then display the please wait dialog
$("a.addMeetingLink").click(function(e) {
// But wait 5 seceonds before displaying the please wait dialog
setTimeout(function () {
$("#pleaseWaitDialog").dialog("open");
}, 5000);
});
});
HTML:
Add Meeting
<div id="pleaseWaitDialog">
<div>
<p>Please wait</p>
<img src="/ripplemobile/images/ajax-loader.gif" />
</div>
</div>
A quick point, edit this function:
// When a link to add a meeting is clicked, then display the please wait dialog
$("a.addMeetingLink").click(function(e) {
// ADD
e.preventDefault();
// But wait 5 seceonds before displaying the please wait dialog
setTimeout(function () {
$("#pleaseWaitDialog").dialog("open");
}, 5000);
});
This should solve your current issue.
How do I create a jQuery popup window without close button?
Please see my code below.
$('#addNewRecord').dialog(
{
autoOpen: true,
width: 570,
bgiframe: true,
resizable: false,
height:490,
modal: true
}
);
Could anyone please help me ?
Please refer How to remove close button on the jQuery UI dialog?
Or how about Best way to remove the close button on jQuery UI dialog box widget?
You are using jQuery dialog, so simply add the below code
jQuery('.ui-dialog-titlebar-close').hide(); or
$('.ui-dialog-titlebar-close').hide();
within the jQuery(document).ready();