Jason Gajewski
Top achievements
Rank 1
Jason Gajewski
asked on 05 May 2011, 07:36 PM
I have added JavaScript to my pages that will detect if the user has made a change to a field and prompts the user to save those changes when they perform an action that will take them away from the page.
To do this, I'm performing 2 basic steps:
This has been working for all pages in my project, until I began using the RadTreeView. When I make a change on a page that has a RadTreeView, and then click on a Node that takes the user to a new page, they are prompted. If the user clicks "Cancel", the following error is thrown:
"htmlfile: Unspecified Error"
I have created a basic example that utilizes the following:
Any help would be greatly appreciated!
To do this, I'm performing 2 basic steps:
- On the input keyup event, I'm setting a "dirty" variable to "true"
- On the document.ready event, I'm prompting the user to "save changes" (if dirty = true) on the window.onbeforeunload event.
This has been working for all pages in my project, until I began using the RadTreeView. When I make a change on a page that has a RadTreeView, and then click on a Node that takes the user to a new page, they are prompted. If the user clicks "Cancel", the following error is thrown:
"htmlfile: Unspecified Error"
I have created a basic example that utilizes the following:
- Visual Studio 2010
- Telerik.Web.UI version 2010.1.519.40
Any help would be greatly appreciated!
5 Answers, 1 is accepted
0
Hello Jason Gajewski,
Could you, please, post an example so we can reproduce that?
Thanks!
Regards,
Nikolay Tsenkov
the Telerik team
Could you, please, post an example so we can reproduce that?
Thanks!
Regards,
Nikolay Tsenkov
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Jason Gajewski
Top achievements
Rank 1
answered on 09 May 2011, 02:18 PM
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
<
telerik:RadStyleSheetManager
ID
=
"RadStyleSheetManager1"
runat
=
"server"
/>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
ID
=
"RadScriptManager1"
runat
=
"server"
>
<
Scripts
>
<%--Needed for JavaScript IntelliSense in VS2010--%>
<%--For VS2008 replace RadScriptManager with ScriptManager--%>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.Core.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQuery.js"
/>
<
asp:ScriptReference
Assembly
=
"Telerik.Web.UI"
Name
=
"Telerik.Web.UI.Common.jQueryInclude.js"
/>
</
Scripts
>
</
telerik:RadScriptManager
>
<
script
type
=
"text/javascript"
>
// Default to False
isDirty = false;
ignoreChanges = false;
inputType = null;
inputId = null;
postBackOverride = false;
enableDebugging = false;
skipOne = false;
wasDirty = false;
function bindInputEvents() {
$(':input').keyup(function (event) {
oninputType = $(this).attr('type');
inputId = $(this).attr('id')
if (inputType != "hidden") {
debugAlert(inputType + " input changed. Id=" + inputId + " IsDirty=" + isDirty + " ignoreChanges=" + ignoreChanges);
makeDirty();
}
debugAlert(inputType + " Input Updated. Id=" + inputId);
});
}
// Bind change
$(document).ready(function () {
bindInputEvents()
// Show prompt when trying to nvaigate away if there are changes
window.onbeforeunload = function () {
if (!skipOne) {
if (isDirty) {
return 'You have unsaved changes. You will lose your changes if you leave the page.';
}
}
else {
isDirty = wasDirty;
skipOne = false;
}
};
});
function makeDirty() {
isDirty = true;
debugAlert("MakeDirty called. isDirty=" + isDirty);
}
function debugAlert(msg) {
if (enableDebugging == false) {
return true
} else {
alert(msg);
}
}
</
script
>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
/>
<
telerik:RadSkinManager
ID
=
"RadSkinManager1"
runat
=
"server"
Skin
=
"Windows7"
/>
<
h3
>
First, enter some text below to cause the page to get "Dirty"</
h3
>
<
div
>
Enter Text to cause Dirty:
<
asp:TextBox
ID
=
"TextBox1"
runat
=
"server"
></
asp:TextBox
></
div
>
<
br
/>
<
h3
>
Now that the page is dirty, click on the button below to be prompted to "Save"</
h3
>
<
div
>
<
asp:Button
runat
=
"server"
Text
=
"Click Me when Dirty"
onclick
=
"Unnamed1_Click"
/>
</
div
>
<
br
/>
<
h3
>
Notice how you were prompted and when you click either "Cancel" or the "X", no error
is generated.</
h3
>
<
h3
>
Now, click anywhere in the tree. The tree has an OnClick event that will attempt
to navigate to Yahoo.com</
h3
>
<
div
>
<
telerik:RadTreeView
ID
=
"RadTreeView2"
runat
=
"server"
Width
=
"300px"
Height
=
"250px"
OnNodeClick
=
"RadTreeView2_NodeClick"
>
<
DataBindings
>
<
telerik:RadTreeNodeBinding
Expanded
=
"True"
/>
</
DataBindings
>
</
telerik:RadTreeView
>
</
div
>
<
h3
>Notice how you were prompted and when you click either "Cancel" or the "X", an error
is generated.</
h3
>
</
form
>
</
body
>
</
html
>
0
Jason Gajewski
Top achievements
Rank 1
answered on 09 May 2011, 02:20 PM
using
System;
using
System.Collections.Generic;
using
System.Web.UI;
using
Telerik.Web.UI;
public
partial
class
Default : System.Web.UI.Page
{
internal
class
SiteDataItem
{
private
string
_text;
private
int
_id;
private
int
_parentId;
public
string
Text
{
get
{
return
_text; }
set
{ _text = value; }
}
public
int
ID
{
get
{
return
_id; }
set
{ _id = value; }
}
public
int
ParentID
{
get
{
return
_parentId; }
set
{ _parentId = value; }
}
public
SiteDataItem(
int
id,
int
parentId,
string
text)
{
_id = id;
_parentId = parentId;
_text = text;
}
}
protected
void
Page_Load(
object
sender, EventArgs e)
{
if
(!Page.IsPostBack)
{
BindToIEnumerable(RadTreeView2);
}
}
private
static
void
BindToIEnumerable(RadTreeView treeView)
{
List<SiteDataItem> siteData =
new
List<SiteDataItem>();
siteData.Add(
new
SiteDataItem(1, 0,
"Products"
));
siteData.Add(
new
SiteDataItem(2, 1,
"RadControls for ASP.NET Ajax"
));
siteData.Add(
new
SiteDataItem(3, 1,
"RadControls for Silverlight"
));
siteData.Add(
new
SiteDataItem(4, 2,
"RadGrid"
));
siteData.Add(
new
SiteDataItem(5, 2,
"RadScheduler"
));
siteData.Add(
new
SiteDataItem(6, 2,
"RadEditor"
));
siteData.Add(
new
SiteDataItem(7, 3,
"RadGrid"
));
siteData.Add(
new
SiteDataItem(8, 3,
"RadMenu"
));
siteData.Add(
new
SiteDataItem(9, 3,
"RadEditor"
));
treeView.DataTextField =
"Text"
;
treeView.DataFieldID =
"ID"
;
treeView.DataFieldParentID =
"ParentID"
;
treeView.DataSource = siteData;
treeView.DataBind();
}
protected
void
RadTreeView2_NodeClick(
object
sender, RadTreeNodeEventArgs e)
{
Response.Redirect(
"http://www.yahoo.com"
);
}
protected
void
Unnamed1_Click(
object
sender, EventArgs e)
{
Response.Redirect(
"http://www.yahoo.com"
);
}
}
0
Hello Jason,
I couldn't reproduce the problem you experience. I have tested this in Firefox 4 and IE 8.
I have tried the specified version of Telerik.Web.UI and the current latest.
Regards,
Nikolay Tsenkov
the Telerik team
I couldn't reproduce the problem you experience. I have tested this in Firefox 4 and IE 8.
I have tried the specified version of Telerik.Web.UI and the current latest.
Regards,
Nikolay Tsenkov
the Telerik team
Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
0
Jason Gajewski
Top achievements
Rank 1
answered on 13 May 2011, 04:34 PM
I have attached my project to Support Ticket #423735