Develop Reference

How to close browser window with a dialog popup using jQuery function?

I am working on a project but need to know how to close the browser window and also show a dialog box if I would like to exit the page, using jQuery.
Thanks Rick, this helps, it brings up the dafault chrome pop up dialog, I am trying to customize it to use my dialog in my javascrip file so it can prompt it when the user closes the page.. here is my code function ConfirmationDialog(baseURI) {
var dialog = jQuery('Are you sure you want to exit this form without saving?').attr({
type: 'hidden',
id: 'dialog'
}).css("display", "none").appendTo('body');
jQuery("#dialog").dialog({
resizable: false,
height: 140,
modal: true,
title: 'Confirm',
buttons: {
"Yes": function () {
window.location = baseURI;
// jQuery(this).dialog("close");
},
Cancel: function () {
jQuery(this).dialog("close");
}
}
});
return false;
}

To close browser:
window.close();
To prompt user:
window.addEventListener("beforeunload", function (e) {
var message = "Are you sure you want to leave?";
(e || window.event).returnValue = message;
return message;
});

Get value of jquery ui dialog in code behind

I have a jquery ui dialog that has a radio button list on it. I need to call a server side method when the user clicks ok and I need to pass the selected value. I tried doing it by calling an ajax method on and passing the selected value as a parameter. This worked great (the value was passed) but I could not access a cookie from the method (got error - Request is not available in this context), which makes sense being that this is an ajax request. Here is the code:
$("#dialogReject").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Reject": function () {
var value = $(this).find('input:checked').val();
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "/myPage.aspx/RejectDocumentWM",
data: "{'rejectReason':'" + value + "'}",
dataType: "json",
success: function (data) {
alert('success');
},
error: function (result) { alert('error'); }
});
$(this).dialog('close');
},
Cancel: function () {
$(this).dialog("close");
}
}
});
RejectDocument():
[WebMethod]
public static void RejectDocumentWM(string rejectReason)
{
MyNamespace.myPage page = new MyNamespace.myPage();
page.RejectDocument(rejectReason);
}
protected void RejectDocument(string rejectReason)
{
batch batch = (batch)Session["Batch"];
if (client.RejectDocument(batch.GetCurrentDoc().icn, rejectReason, Request.Cookies["username"].Value)) //here is where I get the error
{
NextDocument();
}
}
I tried doing it by putting the value into a hidden field and then calling a button click which calls a server side method. My problem here was that the hidden field's value was always blank even though it set properly in the client script. Here is the code for that:
$("#dialogReject").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Reject": function () {
var value = $(this).find('input:checked').val();
$('[id$="hdfRejectReason"]').val(value); //this sets properly
$('[id$="btnRejectDoc"]').click();
$(this).dialog('close');
},
Cancel: function () {
$(this).dialog("close");
}
}
protected void btnRejectDoc_Click(object sender, EventArgs e)
{
batch batch = (batch)Session["Batch"];
if (client.RejectDocument(batch.GetCurrentDoc().icn, hdfRejectReason.Value, Request.Cookies["username"].Value))
//hdfRejectReason.Value is blank
{
NextDocument();
}
}
Any ideas for me? I am at my wits end.
Thanks!

First of All, is this hf is in 'popup' or in 'main page' section?
Second, in stackoverflow, we discused and set other (better?) way to set hidden field value in jQuery:
<div class="hfFoo-wrap">
<asp:HiddenField runat="server" ID="hfFoo" />
</div>
function FooBarFunction() {
var hfFoo = $('.hfFoo-wrap input[type=hidden]');
hfFoo.val('Bar');
var isBar = hfFoo.val();
}
Maybe in btnRejectDoc_Click have other 'null' or 'empty' params?
Third: I prefere FrameDialog with 'aspx' page and 'callback delegate'.
create popup as 'aspx' page
open popup from 'main page' by jQuery as jQuery.FrameDialog
close dialog from 'aspx-popup' as 'close popup' (jQuery.FrameDialog.closeDialog();)
on 'main page' catch callback delegate (with params from popup) and set hidden field there

