AJAX UpdatePanel dynamic controls and RegisterStartUpScript click twice

[rsdev]

Hi,

I have read hundreds of post regarding this issue, but none have an answer for my situation. So hopefully somebody here can help!

I have a gridview in an updatepanel (AJAX control toolkit) and because paging/sorting aren't supported I've added my own custom paging. I have dynamically loaded LinkButtons in the updatepanel to change the page but they only fire on the second click. I have also attached javascript to the rows so that they can be selected when you click. Again only the second click works.

I have DataBind in the event handlers and I only DataBind the first time when the page is loaded. When I debug the click events only fire the second time??

Any ideas?

Thanks in advance

[Frinavale]

Hi,

I have read hundreds of post regarding this issue, but none have an answer for my situation. So hopefully somebody here can help!

I have a gridview in an updatepanel (AJAX control toolkit) and because paging/sorting aren't supported I've added my own custom paging. I have dynamically loaded LinkButtons in the updatepanel to change the page but they only fire on the second click. I have also attached javascript to the rows so that they can be selected when you click. Again only the second click works.

I have DataBind in the event handlers and I only DataBind the first time when the page is loaded. When I debug the click events only fire the second time??

Any ideas?

Thanks in advance

I'd suggest taking the GridView out of the UpdatePanel.
Is there any reason why it has to be there?


Have you attempted moving the paging LinkButtons outside of the GridView (place them above or below or something).

[rsdev]

Hi Frinavale,

Thanks for responding!

I want the gridview in the updatepanel to create a seemles WYSIWYG CMS.

Once I've finished the demo I plan to open source the project and invite other developers to help improve it like a updated AJAX WYSIWYG version of DOTNETNUKE.

Anyway, the LinkButtons are outside the gridview they are dynamically created in placeholder below the gridview. But the javascript is obviously attached to each row of the gridview. So it must be a simple error on my part because both of these don't re-act on the first click. The updatepanel is in conditional mode with ChildTriggers set to true. I've read that I should create dynamic triggers for each of the dynamic controls but that doesn't explain why the javascript rows aren't working either.

I'm really stumped on this one!

[Frinavale]

Hi Frinavale,

Thanks for responding!

I want the gridview in the updatepanel to create a seemles WYSIWYG CMS.

Once I've finished the demo I plan to open source the project and invite other developers to help improve it like a updated AJAX WYSIWYG version of DOTNETNUKE.

Anyway, the LinkButtons are outside the gridview they are dynamically created in placeholder below the gridview. But the javascript is obviously attached to each row of the gridview. So it must be a simple error on my part because both of these don't re-act on the first click. The updatepanel is in conditional mode with ChildTriggers set to true. I've read that I should create dynamic triggers for each of the dynamic controls but that doesn't explain why the javascript rows aren't working either.

I'm really stumped on this one!

I remember a while ago having the same problem (having to click twice)...but I can't remember how I got around it.

Let me see if I can't help you find something online regarding the issue.

-Frinny

[Frinavale]

Do me a favour and try to link buttons that are not dynamically generated for your paging....does that fix anything?

And can you post the JavaScript responsible for selecting so that I can make sure there's nothing wrong here?

Just double checking before I get into looking up the event firing stuffs.

[rsdev]

Hi Frinny,

Thanks for sticking with this!

I've just tried adding a LinkButton (great suggestion) and have the same problem, nothing (response.write) on the first click. It's like the first click isn't getting through to the server... somehow!

Here's the serverside added javascript;

protected void linksView_RowDataBound(object sender, GridViewRowEventArgs e)
{
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                e.Row.Attributes["onmouseover"] = "this.style.cursor='hand';this.style.textDecoration='underline';";
                e.Row.Attributes["onmouseout"] = "this.style.textDecoration='none';";
                e.Row.Attributes["onclick"] = Page.ClientScript.GetPostBackClientHyperlink(this.linksView, "Select$" + e.Row.RowIndex);
            }
}

Thanks again!

[rsdev]

So in order to trace what was happening to the clicks, I decided to get a hardcore debugger. The Web Development Helper is very cool!

Now when I load the gridview in the updatepanel I checked the pages DOM and get a table with ID ...CMSControl_1_linksView. When I click the button first time around the ID changes to CMSControl_ct104_linksView, then it remains the same. This has got to be the issue!!

[rsdev]

