Showing posts with label buttons. Show all posts
Showing posts with label buttons. Show all posts

Monday, March 26, 2012

Atlas UpdatePanel Browser Hang

I am currently creating a web page utilizing the April Atlas CTP. On my web page there is a dropdown list, a listbox, and two buttons for add and remove. The goal is to allow the user to select an item from the drop down and move it to the listbox. The selected item is then removed from the dropdown control. Removing an item does the same but from the listbox to the dropdown.

Here is the web page snippet:

<asp:Content ID="newJobContent" ContentPlaceHolderID="mainContentArea" runat="Server">
<atlas:ScriptManager ID="scriptManager" runat="server" EnablePartialRendering="True">
</atlas:ScriptManager>
...

<div id="artist_area" style="border: solid 1px black">
Artist(s):
<atlas:UpdatePanel ID="panelArtistDropDown" runat="server">
<ContentTemplate>
<asp:DropDownList ID="ddlArtist" runat="server" CssClass="control" Width="150">
</asp:DropDownList>
<asp:ListBox ID="lstArtist" runat="server" CssClass="control" Rows="4" Width="200"> </asp:ListBox>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTrigger ControlID="btnAdd" EventName="Click" />
<atlas:ControlEventTrigger ControlID="btnRemove" EventName="Click" />
</Triggers>
</atlas:UpdatePanel>
<asp:Button ID="btnRemove" runat="server" OnClick="btnRemove_Click" Text="<" />
<asp:Button ID="btnAdd" runat="server" OnClick="btnAdd_Click" Text=">" />
<asp:CustomValidator ID="valCustArtist" runat="server" ClientValidationFunction="CheckArtist" ControlToValidate="lstArtist" ErrorMessage="You must select an artist(s)." ValidateEmptyText="True"></asp:CustomValidator>
</div
And here's the server side code:

protected void btnAdd_Click(object sender, EventArgs e)
{
ListItem li = new ListItem();

li.Value = ddlArtist.SelectedItem.Value;
li.Text = ddlArtist.SelectedItem.Text;

lstArtist.Items.Add(li);
ddlArtist.Items.Remove(li);
}
protected void btnRemove_Click(object sender, EventArgs e)
{
ListItem li = new ListItem();

li.Value = lstArtist.SelectedItem.Value;
li.Text = lstArtist.SelectedItem.Text;

ddlArtist.Items.Add(li);
ddlArtist.Items.Remove(li);
}

Here's the problem... in IE6 I can add or remove 2 items. On the third try the browser will hang. The code behind is never called. The only way to get control back is to refresh the page. With FireFox everything works great. Very strange. Has anyone experienced this? Any help would be appreciated.I've tracked down the problem. Seems like a third party tool that we use (BasicDatePicker) is causing the problem. When we remove the third party control IE works as it should. Frankly I'm not too surprised because BasicDatePicker generates a ton of javascript. Looks like I'll be coming up with a new date control ;)

Saturday, March 24, 2012

Atlas to AJAX- Open Modal Popup from Javascript

Hi,

I know that i can now show the modal popup server side but I have a case where i dont want or need a postback to show the popup. I have buttons in a repeater that and i simply show the modal on click...so in 'Atlas' i did this in javascript..

aspx..

<atlasT:ModalPopupExtenderID="ModalPopupExtender1"runat="server">

<atlasT:ModalPopupPropertiesID="MyPopup"

TargetControlID="Button1"PopupControlID="panModal"CancelControlID="btnCancel"

BackgroundCssClass="modalBackground"DropShadow="True"OkControlID="btnHiddenOK"/>

</atlasT:ModalPopupExtender>


Then in .js

$object("MyPopup")._show();


------AJAX-------

<ajaxT:ModalPopupExtenderID="ModalPopupExtender1"runat="server"

TargetControlID="Button1"PopupControlID="panModalPopup"CancelControlID="btnCancel"

BackgroundCssClass="modalBackground"DropShadow="True"OkControlID="btnHiddenOK"/>


And in .js...

$find("ModalPopupExtender1")._show();


Which doesn't work....Any ideas?

Also, I see properties in the control called Dynamic*; what are they for? Databinding?

Thx
Steve

bump... Anyone got a resolution for this?

Thx
Steve


I thnk that you need to use the show method instead of _show:

$find("ModalPopupExtender1").show();

The dynamic* properties appear to be related to dynamic population. See:


http://ajax.asp.net/ajaxtoolkit/Walkthrough/OtherNeatStuff.aspx

and search for "Easily adding dynamic population"



Thx
Thx cti.

Wednesday, March 21, 2012

Atlas renders duplicated buttons...

Hi, All:

Please check the following code:

put updatePanel within a table will duplicate button and dropdownlist.

remove table tag is fine though.

Is this a bug?

---------------------

<%@dotnet.itags.org.PageLanguage="C#" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<scriptrunat="server">

void Button1_Click(object sender,EventArgs e)

{

listMatter.Items.Clear();

listMatter.Items.Add("text1");

listMatter.Items.Add("text2");

}

</script>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headrunat="server">

<title>Untitled Page</title>

</head>

<body>

<formid="form1"runat="server">

<atlas:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true">

</atlas:ScriptManager>

<div>

<table>

<atlas:UpdatePanelID="up1"Mode="Conditional"runat="server">

<Triggers>

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

</Triggers>

<ContentTemplate>

<tr><td>

<asp:LinkButtonID="Button1"runat="server"OnClick="Button1_Click"Text="Button"/>

Matter:

</td>

</tr>

<tr><td>

<asp:DropDownListID="listMatter"runat="server"></asp:DropDownList>

</td></tr>

</ContentTemplate>

</atlas:UpdatePanel>

</table>

</div>

</form>

</body>

</html>

not to get too far off topic here but...
why would you create a table and then the update panel control?

is your intent to create a row that is updatable?
interesting concept if you are... (most would create a table cell and then the update panel or use divs instead)

i don't really know but i would look to see if using the "tbody" helps in any way
the reason why i say that is because there are instances that i have seen where the "tbody" must be present for some "features" to work properly in Atlas


Hi,

I think the problem is that the UpdatePanel wraps its content with a div or span tag, thus the markup for the table is like:

<table>
<div><!-- div as first child of table -->
...
</div>
</table>
and this cause problems when replacing the updated HTML using the DOM. I would place the UpdatePanel inside the cell, to wrap only the DropDownList, like meisinger suggested.