localise a string in .js file

I just recently started in Asp.Net MVC and I am just clueless at the moment. So my task is to localise text in .js files. My problem is that I can't seem to display this dialog label in my browser, the text I want to replace is "Remove A to B". I have tried using my variable 'a' by going 'this.a' in the place of this text but it doesn't work.
function Remove() {
var a = "";
this.Load = function () {
...`enter code here`
});
this.InitEventHandlers = function () {
$("#updateRemove").click(function (e) {
amplify.publish("UpdateRemove");
e.preventDefault();
});
$("#removeA").click(function () {
$("#removeA").dialog({
title: "Remove A to B",
width: 300,
autoOpen: true,
modal: true,
draggable: false,
resizable: false,
dialogClass: "RemoveB",
open: function () { $(this).appendTo("RemoveC"); }
});
});
...

you need to store the reference of 'this' because in the object inside the remove function the context is the current object.
do this:
function Remove() {
var that = this;
that.a = "";
$("#removeA").click(function () {
$("#removeA").dialog({
title: that.a,
you can read a little bit more here: http://javascript.crockford.com/private.html

jQuery Dialog Only Shows First Time

Having a jQuery dialog issue. I want to leverage ajax to render calendar content in a dialog window when a person clicks the the calDayContentEntry div. The following code works on the first click, but after closing the dialog I can no longer get the dialog to show again for that entry. Other entries work the first time as well, but secondary clicks will not open the dialog again.
Here is relevant code that I am having the issue with (all within the same asp.net mvc 3 razor view). Does anyone have some tweaks that could fix this issue?
...
<div class="calDayContent">
#foreach (var content in day.Contents)
{
<div class="calDayContentEntry">
<input type="hidden" value="#content.Entry.Id" class="hiddenId" />
<div class="#content.DisplayClass">#content.Entry.Hours.ToString() hrs</div>
</div>
<div class="leaveRequestPopup"></div>
}
</div>
...
<script type="text/javascript">
$().ready(function () {
$('.calDayContentEntry').click(function () {
getAndShowDialogContents(this);
});
// Register close event for dialog if overlay is clicked
$('.ui-widget-overlay').live("click", function () {
//Close the dialog
$currentDialog.dialog("close");
});
});
function getAndShowDialogContents(entryDiv) {
var entryId = $(entryDiv).find('input[type="hidden"]').val();
var contentdiv = $(entryDiv).next('.leaveRequestPopup');
var x = $(entryDiv).position().left + jQuery(entryDiv).outerWidth();
var y = $(entryDiv).position().top - jQuery(document).scrollTop();
$.ajax(
{
type: 'POST',
url: 'Request/GetCalendarDetails',
data: { id: entryId },
success: function (result) {
$(contentdiv).html(result);
$(contentdiv).dialog({
autoOpen: false,
modal: true,
title: 'Details',
width: 400,
height: 300,
draggable: false
});
$(contentdiv).dialog("option", "position", [x, y]);
$currentDialog = $(contentdiv).dialog('open');
}
});
}
</script>

Is this a valid statement?
$currentDialog.dialog("close");
I think that at this point it is out of scope.
Maybe if you define it outside before the $().ready
var $currentDialog;
$().ready(function () {
...

You need to reset the dialog.
contentdiv.dialog("destroy").dialog(....
Note: if you do
var contentdiv = $(entryDiv).next('.leaveRequestPopup');
then contentdiv is already a jQuery object so you say something like:
contentdiv.click(function(){
//code here
});
You don't need to wrap it in $(contentdiv) again.
when you call this function:
getAndShowDialogContents(this);
It will pass as argument the raw document object, not a jQuery one, use:
getAndShowDialogContents($(this));
to pass the current jQuery object

I think the weekend added a fresh perspective on the issue. The code that works is below. Basically, instead of using a popup div for every entry, I just used one div at the end of my page. That div is reused for every dialog. I use the global variable so I can refer to it when someone clicks outside the dialog to close it. Hope this helps someone else out.
...
<div class="calDayContent">
#foreach (var content in day.Contents)
{
<div class="calDayContentEntry">
<input type="hidden" value="#content.Entry.Id" class="hiddenId" />
<div class="#content.DisplayClass">#content.Entry.Hours.ToString() hrs</div>
</div>
}
</div>
...
<div class="leaveRequestPopup"></div>
...
<script type="text/javascript">
$().ready(function () {
$('.calDayContentEntry').click(function () {
getAndShowDialogContents(this);
});
// Register close event for dialog if overlay is clicked
$('.ui-widget-overlay').live("click", function () {
//Close the dialog
$currentDialog.dialog("close");
});
$currentDialog = $('.leaveRequestPopup').dialog({
autoOpen: false,
modal: true,
title: 'Details',
width: 400,
height: 300,
draggable: false
});
});
function getAndShowDialogContents(entryDiv) {
var entryId = $(entryDiv).find('input[type="hidden"]').val();
var x = $(entryDiv).position().left + jQuery(entryDiv).outerWidth();
var y = $(entryDiv).position().top - jQuery(document).scrollTop();
$.ajax(
{
type: 'POST',
url: 'Request/GetCalendarDetails',
data: { id: entryId },
success: function (result) {
$currentDialog.html(result);
$currentDialog.dialog("option", "position", [x, y]);
$currentDialog.dialog('open');
}
});
}
</script>

Session expires after closing jquery dialog

In my web application I use jquery dialogs to open popups.
The function used to perform this task is this:
function OpenPopup(popupTarget, width, height, params, onOpenFunction, onCloseFunction, popupElement){
// some code to parse the parameters
//`popupElement` is a div with `style="display: none;"`
// included in a master page which every page inherits from
$(popupElement).dialog(
{
autoOpen: false,
resizable: false,
height: height,
width: width,
modal: true,
open: onOpenFunction,
closeOnEscape: false,
close: function (e)
{
var popupResult = $(this).dialog("option", "notification");
$(this).dialog("destroy");
if (!isHTMLElement)
popupFrame.css("visibility", "hidden");
if (jQuery.isFunction(onCloseFunction))
{
var funct = eval(onCloseFunction);
funct(popupResult);
}
}
});
$(popupElement).dialog("open");
}
This is the function that calls the above method:
function FiltroNotifiche(){
params = "";
OpenPopup("~/manage/Popup/FiltroNotifiche.aspx", 450, 350, params, function (e) { }, function (strNotification)
{
OnPopupReturn(true, strNotification, function ()
{
__doPostBack('UpdatePanel', 'Filtro=true');
});
});
}
function OnPopupReturn(bRefresh, strNotification, senderFunction){
// this function parses strNotification and if, successful, calls:
var funct = eval(senderFunction);
funct();
}
Inside the popup I use the ICallbackEventHandlercallback interface.
The problem is that after opening and closing the popup (I can see the callback being executed and all), whatever I do next I'm getting kicked out, most likely because the session has expired.
A strange thing that I noticed is that this happens only if I get to the page that opens the popup (GestioneNotifiche.aspx) via the menu control, because if I get to there through a button PostBackUrl in another page, this doesn't happen, and the session lives happily!
The menu has an xml data source and these bindings:
<DataBindings>
<asp:MenuItemBinding DataMember="Menu" TextField="Text" Selectable="false" />
<asp:MenuItemBinding DataMember="MenuItem" NavigateUrlField="NavigateUrl" TextField="Text" ValueField="Value" />
</DataBindings>
This is the menu item:
<MenuItem Value="" Text="Gestione notifiche" NavigateUrl="~/manage/GestioneNotifiche/GestioneNotifiche.aspx" />
I did notice the call through the menu has Request.HttpMethod = "GET", while via postback it is (rather obviously) "POST". Could this be the significant? I don't really know much about the difference between GET and POST.
Thank you

Sounds like your problem is that authentication is being cleared and not your session. Check your page_load event to see if you are doing anything differently between a GET and POST request that would result in clearing the authentication.