Solved

UpdatePanel with HTML problems

Posted on 2007-04-04
10
453 Views
Last Modified: 2011-10-03
               <tr>
                    <td align="right" valign="top">
                        <asp:label id="CurrentCourses" runat="server"></asp:label>
                    </td>
                    <asp:updatepanel id="CurrentCoursesUpdatePanel" runat="server">
                        <contenttemplate>
                            <td valign="top">
                                <asp:listbox id="CurrentCoursesList" runat="server" height="66px" width="214px" />
                                <br />
                                <asp:button id="AddCurrentCourse" runat="server" width="63px" />
                                <asp:button id="RemoveCurrentCourse" runat="server" width="83px" />
                            </td>
                        </contenttemplate>
                    </asp:updatepanel>
                </tr>
0
Comment
Question by:dba123
  • 4
  • 3
  • 3
10 Comments
 
LVL 5

Expert Comment

by:mzalewski
ID: 18853686
Hi
Not sure what your problem is (you didnt post a description :)) - but I'm pretty sure that the ASP:UpdatePanel uses a DIV tag to wrap it's contents.
This would translate into invalid HTML:
<tr>
                    <td align="right" valign="top">
                        <asp:label id="CurrentCourses" runat="server"></asp:label>
                    </td>
                    <div id="CurrentCoursesUpdatePanel" >
                            <td valign="top">
                                <asp:listbox id="CurrentCoursesList" runat="server" height="66px" width="214px" />
                                <br />
                                <asp:button id="AddCurrentCourse" runat="server" width="63px" />
                                <asp:button id="RemoveCurrentCourse" runat="server" width="83px" />
                            </td>
                        </div>
                </tr>

Try this instead:
      <tr>
                    <td align="right" valign="top">
                        <asp:label id="CurrentCourses" runat="server"></asp:label>
                    </td>
                    <td valign="top">
                         <asp:updatepanel id="CurrentCoursesUpdatePanel" runat="server">
                             <contenttemplate>
                                   <asp:listbox id="CurrentCoursesList" runat="server" height="66px" width="214px" />
                                <br />
                                <asp:button id="AddCurrentCourse" runat="server" width="63px" />
                                <asp:button id="RemoveCurrentCourse" runat="server" width="83px" />
                             </contenttemplate>
                         </asp:updatepanel>
                      </td>
                </tr>
0
 
LVL 1

Author Comment

by:dba123
ID: 18853690
ahh, thanks! will try the div.  Not sure why DIV is so special in this case though.
0
 
LVL 10

Accepted Solution

by:
jinn_hnnl earned 250 total points
ID: 18853749
Lol... what is your problem...

Well I guess, some compile errors ?... I think it should be:

<tr>
    <td align="right" valign="top">
      <asp:label id="CurrentCourses" runat="server"></asp:label>
    </td>
   
    <td valign="top">
      <asp:updatepanel id="CurrentCoursesUpdatePanel" runat="server">
            <contenttemplate>
                  <asp:listbox id="CurrentCoursesList" runat="server" height="66px" width="214px" />
                  <br />
                  <asp:button id="AddCurrentCourse" runat="server" width="63px" />
                  <asp:button id="RemoveCurrentCourse" runat="server" width="83px" />
            </contenttemplate>
      </asp:updatepanel>
    </td>
</tr>

Normally what I do is put asp:UpdatePanel out of the scope of the table... It doesn't really matter you clearly specify which part of the page should only be post back... put the whole table or the div contains that table are not very different from only a column.

Hope this help

JINN ^^
0
 
LVL 10

Expert Comment

by:jinn_hnnl
ID: 18853762
OMG... I had commented and forgot to post it >.< when I do... there were already 2 .... sorry I didn't mean to spam this way
0
 
LVL 1

Author Comment

by:dba123
ID: 18853813
no, no problem.  I'm just wondering why a div is needed at all in this case...seems like overkill.
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 1

Author Comment

by:dba123
ID: 18853831
I think I just had some other issues.  I cleaned up my html.  I don't see a need for a div.  This works just fine now.  He're an example now of one of my table rows:

                <tr>
                    <td align="right" valign="top">
                        <asp:label id="Highest" runat="server"></asp:label>
                    </td>
                    <td align="left" valign="top">
                        <asp:updatepanel id="HighestUpdatepanel" runat="server">
                            <contenttemplate>
                                <asp:listbox id="HighestList" runat="server" width="214px"/><br />
                                <asp:button id="AddHighest" runat="server" width="63px" />
                            </contenttemplate>
                        </asp:updatepanel>
                    </td>
                </tr>
0
 
LVL 5

Expert Comment

by:mzalewski
ID: 18853852
Well, the div is used as a placeholder for the content. The UpdatePanel is refreshed using javascript (AJAX) - once it has the new content, it needs somewhere to place it on the page. This can be done by finding the placeholder (the DIV element with the id 'CurrentCoursesUpdatePanel'), and replacing the old inner HTML with the new HTML.
Without this DIV element, it would not be possible to update it this way.
0
 
LVL 5

Expert Comment

by:mzalewski
ID: 18853892
Yes, thats what jinn_hnnl and I were pointing out - The UpdatePanel should be placed inside the TD element, not the TR.

I think you might have misunderstood my original post - The first html example I gave was what the output would look like (from your code).
The DIV element is rendered by the UpdatePanel control - All ASP.NET WebControls have a tag property that determines the HTML tag to use when rendering the control to the output page. This is set by the developers of the control. The UpdatePanel has it's tag set to DIV.
This means that whenever an UpdatePanel is rendered, its contents are in a DIV container.

This was where you were having the problem - in HTML, a TR element cannot contain a DIV child element. This would have caused problems when the browser tried to display it (it was probably out of place).
The UpdatePanel needed to be moved inside the TD element before it could produce valid HTML.
0
 
LVL 10

Expert Comment

by:jinn_hnnl
ID: 18853990
yeahh after I posted (without knowing there were already one post with similar content), I said sorry for spaming. Because what I saw was the answer of first mzalewski is very similar with mine.

I meant the accepted answer should have belonged to him, and mine can be assisted. But thanks for the credit (and we will both happy if mzalewski can help some credit too ^^).

Well about updatePanel and the div. I am not sure whether it works without div or not (I think dba123 solution still works). But if you put it outside of the table, it looks nicer, and ... it might cover more part that needed. (you can apply this for more cases).
0
 
LVL 5

Expert Comment

by:mzalewski
ID: 18854049
It's ok - my original post was a bit confusing (I think he thought I was saying to place it inside a DIV element, which isn't what I meant :))

Next time, I'll be sure to explain things properly if I want the credit for it :)
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

In this Article, I will provide a few tips in problem and solution manner. Opening an ASPX page in Visual studio 2003 is very slow. To make it fast, please do follow below steps:   Open the Solution/Project. Right click the ASPX file to b…
User art_snob (http://www.experts-exchange.com/M_6114203.html) encountered strange behavior of Android Web browser on his Mobile Web site. It took a while to find the true cause. It happens so, that the Android Web browser (at least up to OS ver. 2.…
Sending a Secure fax is easy with eFax Corporate (http://www.enterprise.efax.com). First, Just open a new email message.  In the To field, type your recipient's fax number @efaxsend.com. You can even send a secure international fax — just include t…
In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

15 Experts available now in Live!

Get 1:1 Help Now