Showing posts with label together. Show all posts
Showing posts with label together. Show all posts

Wednesday, March 28, 2012

AJAX Update div?

Pardon the potential noob-ishness of this question, but I can't seem to put two and two together on this one from the included documentation or the tutorials on Microsoft's website...

What I want is when a user clicks a link (or the equivalent Javascript function is run, since some of my links will be in Flash movies) for the part of the page that contains the text (the non-UI element, basically) to load new text according to what link they pressed. Ideally, I want to load that text from an XML file. I can get a model of this working if I write the AJAX by hand (via the AJAX for Dummies book), but I can't figure out how to use Microsoft's VS AJAX extensions to do this for me. I admit that the streamlined appearance of having the extension do the work from a code point of view is very appealing, and I tend to work better with objects that I can click on and change properties and whatnot than writing everything through code.

Can anyone help me with this? Thanks!!

Right, so I gotta bump this back up because I can't figure this one out...

I've tried making sense ofthis andthis but I can't seem to get either of them working. What I understand thus far about my issue, though, it that I'll need to use Javascript as a bridge between my Flash movie and my ASP.NET page.

Again, the end result I want is this: A user clicks on a button INSIDE the flash movie. Once clicked, that button calls a Javascript function defined in the page the SWF is loaded on (using getURL in Actionscript). That Javascript then passes the data it received from the Flash movie to a div located in an UpdatePanel and triggers an asynchronous postback. The data I'm passing is a string, which is part of a file location for the XML file and stylesheet to be loaded into the div. You can visually see my arrangement atwww.neezer.org/Clean; pressing the buttons in the flash movie currently does nothing (because of this roadblock!), and the text below is the content inside my UpdatePanel that I want to update.

That's my understanding of how something like this would work, though I recognize it may be a little rough and uninformed (believe me, I've spent hours trying to wrap my head around this and haven't come up with anything, which is upsetting). I had dug around and made a custom AJAX implementation of this, using a tutorial I found online somewhere, but I can't use any ASP.NET controls that way, and I want to use an UpdatePanel since it is very well documented and easier for me to customize than writing all the AJAX by hand.

Please, please, please help me!!


