Updating a Text Box after the modalpopup closes.

Hi There

I'm attempting to create a function for users that allows them to browse their intranet site and save links within the intranet as a collection of 'my links'. To do this I'm using an iFrame embedded within the modalpopup extension. Everything is working with the exception of the final part (which is quite frustrating) - Basically I need to populate a textbox with the current location in the iFrame. I know that I'm ready the value correctly but the text box is just not updating. I've inserted the user control below - all you need to do is insert the control into a new page and then point the iframe at a starting page. Any help greatly appreciated as I could do with an answer to this issue as soon as possible.

<%@dotnet.itags.org. Control Language="C#" AutoEventWireup="true" CodeFile="test.ascx.cs" Inherits="includes_mylinks" %>
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<script type="text/javascript">
function onOk() {
var NewURLTextBox = parent.document.getElementById("<%= newurl.UniqueID %>");
var NavFrame = parent.frames(0);
NewURLTextBox.InnerText = NavFrame.location.href;
NewURLTextBox.InnerHTML = NavFrame.location.href;
NewURLTextBox.Value = NavFrame.location.href;
alert(NavFrame.location.href);
}
</script>
<asp:ScriptManager runat="Server" EnablePartialRendering="true" ID="ScriptManager" />
<h3>Add a new link</h3>
<table width="100%">
<tr>
<td style="width: 100px">Title:<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="newurldescription"
ErrorMessage="Please supply a Title" SetFocusOnError="True" ValidationGroup="NewURL">*</asp:RequiredFieldValidator>
</td>
<td><asp:TextBox runat="server" Text ="" ID="newurldescription" /></td>
</tr>
<tr>
<td>Address:<asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server" ControlToValidate="newurl"
ErrorMessage="Please specify the URL you wish to save" SetFocusOnError="True" ValidationGroup="NewURL">*</asp:RequiredFieldValidator>
</td>
<td><asp:TextBox runat="server" ID="newurl" EnableViewState="false" /> <asp:LinkButton ID="cmdBrowse"
runat="server">[Browse]</asp:LinkButton></td>
</tr>
<tr>
<td>Position:<asp:RangeValidator ID="RangeValidator1" runat="server" ControlToValidate="newurlposition"
ErrorMessage="Please enter a value between 1 and 9" MaximumValue="9" MinimumValue="1"
SetFocusOnError="True" Type="Integer" ValidationGroup="NewURL">*</asp:RangeValidator>
</td>
<td><asp:TextBox runat="server" Text ="" ID="newurlposition" MaxLength="1" Width="15px" /></td>
</tr>
</table>
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
<asp:Panel ID="BrowsePanel" runat="server">
<asp:Panel ID="Panel3" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black">
<div>
<p>Navigate to the Page that you would like to add to My Links:</p>
</div>
</asp:Panel>
<iframe id="BrowseIntranet" runat="server" src="http://pics.10026.com/?src=default.aspx" height="450px" width="850px" ></iframe>
<p style="text-align: center;">
<asp:Button ID="OkButton" runat="server" Text="Select" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
</p>
</asp:Panel>
<cc1:ModalPopupExtender ID="ModalPopupExtender" runat="server"
TargetControlID="cmdBrowse"
PopupControlID="BrowsePanel"
BackgroundCssClass="modalBackground"
OkControlID="OkButton"
OnOkScript="onOk()"
CancelControlID="CancelButton"
DropShadow="false"
PopupDragHandleControlID="Panel3" />

Hi,

I was searching for somethig, but came across your post. I read an artcle to update the server control on postback. the url ishttp://www.aspdotnetcodes.com/ModalPopup_Postback.aspx . in this article they make use of label control, please try it with your TextBox.. and let me know if if helps you.

Thanks

Use Atlas profile service to persist layout between sessions

This sample use Atlas profile service to persist the position of a drag and drop panel between browse sessions.

