Line break problem in ASPNET AJAx

I am using ASP.NET AJAx 1.0 Framework.

The page is diplayed perfectly first time. But after a asynchronous post back an extra line added between the Header and the user control.

And no Styling related operations are done in the postback call.

I have compared the HTML that is generated before and after the call. But both are identical.

And I think the reason is that we cant see the modification made by the Ajax Asynchonous calls to the HTML file at the client side.

Does it possible to see the modified HTML code in the browser after a Ajax call to the server?

I don't know the exact solution to your problem, but, If I were you, I would use Fiddler

http://www.fiddlertool.com/

to see what's going on. Fiddler is an excellent HTTP debugging proxy, that monitors each and everyone HTTP request.

Fiddler's good for seeing the reqeust/response. IE Dev toolbar or Firebug are essential for seeing the 'live' DOM.

And this line break problem appears only in IE. Its working fine in Firefox 1.5.

Hi,

There are some useful tools in our daily development work.Such as:

IE: Fidder、IE Dev Toolbar、Instance source、HttpWatch、Web Development Helper(especially for UpdatePanel)

Firefox: Firebug

Hope it helps!

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.

link button inside update panel causes post back

I have a linkbutton inside the update panel. I registered it with AsyncPostBackTrigger, but when I click that link button, the whole page is refreshed instead of that update panel, what could I have gone wrong?

Check the EnablePartialRendering="true" of ScriptManager is et or not ?

Also check UpdateMode="Conditional" of UpdatePanel is set or not ?

Linkbuttons in a TabContainer lose the active tab

Hi, I have a tabcontainer with a couple of panels. If I have a Button in each panel then clicking the button posts the page back and the tab panel I was in remains active/visible. BUT if I put a link button in Panel 2 and click that then the tabcontainer resets to the first panel.

Here is a simple example:

<cc1:TabContainer ID="TabContainer1" runat="server">
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="tab 1">
<ContentTemplate>
<asp:Button runat="server" ID="Button1" Text="postback 1" />
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="tab 2"> <ContentTemplate>

<asp:LinkButton runat=server ID=lnk1>postback from panel 2</asp:LinkButton>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>

If I put a button in panel 2 as well as the linkbutton then I get the same thing, BUT if I click the Button first then clicking the link button does not cause the tabcontainer to reset. Which seems to suggest that AJAX is using a button event in some way, but not a linkbutton.

This is causing me a major headache as I have already designed the UI and coded all the DB and middle-tier code, wiring the UI up was supposed to be the easy bit!

Hoping someone can help

Andrew

This problem has been logged with the AJAX Control Toolkit developers as an issue and a workaround is detailed here:http://forums.asp.net/thread/1550723.aspx (basically wrap the tabcontainer in an update panel so that the non-Button postbacks get routed through the AJAX async handlers)

ListSearchExtender AutoPostback not firing

We have a few list boxes that do an auto post back. When I extend the controls with the ListSearchExtender, the search works, but i can only get the autopostback to fire if I scroll down and click what I want. If i type what i want till it is selected and then tab away, hit enter, or click that item, the autopoastback does not work.

The dropdowns are in a wizard control and the wizard is in an update panel if that makes a difference.

Is this expected behaviour or am I missing something?

Other than that this is a really good new tool in the toolkit.

Hi, I am having the same problem. Here is an example of my controls. The autopostback is not firing. Any help would be appreciated:

<asp:TableCell>
<asp:DropDownListID="ddlConsumer"AutoPostBack="True"CssClass="DropDownLists"runat="server" />
<asp:RequiredFieldValidatorID="valConsumer"ControlToValidate="ddlConsumer"ValidationGroup="Header"Text="*"runat="server"ErrorMessage="Consumer required"CssClass="ErrorMessages" />
<ajaxToolkit:ListSearchExtenderID="lseConsumer"TargetControlID="ddlConsumer"PromptPosition="Top"PromptCssClass="ListSearchExtenderPrompt"runat="server"/>
</asp:TableCell>

There is a workitem related to this issue -- please vote if you are affected by it:

http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=8744

I'm guessing you wouldn't want/expect the auto-postback to fire every time an item is selected as you do an incremental search ... I presume you'd want it to fire just when you tabbed away from the ListBox -- or perhaps when you hit enter?

Thanks,

Damian

Yes onBlur or when enter button is pressed.

Thanks, will vote.

I was affected by this as well, but I implemented the following workaround. I hope that this works for you guys:

Basically, I created a client side js method called RaisePostBack that asks for a control reference.
<script type="text/javascript">
<!--
// This function is called by the AJAX List Extender control. It's just an easy way to raise a post
// back event from the client-side. This is only needed because there are child controls that are
// dependent on the requester's selected data in order to retrieve the correct data
function RaisePostBack(Control)
{
// First we need to make sure that the postback event doesn't fire when the value is blank
if(Control.value != "")
{
// Call the postback event
__doPostBack("", "");
}
}
//--></script>

As you can see there is a method being called __doPostBack("", "") which does the magic needed to emulate AutoPostBack="True" on the control itself. I also added the initial check for the value because I'm calling this method onBlur of the control and do not want to have it executed if the user is just tabbing thru the controls. I would also recommend adding an isDirty method possibly.

Here is what I added to my dropdownlist controls:
<asp:DropDownList ID="FacilityDropDownList" runat="server" AutoPostBack="True"onBlur="RaisePostBack(this)" onChange="RaisePostBack(this)">
</asp:DropDownList>
<AjaxToolkit:ListSearchExtender ID="FacilityListSearchExtender" runat="server" TargetControlID="FacilityDropDownList" PromptText=" ">
</AjaxToolkit:ListSearchExtender>

Good luck and happy coding.

This link indicates the fix has been released with version10606 of the Ajax Control Toolkit. I downloaded and installed this, as well as version 10618, but the postback by the DropDownList is still not getting fired.

Am I missing something, is there still a problem, or what? Should I try one of the work-arounds posting in this thread?

Thanks so much for any assistance.

Dan

Hi Dan,

It fires when you leave the ListBox or hit Enter -- there is a method you can call to have it fire the OnChange as soon as a change is made.

Can you let me know if this is the behavior you are seeing?

Thanks,

Damian

I tried hitting enter and also leaving the field with the tab key. moving focus to another textbox on the page. The SelectedIndexChanged did not fire in either case.

Thanks.

Dan

Is it possible that the previous installation of the Ajax Control Toolkit is in play even though I installed the later version? Is there anything in the GAC, for example, that might be messing things up? Is it possible to uninstall before installing the later version?

Thanks.

Dan

An old version of the toolkit is the most likely explanation, however the toolkit isn't loaded into the GAC (the ASP.NET AJAX assemblies are though). Could you double-check the toolkit assembly reference in your solution to ensure that it is pointing to the new toolkit?

Thanks,

Damian

Thank you for the post. This code does work. However, when I implemented it on my page, the postback now makes the entire page refresh, overriding the updatepanel control, which is the original reason I started using Ajax in the first place, to make a client style web application.

Please don't take this as a criticism. I just wanted to post the results I had using this solution, possibly saving someone else a few minutes if they don't want this behavior.

That was the problem. My project was still using an older AjaxControlToolkit.dll. I replaced it w/ the version from 10618 and now it works fine.

Thanks for all your help.

Dan

This was my problem as well. I just downloaded Ajax from the asp.net website. The default download link points you to version 1.0.10301.0. Maybe I'm blind or dense, but I did not see any options for a newer version until I found the previous post. Perhaps if someone from asp.net is monitoring this forum, they could get that link updated to point to the most recent version. Just a thought.