I have 2 sections of my website I am developing, a reference box that has a fixed width and a working box that has the same height as the content. I am trying to make it so the user can swap the content between the two boxes. I have the following type of setup in the aspx page:
<asp:panel id="pnlReference" runat="server" CssClass="referencePanel" >
<asp:panel id="pnlsection1" runat="server" >
Content....
</asp:panel>
</asp:panel>
<asp:linkbutton id="lbtSwapPanels" runat="server" />
<asp:panel id="pnlWorking" runat="server" CssClass="workingPanel" >
<asp:panel id="pnlSection2" runat="server" >
Content....
</asp:panel>
</asp:panel>
What I am trying to have occur is when I press the lbtSwapPanels linkbutton, it moves pnlSection1 into pnlWorking and pnlSection2 into pnlReference. The code I used to do this in the OnClick method was:
Control pane1, pane2;
pane1 = pnlWorking.Controls[0];
pane2 = pnlReference.Controls[0];
// Remove them from their respective panels
pnlWorking.Controls.Remove(pane1);
pnlReference.Controls.Remove(pane2);
// Add them to the opposite pane
pnlWorking.Controls.Add(pane2);
pnlReference.Controls.Add(pane1);
Unfortunately, this does not work. When I click the linkbutton, nothing happens. If I then do something to perform another postback the reference and working panels become empty. I assume this has to do with the change not being saved into Viewstate but I don't know how to get around that.
Does anyone have any ideas on how to do this?
Update: It seems that moving objects around with Jquery is causing issues with asp.net postbacks as well as making my asp.net ajax tabcontainer completely fail to function. After 2 swaps and postbacks, further postbacks cease to function at all. Here's the new code
<div id="referencePane">
<asp:panel id="pnlsection1" runat="server" >
Content with tab container
</asp:panel
</div>
Swap Panes
<div id="workingPane">
<asp:panel id="pnlsection2" runat="server" >
Content
</asp:panel>
</div>
Here's the javascript:
function SwapPanes() {
var pane1, pane2;
pane1 = $("#workingPane").html();
pane2 = $("#referencePane").html();
$("#workingPane").empty();
$("#referencePane").empty();
// Add them to the opposite pane
$("#workingPane").prepend(pane2);
$("#referencePane").prepend(pane1);
}
First postback causes the tabcontainer to fail (javascript exceptions claiming it's trying to create a tab container with teh same ID (only one exists in the original aspx page). Postbacks then proceed to do wierd stuff.
Have you thought about keeping the controls in the panel but just swapping the position of the panels? You can do this pretty easily in JQuery although you'll be using DIVS instead of ASP.NET panels. This is, again, quite easy since Panels just translate to DIVS in the end. I did this recently for a wizard-style questionnaire (moving from panels to divs) and I was surprised how easy it was.
Update: Note that, when you swap the div positions, you can change the style as well (again, easy in JQuery) so that the user won't have a jarring "why did these two things change position" experience.
The bottom line, really, is that I think you are trying to use a hammer to drive a screw. JQuery is the screwdriver you are looking for and learning it is very much worth your while!
Look into ASP.Net web parts. That will manage the whole thing for you in a dynamic and responsive way.
Related
I have an issue with maintaining scroll position.
I am almost positive that I have everything set correctly. I have updated my web config...
<pages maintainScrollPositionOnPostBack="true"
and everything seems to work fine UNTIL....
When ever my Gridview returns a lot of pages, like more than 50, sometimes upwards of 100 or more, I show 50 records per page. The farther into the Gridview, the more the scroll position is off.
So what I am saying is that for the first 20 plus pages or so, if I scroll down the page to the point where the top rows have moved off the screen and I enter Edit Mode, the correct record remains in view on Postback.
But if I am over say around 30 pages into the Gridview, the further in the worse it gets, when i enter Edit Mode I have to scroll back down to the location of the record that I selected to edit.
Any ideas on this one will be tested, my users are going nutts!!!
thanks again,
You could wrap the gridview in a div set with overflow:auto. Then with js reset the scroll position when the page loads. something like this.
<body onload="GetDivPosition()">
<form id="form1" runat="server">
<asp:HiddenField ID="hdnField" runat="server" Value="0" />
<div style="overflow:auto;" ID="gridArea" onscroll="SetDivPosition()">
<asp:GridView ID="yourGrid" runat="server">
.....
</asp:GridView>
</div>
<script language="javascript" type="text/javascript">
function GetDivPosition() {
var hdn = document.getElementById("hdnField");
document.getElementById("gridArea").scrollTop = hdn.value;
}
function SetDivPosition() {
var hdn = document.getElementById("hdnField");
hdn.value = document.getElementById("gridArea").scrollTop;
}
</script>
Visual studio will probably give you warnings that onscroll isn't valid but it has always worked for me. If your using an update panel it's a little more complicated. Actually all of mine are in update panels so I tried to revert this code back, so hopefully this will work for you.
The MaintainScrollPositionOnPostBack property only works in IE so unless this is an Intranet situation where everybody is using IE, then this is not a good solution. There are browserCaps hacks for other browsers but not even Microsoft supports this.
If you are using paging, then the simplest option is to reduce the number of records per page. Only other "clean" option remaining would be to roll your own jQuery solution.
Here's an approach without using the MaintainScrollPositionOnPostback property:
http://www.kodergurl.com/2010/08/maintain-scroll-position-on-post-back.html
I am using ASP.NET controls to fill in HTML for my jQTouch application, but I am having trouble with my hrefs ceasing to function as intended on my search page. The jQuery function for my anchor class evidently does not get called; it simply links back to the default page, even though the link is built similarly on other pages without any problems.
This is where my links are breaking:
<form id ="form1" runat="server" class="form">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel runat="server" ID="up1">
<ContentTemplate>
<ul class="rounded">
<li><asp:TextBox ID="txtSearchString" runat="server" name="search-articles" placeholder="Search GROK"></asp:TextBox></li>
<li><asp:Button ID="btnSearch" runat="server" Text="Search" type="rounded" OnClick="btnSearch_Click"></asp:Button></li>
</ul>
<asp:Literal ID="litSearchResults" runat="server"></asp:Literal> <%--HTML for jQTouch inserted here--%>
</ContentTemplate>
</asp:UpdatePanel>
</form>
This is an example of the HTML generated by code behind.
<ul class="edgetoedge"><li class="sep">Found 101 articles</li><li>PAWS: How to Access the Sample Test Database</li><li>Mac OS X: Hardware Test</li><li>The JavaScript Test</li><li>PAWS: Emergency Text Message Test</li><li>Definition: remote digital loopback test</li><li>Definition: power-on self test</li><li>Definition: power-on self test</li><li>AVG 9.0 Free Edition: Setting Scan Process Priority</li><li>Microsoft Office 2007: Diagnostics</li><li>Moodle: Description of Aggregation Methods</li><li>AVG 9.0 Free Edition: How can I run the complete scan of whole computer?</li><li>LSU A-Z: Office of Assessment and Evaluation</li><li>Linux: sed Insert a Newline Into the RHS of a Substitution</li><li>Microsoft PowerPoint 2007: Narrating a Slide</li><li>Ubuntu: Deleting Undeletable Files In the Trash</li><li>Linux: Remove All Digits/ Input From Inputs</li><li>SQL: Create a MySQL DocDB Databse</li><li>Linux Gnome: Screens and Graphics</li><li>Linux Xfce: Adjust keyboard settings</li></ul>
jQTouch handles every other tag normally, it is just the anchors that have ceased to function as intended by being placed inside this form. Can I keep using update panels here or will it inevitably break? Is there a work-around? Or am I approaching the problem incorrectly?
Keep in mind I want to retain the AJAXical animations produced by jQTouch. If you find that I am unclear or you would like to see more code (I only included what I believe to be necessary), please let me know.
Bonus points if you can tell me how to get jQTouch to replace the ugly the ASP.NET button control with an iPhoney button. :)
I think you are going to have to do a ton of hacks to get ASP.Net working with jqtouch with update panels, as you are going to be fighting the JavaScript inserted by ASP.Net with the JavaScript that jqtouch inserts. In your example all your links are going to the same anchor (#article). To do this in a jQtouch kind of way, you would have all the the links going to '#' and handle the tap of the articleLinkClass and then adjust as you need to.
$('.articleLink').tap(function()
{
var id = $(this).val('id');
// Pseudo CODE HERE FOR Setting up the article based on id... E.g.
$.json(jsonServiceUrl, { article_id: id }, function(data)
{
$('#article data).html(data);
});
jQt.goTo('article'); // Display the article page...
});
The iPhoney buttons are created in jQtouch as 's with their class as "whiteButton", i.e.:
<a id="myTestButton" class="whiteButton">Test Button</a>
Hope this helps...
I didn't want to have a ton of code on one page, but to keep the code modular and simple. So in my TabContainer I have the following where each tab refers to a web page and my code is inside each web page. My TabContainer itself is inside the default.aspx page.
<asp:TabContainer ID="tabTOL" runat="server" ActiveTabIndex="0" CssClass="tol">
<asp:TabPanel ID="tabHome" runat="server" TabIndex="0" HeaderText="Home">
<ContentTemplate>
<iframe src="Home.aspx"></iframe>
</ContentTemplate>
</asp:TabPanel>
...
Of course, the problem is that I cannot refer to other tabs or the TabContainer/default page from within any tab. I'm trying to update a TextBox on the default.aspx page from a tab, but there is no reference to it.
Should I bite the bullet and have one huge web page with all the html and code behind? There are a dozen tabs in my TabContainer. I would think this would slow down processing as well. Or, is there a cleaner way to do this and still retain the ability to reference controls on the main page or other tabs?
I'm working in VS2008 and .Net 3.5 and AJAX 3.5.
Thanks!!
Larry
I would suggest that you change the structure of Home.Aspx into a Web User Control (*.ascx). The advantage is that you are now running within the context of the parent page. Therefore all it's functionality is within reach. For example, to acces a textbox on the parent page, from the Home.Ascx, you would do this:
((Default)this.Parent).txtMyTextBox.Text = "Hello";
I have 3 different kinds of ajax popups that need to exist across my site. I was hoping that I could simply create a user control for each one and place the panel and modal popup extender inside each one but this doesn't seem to be working. Has anyone tried this before or do you have a recommendation as to how I can avoid duplicate code for each pop up on different pages? Thanks!
Ah I figured out my issue with the User Control I believe.
The ModalPopUpExtender requires the TargetID property to be set otherwise an error occurs. Since this is sitting in a UserControl I just created a dummy link button that doesn't do anything and I set the property visible to false.
<asp:LinkButton ID="lnkBlank" runat="server" Visible="false" />
<asp:Panel ID="plContainer" style="display: none;" runat="server">
Hello?
</asp:Panel>
<cc1:ModalPopupExtender ID="mpe" runat="server"
BehaviorID="test"
TargetControlID="lnkBlank"
PopupControlID="plContainer" />
Apparently it doesn't appreciate that and the moment I set the visible property to true it started working. Not sure what the reasoning is for a TargetID since, I would think, most pop ups could be called from multiple links about the page. Perhaps I'm still not entirely clear on how this control is supposed to be used.
One option would be to write the popups in a asp.net user control (a .ascx page) and include that on the pages you need the popups. Have a public method in the ascx page that will show the popup, and call it from the parent page when you need to. If you already have a script manager on the parent page, you can't have a second one in the ascx page, but other then that there shouldn't be anything that would stop this from working. Hope this helps!
edit: here's what my modal popup extender control looks like...
<cc1:ModalPopupExtender
ID="mpeClassroom"
BackgroundCssCLass="modalBackground"
runat="server"
CancelControlID="lbClose"
OnOkScript="onOk()"
TargetControlID="Button1"
PopupControlID="pnlClassroom">
</cc1:ModalPopupExtender>
in my code behind page, my method just calls mpeClassroom.Show();
The problem with hidden link as TrgetControlID is that; when u set its visibility as false, server doesn't render it as well. PopExtender then cannot find control on the page.
Instead of setting its visibility to false, try to apply a style with display:none. This should work !
I have a gridview that is within an updatepanel for a modal popup I have on a page.
The issue is that the entire page refreshes every time I click an imagebutton that is within my gridview. This causes my entire page to load and since I have grayed out the rest of the page so that the user cannot click on it this is very annoying.
Does any one know what I am missing.
Edit: I entered a better solution at the bottom
Make sure you have the following set on the UpdatePanel:
ChildrenAsTriggers=false and UpdateMode=Conditional
do you have ChildrenAsTriggers="false" on the UpdatePanel?
Are there any javascript errors on the page?
I had this problem and came across the following article:
http://bloggingabout.net/blogs/rick/archive/2008/04/02/linkbutton-inside-updatepanel-results-in-full-postback-updatepanel-not-triggered.aspx
My button wasn't dynamically created in the code like in this example, but when I checked the code in the aspx sure enough it was missing an ID property. On adding the ID the postback became asynchronous and started to behave as expected.
So, in summary, check your button has an ID!
Are you testing in Firefox or IE? We have a similar issue where the entire page refreshes in Firefox (but not IE). To get around it we use a hidden asp:button with the useSubmitBehavior="false" set.
<asp:Button ID="btnRefresh" runat="server" OnClick="btnRefresh_Click" Style="display: none" UseSubmitBehavior="false" />
Several months later this problem was fixed. The project I was working in was a previous v1.1 which was converted with 2.0. However, in the web.config this line remained:
<xhtmlConformance mode="Legacy"/>
When it was commented out all of the bugs that we seemed to have with the ajax control toolkit disappeared
Is the Modal Window popped up using the IE Modal window? Or is it a DIV that you are showing?
If it is an IE Modal Pop up you need to ensure you have
<base target="_self" />
To make sure the post back are to the modal page.
If it is a DIV make sure you have your XHTML correct or it might not know what to update.
I would leave the onClick and set it as the trigger for the updatePanel.
That's odd that it works in FF and not IE. That is opposite from the behavior we experience.
UpdatePanels can be sensitive to malformed HTML. Do a View Source from your browser and run it through something like the W3C validator to look for anything weird (unclosed div or table being the usual suspects)
If you use Firefox, there's a HTML validator Extension/AddOn available that works quite nicely.
For reference..
I've also noticed, when using the dreaded <asp:UpdatePanel ... /> and <asp:LinkButton ... />, that as well as UpdateMode="Conditional" on the UpdatePanel the following other changes are required:
ViewStateMode="Enabled" is required on <asp:Content ... /> (I've set it to Disabled in the MasterPage)
ClientIDMode="Static" had to be removed from <%# Page ... />
To prevent post-backs add return false to the onclick event.
button.attribute.add("onclick","return false;");
Sample:
string PopupURL = Common.GetAppPopupPath() + "Popups/StockChart.aspx?s=" + symbol;
hlLargeChart.Attributes.Add("onclick", String.Format("ShowPopupStdControls(PCStockChartWindow,'{0}');return false;", PopupURL));