In fact it gets worse because all the javascript: __doPostBack code has used '$' instead of '_' for the ID's.

So how do I stop the gridivew table from changing ID and how do change the '$' for '_'?

[rsdev]

Don't worry about the '$' versus '_'. I've found out that doesn't make a difference.

But I still have the problem where I create the LinkButtons in Page_Load in a placeholder then the placeholder changes id after the first click so the event is never found or fired.

[rsdev]

So now I'm stuck not knowing how to make the LinkButton __DoPostBack the correct id??

Would ParseControl work better?

[rsdev]

I think it's time to re-post this thread with a more appropriate heading.

[Frinavale]

I think it's time to re-post this thread with a more appropriate heading.

Don't repost...I'll change the title.
What would you like it to be?

[Frinavale]

Just try one more thing for me...try taking the GridView out of the update panel...

[rsdev]

Hi Frinny,

Sorry I created another post already!

But it would be great to continue and try to get to the bottom of this.

Unfortunately I can't take the gridview out of the updatepanel as I am dynamically loading it in there. The gridview is inside a user control, which is loaded into the updatepanel. I know this creates complexity but the finish result will be a seemless user experience.

The selectable rows are now working. But the paging dynamic LinkButtons are not. When they first load into the updatepanel they have a strange ID, then on the first click the ID becomes correct and they work fine.

Is there anyway to solve this?

[Frinavale]

Hi Frinny,

Sorry I created another post already!

But it would be great to continue and try to get to the bottom of this.

Unfortunately I can't take the gridview out of the updatepanel as I am dynamically loading it in there. The gridview is inside a user control, which is loaded into the updatepanel. I know this creates complexity but the finish result will be a seemless user experience.

The selectable rows are now working. But the paging dynamic LinkButtons are not. When they first load into the updatepanel they have a strange ID, then on the first click the ID becomes correct and they work fine.

Is there anyway to solve this?

I know you were explaining this ID problem earlier.
Could you post a snippet/example of the "strange" ID and "regular" ID please?

[rsdev]

Yep! No Problem.

The dynamic LinkButton is in the user controls onload event.

protected override void OnLoad(EventArgs e)
{
            //Create paging buttons
            HtmlTableRow row = new HtmlTableRow();
 
            int numLinks = (int)Math.Ceiling((decimal)LinkInfo.numLinks / 5);
            for (int i = 1; i <= numLinks; i++)
            {
                pagingLink = new LinkButton();
 
                pagingLink.Text = i.ToString();
                pagingLink.CommandName = i.ToString();
                pagingLink.CommandArgument = i.ToString();
                pagingLink.Command += new CommandEventHandler(GetNextPage_Click);
                pagingLink.ID = "linkspagingButton" + i.ToString();
 
                HtmlTableCell cell = new HtmlTableCell();
                cell.Controls.Add(pagingLink);
                row.Cells.Add(cell);
                if (i < numLinks)
                {
                    HtmlTableCell cell2 = new HtmlTableCell();
                    cell2.InnerHtml = "/";
                    row.Cells.Add(cell2);
                }
            }
            HtmlTable t = (HtmlTable)FindControl("pagingTable");
            t.Rows.Add(row);
 
            base.OnLoad(e);
}
 
 
DOM First time
 
<TABLE id=ctl00_CMS_CMSControl_1_pagingTable cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD><A id=ctl00_CMS_CMSControl_1_linkspagingButton1 href="javascript:__doPostBack('ctl00$CMS$CMSControl$1$li  nkspagingButton1','')">1</A></TD>
<TD>/</TD>
<TD><A id=ctl00_CMS_CMSControl_1_linkspagingButton2 href="javascript:__doPostBack('ctl00$CMS$CMSControl$1$li  nkspagingButton2','')">2</A></TD></TR></TBODY></TABLE></DIV>
 
DOM Second time
 
<TABLE id=ctl00_CMS_CMSControl_ctl04_pagingTable cellSpacing=0 cellPadding=0>
<TBODY>
<TR>
<TD><A id=ctl00_CMS_CMSControl_ctl04_linkspagingButton1 href="javascript:__doPostBack('ctl00$CMS$CMSControl$ctl0  4$linkspagingButton1','')">1</A></TD>
<TD>/</TD>
<TD><A id=ctl00_CMS_CMSControl_ctl04_linkspagingButton2 href="javascript:__doPostBack('ctl00$CMS$CMSControl$ctl0  4$linkspagingButton2','')">2</A></TD></TR></TBODY></TABLE></DIV>

