Linebreak appears after update panel submits

I wrote a control that would allow a user to click on a label, and then edit it the value, and send back the new value to the server via an update panel.

However, the first time the value is sent to the server, a line break appears right above the text box, i dont think this is a css error, i can't seem to figure out what is causing it by examining the DOM. This only appears in IE, not Firefox, Any ideas?

Here's the mark up for the Control

<%@dotnet.itags.org. Control Language="VB" AutoEventWireup="false" CodeFile="QuickEditLabel.ascx.vb" Inherits="QuickEditLabel" %><script type="text/javascript"> function<%=Me.hidCurrentFileId.ClientID%>updateNumber(param) { var hiddenField = document.getElementById("<%=hidCurrentFileId.ClientID%>"); hiddenField.value = param; __doPostBack('<%=hidCurrentFileId.ClientID%>',''); } function QuickEditSwap(hideMe, showMe) { showMe.style.display = 'none'; hideMe.style.display = 'inline'; }</script><asp:HiddenField ID="hidCurrentFileId" runat="server" Value="" /><asp:UpdatePanel ID="updPanel" UpdateMode="Conditional" runat="server"> <Triggers> <asp:AsyncPostBackTrigger ControlID="hidCurrentFileId" EventName="ValueChanged" /> </Triggers> <ContentTemplate>   <asp:Label ID="Label1" runat="server" CssClass="QuickEditText" ToolTip="Click to Edit"></asp:Label> <asp:TextBox ID="TextBox1" runat="server" CssClass="QuickEditTextBox" Width="93px"></asp:TextBox> </ContentTemplate></asp:UpdatePanel>

Here's the Code behind for the control

