UpdatePanel in repeater overwrites controls underneath it - asp.net

I have a Repeater with an ASP.NET AJAX 1.0 UpdatePanel inside it. There are buttons outside of the UpdatePanel but still in the repeater. When a section inside the UpdatePanel appears (it's a hidden Panel control that appears when user answers a question a certain way), the buttons at the bottom disappear.
Here is an illustration.
[REPEATER]
[UPDATEPANEL]
[QUESTION] <-- when user says yes, Panel appears
[PANEL]
[/UPDATEPANEL]
[TABLE] <-- This table is no longer visible.
[Button]
[/TABLE]
[/REPEATER]
If I move the table to the top of the page, the content does not disappear, so I suspect it is a style issue, where the controls are actually there, but are underneath the content of the UpdatePanel. I've tried adding a <br clear="all"/> to just before the table, to no avail.
Any idea how I might fix this?
Edit: I had an errant missing closing tag that caused the UpdatePanel to extend further than it should've, so it was hiding my control. Using the Firefox plugins helped identify this.

My suggestion is to use Firefox and the Web Developer toolbar to do a View Generated Source after the update has occurred or inspect the elements with Firebug. If the table html is still on the page, then it could be either a style issue or an issue with malformed HTML in the panel causing the table not to render properly. If the table html is missing, then it is being removed from the DOM (or overwritten) by the AJAX callback. You might be able to use Firebug to debug the actual AJAX callback as well to see what and when things are actually being replaced.
Posting the generated HTML before and after the update in your question would also be helpful if you still can't figure things out and want more input.

Put the table inside the updatepanel, or put the whole repeater in one updatepanel.

Note that the Clear attribute is Deprecated as of HTML 4.01, and isn't included in XHTML Strict - what document type are you using - if you're using strict (and you're clearly using XHTML of some kind, because you've closed your br), then your browser has every right to ignore the clear attribute.
You would be better off doing this with CSS:
<style type="text/css">
.cleaner{
clear: both;
}
</style>
<br class="cleaner" />
Also, you could try putting the br after the panel, so that it comes back in the UpdatePanel and forces the browser to honour it.

Related

asp.net Tabs style lost and tabs are not generated

My asp.net web app uses AjaxControlToolkit 3.5, I use TabContainer and there are 4 tabs in it.
For unknown reason the four tabs won't show up as tabs, although their tab's caption are there, and clicking on each caption will take me to the "tab"
What's the possible reason that the tabs fail to show up? css style file lost? or AjaxControlToolkit failed?
Thank you. Any clue is appreciated.
I believe AjaxControlToolkit is causing the issue
I had a similar issue to this where I could switch between tabs and there was no content on them. The root of the problem ended up being missing closing tags in the ContentTemplate of one of the TabPanels. Inspect your html very closely inside of the ContentTemplate to ensure the html is valid and all tags are properly closed.

Using jQuery Validator on dialog displayed with BlockUI

I'm still learning jQuery, and I've come up against something I'm not sure how to proceed with.
I have a form, within it is a div which is hidden (using "display: none") at load time. This div is later displayed via the BlockUI plugin as a modal dialog for the editing of certain input elements. I'm trying to get the validation plugin to check that the fields I have denoted as required are actually filled in by the end user.
I have used the validation plugin elsewhere in my app without any problems, but this is the first time I'm using it to validate inputs that are hidden at load time. The validations aren't being executed (i.e. empty text inputs that are marked as required aren't flagged as such, and .valid() returns true).
I stepped through the validation logic with Firebug and discovered that none of the input elements within the dialog div are present within $(this.currentForm). If I keep the dialog div visible and remove the $.blockUI call, then the validation works as expected.
So I think I know what the problem is now -- my inputs aren't in the DOM, because they were originally not visible, so the validation plugin doesn't know they exist. I'm not sure how to fix this. Can anyone offer a suggestion? Thanks!
EDIT: The call to $.blockUI() is removing the dialog div from the DOM. Looks like I'll have to find another way to display the dialog.
EDIT: the code is proprietary so I can't post it.
Validation plug-in link
BlockUI plug-in link

DataPager with <a> on current page number instead of Label

I have a DataPager working fine except for one thing: the current page number is rendered with a Label and I need it to be as innertext for an <a> tag.
Is there a way to do this?
One way would be to subclass DataPager and override Render.
EDIT: Better yet, use a WebControlAdapter.
Customizes rendering for the Web control to which the control adapter
is attached, to modify the default markup or behavior for specific
browsers.
EDIT: Also please see ASP.NET: Can I somehow change the HTML rendered by NumericPagerField?.

How do I access Page controls from within my custom server control?

I am building a modal box as a custom server control and I want to have a property on the modal box TargetControlID that specifies the element that will show the modal when clicked. I've set the property up in the modal box and in the code behind I use the following code block (which I've tried in several different places
If (_targetControlId <> "") Then
Dim targetControl As WebControl = Me.Page.FindControl(_targetControlId)
targetControl.Attributes.Add("onclick", "test1();")
targetControl.Attributes.Add("onclick", "test2();")
End If
What happens is that targetControl always winds up to be NULL, and causes the page to crash when I tried to add attributes to it. I've double checked the spelling of the targetControlId and I am specifying a control that is runat="server". What is the proper way for a server control to access other controls on its containing page?
Thanks,
Mike
First of all, I should point out that the behavior you're looking for already exists in the ModalPopupExtender that comes with the free, open-source AjaxControlToolkit. I'd recommend you just use that. If you're still sure you want to write your own, then I'd recommend at least taking a look at their code to see how they go about it. ExtenderControlBase.FindControlHelper is a good place to start.

Cleaning up .NET HTML generation

I am looking to clean up some of the HTML generated by a .NET 2.0 TreeView controller. Switching to another version/model is not an available option.
My first crack yielded an extended TreeView, with an overridden Render that Regex'd out the text I didn't need and output to the page.
The problem was when I tried to collapse/expanded nodes of the tree, my postback event wasn't fired. My assumption was that I didn't need to do any more overriding as the parent TreeView controller would handle the postback events.
What am I missing?
Use the ASP.NET CSS Control Adapters:
http://www.asp.net/CSSAdapters/TreeView.aspx
Without adapters both use HTML <table> tags. Control adapters can be used so that nested <ul> tags are rendered instead. A combination of CSS and JavaScript can then be used to show and hide portions of the hierarchy of the tree or menu.
When the CSS and JavaScript are removed the adapted HTML degrades into simple nested unordered lists that are easily interpreted by screen readers, etc. You can see this for yourself by setting the theme to None in the Theme Chooser on the left.
You regex'd out something that the control needs to handle postbacks. It may be the highly-convoluted id's or the runat attribute... whatever it is, if you're stuck with web controls, you're stuck with bad html.
Your only true (and non-destructive) way to do what you want is not by extending current controls, but by using Control Adapters. There are already control adapters that use css for positioning. Here's ScottGu's post on these CSS adapters.

Resources