Send me a private message if you like to have a zip file includes everything for this sample.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<atlas:ScriptManager runat="server" ID="ScriptManager1">
<Scripts>
<atlas:ScriptReference ScriptName="AtlasUIDragDrop" />
</Scripts>
</atlas:ScriptManager>
</head>
<body>
<form id="form1" runat="server">
<span id="msg"></span>
<table cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="200px" height="400px"> </td>
<td>
<div id="imagePanel" style="background-color:Navy;padding:1px">
<div id="dragHandler" style="background-color:Navy;width:100%;"></div>
<img src="http://pics.10026.com/?src=http://www.google.com/intl/en/images/logo.gif" />
</div>
</td>
</tr>
</table>
</form>

<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<components>
<control id="imagePanel">
<behaviors>
<floatingBehavior handle="dragHandler" move="OnMove" />
</behaviors>
</control>
</components>
</page>
</script>

<script type="text/javascript">
function pageLoad()
{
Sys.Profile.set_autoSave(false);
Sys.Profile.loaded.add(onProfileLoadComplete);
Sys.Profile.saved.add(onProfileSaveComplete);
Sys.Profile.load();
}

function onProfileLoadComplete()
{
var objStyle = $object('imagePanel').element.style
objStyle.posTop = Sys.Profile.properties.poxTop;
objStyle.posLeft = Sys.Profile.properties.poxLeft;
}

function onProfileSaveComplete()
{
//alert('profile saved.');
}

function OnMove(sender, cancelArgs)
{
var ele = sender.control.element
Sys.Profile.properties.poxTop = ele.offsetTop;
Sys.Profile.properties.poxLeft = ele.offsetLeft;
Sys.Profile.save();
}
</script>
</body>
</html>

Your web.config must include something similar to the following. also you need a database to host the asp.net AppService.

<configSections>
<sectionGroup name="microsoft.web" type="Microsoft.Web.Configuration.MicrosoftWebSectionGroup">
<section name="profileService" type="Microsoft.Web.Configuration.ProfileServiceSection" requirePermission="false"/>
</sectionGroup>
</configSections>

<microsoft.web>
<profileService enabled="true"
setProperties="poxTop;poxLeft"
getProperties="poxTop;poxLeft">
</profileService>
</microsoft.web>

<connectionStrings>
<remove name="LocalSqlServer" />
<add name="LocalSqlServer" connectionString="Data Source=.\SQLExpress;Integrated Security=True;User Instance=True;AttachDBFilename=|DataDirectory|aspnetdb.mdf" />
</connectionStrings>

<system.web>
<anonymousIdentification enabled="true" />
<profile>
<properties>
<add name="poxTop" type="integer"/>
<add name="poxLeft" type="integer"/>
</properties>
</profile>
</system.web>

I'm getting javascript errors trying to use this.

Sys.Profile.loaded.add(onProfileLoadComplete);
Sys.Profile.saved.add(onProfileSaveComplete);

should be

Sys.Profile.loaded.add(onProfileLoadComplete());
Sys.Profile.saved.add(onProfileSaveComplete());

then

Sys.Profile.properties.poxTop is null or not an object.

oh...

Sys.Profile.loaded.add(onProfileLoadComplete);
Sys.Profile.saved.add(onProfileSaveComplete);

is correct. this is demo, ignore the javascript error and the second try will let you go i think.

Great Example, thanks!

2 things:

1. I changed the example slighlty to display the Profile-Save-Event Time to the StatusBar with this
Script:

window.status = Date();

Does work well, but the Date is formatted this strange way:

Fri, May 19 09:26:32 2006

So the time is in the middle of the date-part !?

2. Does anybody have the same example but working more with the Server-Side Atlas-Framework?

Thanks

please send me zip file includes everything for this sample

Hi Xiyuan Shen

Can you send me the zip file so that I can implement this...I have been partially sucessfull. It seems as though I am missing a step though.

Justin

Did you actually get this working?

I have the example loaded and it seem to initially work, however, the drag N drop page moves once the page is completely loaded, to the top left of the screen. Any ideas why?

Hi there

Here is my code. He will do the job.

You get the error "Sys.Profile... length is null" if your database, which is responsible to save and where you get the position-values, is not running or not accessible.

Good luck.

Patrick