Then I've including the DOM info for pre and post first click.

Let me know if you need more!

Thanks.

[Frinavale]

I'm still looking up what may be causing this.
It doesn't seem to make any sense that this would be a problem.
Your ID's look fine to me (?)

Anyways, I'm still looking...can't find what I did to solve my problem...and am having problems finding anything online.

Are you using VS2005?
You've probably already done this but....have you used the debugger to see if the the page even posts back when you click the button?

[Frinavale]

Oh yeah...from what I remember your "response.write" wont work properly in partial page updates. I suggest using a label and setting it's text to something instead of using response.write.




:)

[rsdev]

The ID that causes the problem is here;

before click id=ctl00_CMS_CMSControl_1_linkspagingButton2

after click id=ctl00_CMS_CMSControl_ctl04_linkspagingButton2

The control exist in the table

id=ctl00_CMS_CMSControl_1_pagingTable

Which ID changes to

id=ctl00_CMS_CMSControl_ct104_pagingTable

So I'm deducing that because the control is posting an async javascript post back.

javascript: __DoPostBack('ctl00_CMS_CMSControl_1_linkspagingBu tton2','')

The IDs on post back don't match because the ID should be.

ctl00_CMS_CMSControl_ct104_linkspagingButton2

Does this make sense?

[Frinavale]

The ID that causes the problem is here;

before click id=ctl00_CMS_CMSControl_1_linkspagingButton2

after click id=ctl00_CMS_CMSControl_ctl04_linkspagingButton2

The control exist in the table

id=ctl00_CMS_CMSControl_1_pagingTable

Which ID changes to

id=ctl00_CMS_CMSControl_ct104_pagingTable

So I'm deducing that because the control is posting an async javascript post back.

javascript: __DoPostBack('ctl00_CMS_CMSControl_1_linkspagingBu tton2','')

The IDs on post back don't match because the ID should be.

ctl00_CMS_CMSControl_ct104_linkspagingButton2

Does this make sense?

Hmm...let me think about this for a sec...

In the mean time... found this tadbit of information:

...in some circumstances, a control might not work as expected inside an UpdatePanel control. These circumstances include the following:

Registering script by calling registration methods of the ClientScriptManager control.
Rendering script or markup directly during control rendering

If the control calls script registration methods of the ClientScriptManager control, you could use corresponding script registration methods of the ScriptManager control instead. In that case, the control can work inside an UpdatePanel control.

Doesn't help with your ID's being changed though.

[Frinavale]

Hmm...let me think about this for a sec...

In the mean time... found this tadbit of information:


Doesn't help with your ID's being changed though.

Actually that might be the problem.
I remember that if you register a JavaScript for some control...that that JavaScript will not work for the control...and upon debugging the issue it was because the names of the controls get changed slightly...so the JavaScripts can't work properly.

You aren't actually supplying "_doPostBack" JavaScript methods for these LinkButtons are you????

[rsdev]

No. I copied these values from the DOM they are created by .NET in the Page life-cycle, when I create the dynamic controls (OnLoad).

For some reason the first time they are created the ID is different to the second time. Then from the secodn time onwards they remain the same.

The 1 swaps with ct104 I think this is the Client ID for either the UpdatePanel or the placeholder inside it.

The only solution I can think of is to somehow fake a postback after the first load to enable the IDs to be updated. Seems like the wrong solution!

[rsdev]

Hmmm!

Just seen your post before the last one.

I am registering a ClientScript in the Page_Load method which resizes the and centers the DIV around the gridview. I'll try running without this script.

I'll have to post back tomorrow as it's getting late in the French Alps.

If you can think of any other helpful links I would be most grateful.

Thanks again.

[rsdev]

SOLVED!!

When dynamically adding the user control to the placeholder I was assinging an ID, in this case 1. But when I persisted the control on PostBack I wasn't assigning an ID. Doh!

I'm so used to assigning ID's to dynamic controls that I'd done the same thing with the user control. Which I suppose is fine, except if you don't assign the same ID on when the control persists.

Thanks for your help! The link to ASP.NET AJAX got me thinking and lead to the solution.

I also noticed it's possible to dynamically load a control directly to ContentTemplateContainer and cut out the placeholder altogether.