PartialClass QuickEditLabelInherits System.Web.UI.UserControlPrivate myTextAs String Public Property Text()Get Return myTextEnd Get Set(ByVal value) myText = valueEnd Set End Property Protected Sub Page_Load(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Me.LoadIf Not IsPostBackThen Me.Text ="33"Else Me.Text =Me.TextBox1.TextEnd If Me.TextBox1.Attributes.Add("onchange",Me.hidCurrentFileId.ClientID +"updateNumber(getElementById('" + Me.TextBox1.ClientID + "').value)") Me.Label1.Attributes.Add("onclick", "QuickEditSwap(getElementById('" + Me.TextBox1.ClientID + "'), getElementById('" + Me.Label1.ClientID + "'))")End Sub Protected Sub Page_PreRender(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles Me.PreRenderMe.Label1.Text =Me.TextMe.TextBox1.Text =Me.TextEnd SubEnd Class

Here's the css i'm using for the control

 .QuickEditText {font-family: Verdana;} .QuickEditText:hover {text-decoration: underline; font-family: Verdana; cursor: pointer} .QuickEditTextBox {display: none; font-family:Verdana;}

Thanks in advance for any suggestions,

This is happening because of the default setting of the UpdatePanel's RenderMode property - which will render its contents into a <div> the first time. Try changing it to "Inline" so that it will instead render a <span> element.

Linking two DropDowns via Atlas?

I have looked at the Atlas controls (January 2006 Release)

What i would like to know is, say i make a dropdown, place it in a
update panel, then link it all up to some datasource, add a trigger to
the page to populate the dropdown, e.g. a button (i get this going
np.)

Now what i would like to do is add a second dropdown and have it
update when i make a selection from the first dropdown, this i can not
get to work.

In the Atlas controls smart tag to add the triggers i only get to see
controls on the page which are not located within a updatepanel,

So i tried to just write then trigger manually, this produced no
visible error on the page, but the second dropdown is not populating
either?

Is this along the lines you are looking to do?

<atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />

<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional" >
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" AutoPostBack="True">
<asp:ListItem Text="foo" Value="foo" />
<asp:ListItem Text="bar" Value="bar" />
</asp:DropDownList>
</ContentTemplate>
</atlas:UpdatePanel>
<hr />
<atlas:UpdatePanel runat="server" ID="Computer" Mode="Conditional">
<Triggers>
<atlas:ControlEventTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:DropDownList ID="DropDownList2" runat="server">
</asp:DropDownList>
</ContentTemplate>
</atlas:UpdatePanel>

No thats it exactly, but thank you

Did you have to manually type the second trigger (to populate dropdown2)?

What i was wondering was,

Say you had a button, when pressed, it fired a trigger to populate the first Dropdown1 (Foo, Bar)

Then I wanted to be able to make a selection from the Dropdown1 and then get data to populate Dropdown2,

by running a SQL Query which took the selected item from Dropdown1 as a param.

Made a Typo sorry

I said in last post

No thats it exactly, but thank you

I mean

No thats not exactly it, but thank you

Example, this does not update the second "Dropdown2", both controls are contained in the 1 UpdatePanel

<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
AutoPostBack="True">
<asp:ListItem Text="foo" Value="foo" />
<asp:ListItem Text="bar" Value="bar" />
</asp:DropDownList>
<asp:DropDownList ID="DropDownList2" runat="server">
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger ControlID="Button1" EventName="Click" />
<atlas:ControlEventTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
</atlas:UpdatePanel>

This example does, but you need to have 2 UpdatePanels

<atlas:UpdatePanel runat="server" ID="UpdatePanel1" Mode="Conditional">
<ContentTemplate>
<asp:DropDownList ID="DropDownList1" runat="server" OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"
AutoPostBack="True">
<asp:ListItem Text="foo" Value="foo" />
<asp:ListItem Text="bar" Value="bar" />
</asp:DropDownList>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</atlas:UpdatePanel>
<hr />
<atlas:UpdatePanel runat="server" ID="Computer" Mode="Conditional">
<Triggers>
<atlas:ControlEventTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>
<ContentTemplate>
<asp:DropDownList ID="DropDownList2" runat="server">
</asp:DropDownList>
</ContentTemplate>
</atlas:UpdatePanel>

in this example i have the script manager and updateprogress atlas controls on a master page, thus i gane share them around between different pages in the test site this has the button control out site which triggers the population of the dropdown1 control, then making a selection from the dropdown1 populates dropdown2 This is what i wanted to do in the first post i made.

Client side code:

<%@.PageLanguage="VB"MasterPageFile="~/MasterPage.master"AutoEventWireup="false"CodeFile="Default.aspx.vb"Inherits="_Default"title="Untitled Page" %>

<asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">

<div>

<asp:ButtonID="Button1"runat="server"Text="Button"/>

<atlas:UpdatePanelrunat="server"ID="UpdatePanel1"Mode="Conditional">

<ContentTemplate>

Dropdown 1

<asp:DropDownListID="DropDownList1"runat="server"OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged"

AutoPostBack="True">

<asp:ListItemText="foo"Value="foo"/>

<asp:ListItemText="bar"Value="bar"/>

</asp:DropDownList><br/>

Dropdown 2

<asp:DropDownListID="DropDownList2"runat="server">

</asp:DropDownList>

</ContentTemplate>

<Triggers>

<atlas:ControlEventTriggerControlID="Button1"EventName="Click"/>

<atlas:ControlEventTriggerControlID="DropDownList1"EventName="SelectedIndexChanged"/>

</Triggers>

</atlas:UpdatePanel>

</div>

</asp:Content>

Server Side code:

PartialClass _Default

Inherits System.Web.UI.Page

Dim dsAs Data.DataSet

Dim obsAs Data.DataTable

Dim defAs Data.DataTable

ProtectedSub Page_Load(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.Load

ds =New Data.DataSet

obs =New Data.DataTable

def =New Data.DataTable

ds.ReadXml("url to my xml datasopurce here")

def = ds.Tables("data-def")

obs = ds.Tables("obs")

EndSub

ProtectedSub DropDownList1_SelectedIndexChanged(ByVal senderAsObject,ByVal eAs System.EventArgs)

Dim xmldocAsNew System.Xml.XmlDocument

xmldoc.LoadXml(ds.GetXml)

Dim obsAs System.Xml.XmlNodeList = xmldoc.SelectNodes("weather-observations/product/group/obs")

Dim xmlEAs System.Xml.XmlElement

ForEach xmlEIn obs

If xmlE.Attributes.Item(4).Value =Me.DropDownList1.SelectedItem.TextThen

Me.DropDownList2.Items.Clear()

Dim xmlEnumeratorAs IEnumerator

xmlEnumerator = xmlE.ChildNodes.GetEnumerator()

xmlEnumerator.Reset()

While xmlEnumerator.MoveNext

Dim eleAs System.Xml.XmlElement

ele = xmlEnumerator.Current

Me.DropDownList2.Items.Add(ele.Attributes.Item(0).Value &" : " & ele.FirstChild.Value)

EndWhile

EndIf

Next

EndSub

ProtectedSub Button1_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles Button1.Click

Me.DropDownList1.DataSource = obs

Me.DropDownList1.DataTextField ="station"

Me.DropDownList1.DataBind()

EndSub

EndClass

In the latest rev of Atlas, controls within the UpdatePanel should not require an explicit trigger as this is implied. If you want the UpdatePanel to refresh based on controls outside the UpdatePanel then the trigger is required. This therefore means that controls outside the UpdatePanel are traditionally post-back controls unless wired to triggers.The simplified example (#1) therefore should be OK without the DropDownList trigger. The Click handler of the button could be used to drive population of drop-down list 1. I'll try and work on a server binding sample for you.

Odd -- I was trying my own code (pretty much the exact code as above) and I get an "Unknown Error". I tried this code, and I get the same error. Its a pretty vague error, but any ideas as to where I should begin to look?

Thanks!

I checked this code ( the good one ) and put one breakpoint at first line in page load method. Every time I changed the option in the DropDownList and the application stopped on the breakpoint.

I don't know if this control (UpdatePanel ) works in this way or is something wrong in the code but I supossed that the panel is updated with an asynchronous server call. Could anybody explain me the functionality of the control?

Thanks.

The Code is Good But Doesnt Work ...

Please help ..

Links dont work properly in a working Modal Popup

Is it possible to have client side <a href links inside an extender?

I've got a Modal Popup working. A webservice is invoke via javascript on the client. The webservice queries a database and returns html to the javascript which inserts the markup into the Modal Popup panel. The popup works well, displaying a title, a description and an image. It also displays a <a href link, however this link doesn't work as intended. It displays as a link but when clicked goes nowhere. I've tried it with and without target="_blank". The only way make it function is by right clicking on it and Opening in a new tab or in a new window. Any advice would be very welcome as I'm stuck and it's far from user friendly in it's current state.

Hi oscar,

Do you got some code that replicates the error?

Kind regards,
Wim

Hello,

What is resulting output of the link?

Thanks,

Louis

Thanks both for taking the time to help out. I tried logging in to reply, entered my password incorrectly once and my user account has now been locked out, despite it letting me reset my password.

I've now got this working.

The web service returns a string containing all of the markup to be displayed in the panel:

strdetails += "<a href="http://links.10026.com/?link="""onClick=""javascript:popUp('"
strdetails += ds.Tables(0).Rows(0)("livemaplink").ToString()
strdetails += "')"">Live Map</a>"

then with the rest of the javascript functions in the aspx page is this:

function popUp(URL)

{window.open(URL);}

I'd tried adding the popup function to the panel in the strdetails string and it didn't work but this does.

Thanks again.

Hi oscar Version 2

Glad you got it to work!

Euhm, Even if none of our answer are actually solutions, I think you can still mark the thread as solved, somewhere on top, or mark your reply as answer. Because this thread is resolved ;)

Kind regards,
Wim

Will do, when my original account is unlocked that is!

Cheers.

Will do, when my original account is unlocked that is!

Cheers.

Little addition to $addHandler

Hi guys -

This comes in really handy sometimes. Since standard compliant browsers do not have window.event I emulate it via a 1 line addition (line 16 below) to $addHandler. It comes in really convenient and virtually no overhead.

12var $addHandler = Sys.UI.DomEvent.addHandler = function Sys$UI$DomEvent$addHandler(element, eventName, handler) {3 /// <param name="element" domElement="true"></param>4 /// <param name="eventName" type="String"></param>5 /// <param name="handler" type="Function"></param>6 var e = Function._validateParams(arguments, [7 {name: "element", domElement: true},8 {name: "eventName", type: String},9 {name: "handler", type: Function}10 ]);11 if (e) throw e;1213 if (element.addEventListener) {14 if (!handler._browserHandler) {15 handler._browserHandler = function handler$_browserHandler(e) {16 if (e) window.event = e;17 handler.call(element, new Sys.UI.DomEvent(e));18 }19 }20 element.addEventListener(eventName, handler._browserHandler, false);21 }22 else if (element.attachEvent) {23 if (!handler._browserHandler) {24 handler._browserHandler = function handler$_browserHandler() {25 handler.call(element, new Sys.UI.DomEvent(window.event));26 }27 }28 element.attachEvent('on' + eventName, handler._browserHandler);29 }30 if (!element._events) {31 element._events = {};32 }33 var eventCache = element._events[eventName];34 if (!eventCache) {35 element._events[eventName] = eventCache = [];36 }37 eventCache[eventCache.length] = handler;38}3940

Any chance of getting this included in AJAX? I hate hacking away at AJAX functions.

Hi,

just curious, in which scenarios do you think it could be useful?

Also, the code contains a bug: http://forums.asp.net/thread/1487616.aspx

Basically, when you attach the same handlers to multiple elements, the handler is executed under the scope of the first element that got it attached (due to the handler._browserHander flag).

Hey Garbin -

I am actually neglecting the standard in ignoring parameter (laziness and conciseness more than anything). Here's an example.

var a = 'something';
var handler = Function.createCallback(myFunction, a);
$addHandler(el, handler)

function myFunction(s) {
window.event.returnValue = false;
}

Basically I am too lazy to create a function that accepts both a string and the event so I just use the window.event with the addition of that line. It works best for me since I don't need to use it unless I want it.

Thanks for the bug report I will fix on my side tomorrow but this is one of the reasons I hate overriding AJAX functions since I have to stay up to date... I'd prefer this line to be included in the source. ;) Or maybe one day I'll sit down and fix up my code!

Hello again Garbin -

I came up with a way better scenario than my laziness!!!!

A good justification for including this is DragDropManager in the preview bits. If you look at the handlers they use window._event to pass around the current event.

Is this a better scenario than my laziness? ;)

Alex

The idea is not to reinvent the browser API. Assinging window.event is like adapting FF, for example, to work like IE.

You should just use the event object passed into the handler as a parameter. If you really need the raw event objects because it contains something browser specific, you can use the rawEvent field on it.

Oh and I wouldn't necessarly use the preview bits as a justification... they are preview bits afterall :)

Hi,

yes I remember the DragDropManager. If you browse the code of the slider behavior in the control toolkit, you'll notice that I had to assign the event object just received in a handler, to window._event in order to make it work... not a best practice I think :)

InfinitiesLoop - I understand your point and definitely think staying with the standards is a good thing. Here's my justification for breaking away from this. Since we cannot assign context via $addHandler(s) we would have to assign a value via the DOM element and assign an attribute as a way to pass a context and then retrieve it via event.target.attribute. DOM access is slow and memory bug prone (if what I am trying to pass is a function) - I would need to do clean up and all that comes with it.

What I can do is a create something along the lines of the below to pass along the event and a context.

var $createDomFn = function(instance, fn, context) {
return function(e) {
fn.apply(instance, [ context, e ]);
}
}

I am personally not a fan of this type of solution because I can't use standard Function.createCallback.

I find it way more convenient to be able to access window.event raw event and work with it. If I want to use the DomEvent version (which is not completely cross browser and I've reported this) I can use new Sys.DomEvent(window.event).

Just my 2 cents.

Hi,

could you elaborate on why you can't use Function.createCallback? I think a callback could be the best pattern that fits your scenario.

I would think that any context info your event handler needs that is specifically tied to the dom element, should be on the dom element or associated with a control that is attached to the dom element anyway. If the context isn't specifically tied to the dom element then creating a closure like you demonstrated makes sense, it's the same thing as creating an instance of a class, assigning some state to it, then using one of its methods as the event handler (using Function.createDelegate).

Maybe I'm not understanding exactly what you mean. What would you have done with attachEvent? addHandler has no take-away. Or do you mean you'd like the event info to be available from anywhere in the callstack (like what the drag drop manager is doing)? Isn't better design to have the methods accept parameters for exactly what they need? Its the old global variable issue... you want to limit state to where it is needed. If there's something generic you are calling into that may potentially need the event info but you don't know until runtime, then you can devise a mechanism to store the event object so it can be accessed as needed, but not on the global window object. Maybe a custom event args that is passed down, or some other static... and then, maybe not the entire event object, maybe a high level state object that has already undergone some interpretation.

It may be more convenient to have window.event, I'll give you that... but convenience isn't the only goal of a solid framework.

Garbin - you are right Function.createCallback would fit my scenario (I use my own flavor of this $createFn that combines createDelegate and createCallback), I did not realize it passes the arguments and then pushes the context to the end. Thanks.

InfinitiesLoop - I am not sure I agree with your argument that anything tied to a DOM element should be on the dom element. This can be slower than using a closure and there is clean up involved. I think you are right in saying this is a global variable issue except that I would take this further and say storing anything on a DOM element is essentially the same thing. I personally like to be able to access the window.event object from where I need it, rather than adding an extra variable to the scope of a handler. I also would think that passing around DomEvent in a closure to handlers is more memory and processor intensive than having a global object. I guess it would all depend on the scenario but I can see both ways window.event vs argument event being faster/better in different usages.

I think you may have convinced me to test out which is faster in a scenario where a lot of elements have the same hadler that is fired frequently.

Thanks! Glad to see someone cares about such little things.

Loading image while waiting for web service to deliver image

Hi,

We have share information charts that we get via a third party web service. My problem is that the charts take a while to be created. What I would like to do is have a loading gif while I'm waiting for the image to download.

I am very new to Ajax (just downloaded the bits and pieces to plug into VS2005 this morning), so if anyone could point me in the direction of some script I'd be very thankful.

Thanks

Emilio

Place your charts in an UpdatePanel. Place your loading gif in an UpdateProgress control and associate the two.

http://www.asp.net/ajax/documentation/live/overview/UpdatePanelOverview.aspx

http://www.asp.net/learn/ajax-videos/video-78.aspx (updatepanel)

http://www.asp.net/learn/ajax-videos/video-123.aspx (updateprogress)

Hi,

Thank you for your post!

It seems that you are really a newbie to AJAX,this is a good start point for your learning:ASP.NET AJAX Roadmap

And in my opinion, <ASP.NET AJAX in action> is a decent book to learn ASP.NET AJAX.

If you have further questions ,let me know.

Best Regards,