Try this out and see if this answers your question:

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { if (IsPostBack) { // get the XML file location out of the hidden field ServerLabel.Text = string.Format("Here's text we presumably got from the XML file '{0}'.", HiddenXmlFile.Value); } }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager runat="server" /> <asp:UpdatePanel ID="up1" runat="server"> <ContentTemplate> <asp:Label ID="ServerLabel" runat="server" /> </ContentTemplate> </asp:UpdatePanel> <asp:HiddenField ID="HiddenXmlFile" runat="server" /> XML file: <input id="xmlfile" type="text" /> <input type="button" value="Update" onclick="button_click()" /> </form></body><script type="text/javascript"> function button_click() { $get('<%= HiddenXmlFile.ClientID%>').value = $get('xmlfile').value; // in reality, this would come from your Flash movie, not from a textbox on the page __doPostBack('<%= up1.ClientID%>', ''); // force the UpdatePanel to refresh from JavaScript }</script></html>

So yes, after I modified the javascript and C# code a little...

function fetchData(flashVar) {
$get('<%= HiddenXmlFile.ClientID %>').value = flashVar;
__doPostBack('<%= UpdatePanel1.ClientID %>','');
}

if (IsPostBack)
{
string flashVar = HiddenXmlFile.Value;
Xml1.DocumentSource ="~/xmlStaticData_"+flashVar+".xml";
}


... it works just fine! Thank ye kindly, good sir! Now I can sleep!Cool

Saturday, March 24, 2012

AJAX Tabs stack together when AsyncPostBackTrigger

Hello,

On my WebPage, there is a DropDownList shows a list of categories, when selected, a GridView show records based on that selected category.

for each row of the GridView, it shows AJAX Tabs with 3 TabPanels, user can click on each tab to view information.

the problem:

When I wire up the AsyncPostBackTrigger, between the DropDownList and GridView, and run it, the 3 tabs in each row are all stacked one on top of each other, If I don't wire up the Trigger, it shows OK.

Please refer to attached Code, and screenshots, the left side is before the wireup and hte right is after.

Anybody has encounted the same problem?

Please advise,

Thank you

1<asp:ScriptManager ID="ScriptManager1" runat="server">2</asp:ScriptManager>34<asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true">5<asp:ListItem Text="--Select a Category--" Value="0"></asp:ListItem>6<asp:ListItem Text="Category 1" Value="1"></asp:ListItem>7<asp:ListItem Text="Category 2" Value="2"></asp:ListItem>8<asp:ListItem Text="Category 3" Value="3"></asp:ListItem>9</asp:DropDownList>1011<br />1213<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="always">14<Triggers>15<asp:AsyncPostBackTrigger ControlID="ddl1" EventName="SelectedIndexChanged" />16</Triggers>17<ContentTemplate>18<asp:GridView ID="gdvResearch" runat="server" AllowSorting="True" AutoGenerateColumns="False"19DataKeyNames="ResearchID" Width="100%" EnableViewState="False">21<Columns>24<asp:TemplateField>25<ItemTemplate>26<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="445px" Width="100%">27<cc1:TabPanel ID="TabPanel1" runat="server" Width="100%">28<HeaderTemplate>29<asp:Label ID="lblTab1" runat="Server" Text="<%$Resources:tab.1%>"></asp:Label>30</HeaderTemplate>31<ContentTemplate>32<div>33<!-- Information in Tab1... -->34</div>35</ContentTemplate>36</cc1:TabPanel>37<cc1:TabPanel ID="TabPanel2" runat="server">38<HeaderTemplate>39<asp:Label ID="lblTab2" runat="Server" Text="<%$Resources:tab.2%>"></asp:Label>40</HeaderTemplate>41<ContentTemplate>42<div>43<!-- Information in Tab2... -->44</div>45</ContentTemplate>46</cc1:TabPanel>47<cc1:TabPanel ID="TabPanel3" runat="server">48<HeaderTemplate>49<asp:Label ID="lblTab3" runat="Server" Text="<%$Resources:tab.3%>"></asp:Label>50</HeaderTemplate>51<ContentTemplate>52<div>53<!-- Information in Tab3... -->54</div>55</ContentTemplate>56</cc1:TabPanel>57</cc1:TabContainer>58</ItemTemplate>59</asp:TemplateField>60</Columns>61</asp:GridView>62</ContentTemplate>63</asp:UpdatePanel>

Hi,

Would you mind posting your code again without line number? It's hard to eliminate them.


OK, there you go.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true"><asp:ListItem Text="--Select a Category--" Value="0"></asp:ListItem><asp:ListItem Text="Category 1" Value="1"></asp:ListItem><asp:ListItem Text="Category 2" Value="2"></asp:ListItem><asp:ListItem Text="Category 3" Value="3"></asp:ListItem></asp:DropDownList><br /><asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="always"><Triggers><asp:AsyncPostBackTrigger ControlID="ddl1" EventName="SelectedIndexChanged" /></Triggers><ContentTemplate><asp:GridView ID="gdvResearch" runat="server" AllowSorting="True" AutoGenerateColumns="False"DataKeyNames="ResearchID" Width="100%" EnableViewState="False" ><Columns><asp:TemplateField><ItemTemplate><cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="445px" Width="100%"><cc1:TabPanel ID="TabPanel1" runat="server" Width="100%"><HeaderTemplate><asp:Label ID="lblTab1" runat="Server" Text="<%$Resources:tab.1%>"></asp:Label></HeaderTemplate><ContentTemplate><div><!-- Information in Tab1... --></div></ContentTemplate></cc1:TabPanel><cc1:TabPanel ID="TabPanel2" runat="server"><HeaderTemplate><asp:Label ID="lblTab2" runat="Server" Text="<%$Resources:tab.2%>"></asp:Label></HeaderTemplate><ContentTemplate><div><!-- Information in Tab2... --></div></ContentTemplate></cc1:TabPanel><cc1:TabPanel ID="TabPanel3" runat="server"><HeaderTemplate><asp:Label ID="lblTab3" runat="Server" Text="<%$Resources:tab.3%>"></asp:Label></HeaderTemplate><ContentTemplate><div><!-- Information in Tab3... --></div></ContentTemplate></cc1:TabPanel></cc1:TabContainer></ItemTemplate></asp:TemplateField></Columns></asp:GridView></ContentTemplate></asp:UpdatePanel>

I tried your code on my page, but can't reproduce the issue.

Here is my page, please try it to see if it works on your side.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { Northwind nt = new Northwind(); // the object used to get data from NorthWind database System.Data.DataTable dt = nt.GetBasicInformationOfAllEmployees(); gdvResearch.DataSource = dt; gdvResearch.DataBind(); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true"><asp:ListItem Text="--Select a Category--" Value="0"></asp:ListItem><asp:ListItem Text="Category 1" Value="1"></asp:ListItem><asp:ListItem Text="Category 2" Value="2"></asp:ListItem><asp:ListItem Text="Category 3" Value="3"></asp:ListItem></asp:DropDownList><br /><asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="always"><Triggers><asp:AsyncPostBackTrigger ControlID="ddl1" EventName="SelectedIndexChanged" /></Triggers><ContentTemplate><asp:GridView ID="gdvResearch" runat="server" AllowSorting="True" AutoGenerateColumns="False"Width="100%" EnableViewState="False" ><Columns><asp:TemplateField><ItemTemplate><ajaxtoolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="445px" Width="100%"><ajaxtoolkit:TabPanel ID="TabPanel1" runat="server" Width="100%"><HeaderTemplate><asp:Label ID="lblTab1" runat="Server" Text="aa"></asp:Label></HeaderTemplate><ContentTemplate><div><!-- Information in Tab1... --></div></ContentTemplate></ajaxtoolkit:TabPanel><ajaxtoolkit:TabPanel ID="TabPanel2" runat="server"><HeaderTemplate><asp:Label ID="lblTab2" runat="Server" Text="bb"></asp:Label></HeaderTemplate><ContentTemplate><div><!-- Information in Tab2... --></div></ContentTemplate></ajaxtoolkit:TabPanel><ajaxtoolkit:TabPanel ID="TabPanel3" runat="server"><HeaderTemplate><asp:Label ID="lblTab3" runat="Server" Text="cc"></asp:Label></HeaderTemplate><ContentTemplate><div><!-- Information in Tab3... --></div></ContentTemplate></ajaxtoolkit:TabPanel></ajaxtoolkit:TabContainer></ItemTemplate></asp:TemplateField></Columns></asp:GridView></ContentTemplate></asp:UpdatePanel> </div> </form></body></html>

Just trying...

What if you wrap your updatepanel inside something with a fixed width, like a table... I think your gridview's width of 100% "isn't sure" where to take the 100%... Also try giving your TabContainer a fixed width (in px)...