Web.Config

<?xmlversion="1.0"?>

<configuration>

<configSections>

<sectionGroupname="microsoft.web"type="Microsoft.Web.Configuration.MicrosoftWebSectionGroup">

<sectionname="webServices"type="Microsoft.Web.Configuration.WebServicesSection"requirePermission="false"/>

<sectionname="profileService"type="Microsoft.Web.Configuration.ProfileServiceSection"requirePermission="false"/>

</sectionGroup>

</configSections>

<microsoft.web>

<!-- Enable WebServices because Profile-Service ASP.NET is accessible thru WS-->

<webServicesenableBrowserAccess="true"/>

<profileService

enabled="true"

setProperties="poxTop;poxLeft;FloatingLabelLocation"

getProperties="poxTop;poxLeft;FloatingLabelLocation">

</profileService>

</microsoft.web>

<system.web>

<authenticationmode="Windows"/>

<anonymousIdentificationenabled="true"/>

<profileenabled="true">

<properties>

<addallowAnonymous="true"name="FloatingLabelLocation"/>

<addname="poxTop"type="integer"/>

<addname="poxLeft"type="integer"/>

</properties>

</profile>

<pages>

<controls>

<addnamespace="Microsoft.Web.UI"assembly="Microsoft.Web.Atlas"tagPrefix="atlas"/>

<addnamespace="Microsoft.Web.UI.Controls"assembly="Microsoft.Web.Atlas"tagPrefix="atlas"/>

</controls>

</pages>

<compilationdebug="true" />

<httpHandlers>

<removeverb="*"path="*.asmx"/>

<!-- ASMX is mapped to a new handler so that proxy javascripts can also be served.-->

<!-- Otherwise, you get the following error-->

<!-- The HTTP verb POST used to access path '/ProfileWithAtlas/ScriptServices/Microsoft/Web/Services/Standard/ProfileWebService.asmx' is not allowed.-->

<addverb="*"path="*.asmx"type="Microsoft.Web.Services.ScriptHandlerFactory"validate="false"/>

</httpHandlers>

</system.web>

</configuration>

------------

<%@.PageLanguage="C#"AutoEventWireup="true" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>Atlas Profiling</title>

</head>

<body>

<formid="form1"runat="server">

<atlas:ScriptManagerrunat="server"ID="ScriptManager1">

<Scripts>

<atlas:ScriptReferenceScriptName="AtlasUIDragDrop"/>

</Scripts>

</atlas:ScriptManager>

<spanid="msg"></span>

<tablecellpadding="0"cellspacing="0"border="0">

<tr>

<!-- This fixed Size is important. Without it, your d&d will not snapp-in -->

<tdstyle="width:200px;height:600px"></td>

<td>

<divid="imagePanel">

<imgid="dragHandler"src="smile.gif"alt="Smile!"/>

</div>

</td>

</tr>

</table>

<scripttype="text/xml-script">

<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">

<components>

<control id="imagePanel">

<behaviors>

<floatingBehavior handle="dragHandler" move="OnMove" />

</behaviors>

</control>

</components>

</page>

</script>

<scripttype="text/javascript">

function pageLoad()

{

Sys.Profile.set_autoSave(false);

Sys.Profile.loaded.add(onProfileLoadComplete);

Sys.Profile.saved.add(onProfileSaveComplete);

Sys.Profile.load();

}

function onProfileLoadComplete()

{

var objStyle = $object('imagePanel').element.style;

if (Sys.Profile.properties.poxTop !=null)

objStyle.posTop = Sys.Profile.properties.poxTop;

if (Sys.Profile.properties.poxLeft !=null)

objStyle.posLeft = Sys.Profile.properties.poxLeft;

}

function onProfileSaveComplete()

{

window.status ="Profile saved: " + Date();

}

function OnMove(sender, cancelArgs)

{

var ele = sender.control.element;

Sys.Profile.properties.poxTop = ele.offsetTop;

Sys.Profile.properties.poxLeft = ele.offsetLeft;

Sys.Profile.save();

}

</script>

</form>

</body>

</html>