JuiceUI Tabs control doesn't work after postback - juice-ui

I have a JuiceUI Tabs control with 2 tab pages. After a postback, clicking on the second tab doesn’t go to the tab page anymore for Chrome and Firefox.
I am using visual studio 2012, jquery 1.9.1, jquery-ui 1.10.1, and juiceui.
<form id="form1" runat="server">
<div style="font-size: 14px;">
<asp:Button ID="Button1" runat="server" Text="Update Tab" OnClick="Button1_Click" />
<br />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<juice:Tabs ID="Tabs1" runat="server">
<juice:TabPage ID="TabPage1" Title="First Tab" runat="server">
<TabContent>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label><br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<juice:Datepicker ID="Datapicker1" runat="server" TargetControlID="TextBox1" />
</TabContent>
</juice:TabPage>
<juice:TabPage ID="TabPage2" Title="Second Tab" runat="server">
<TabContent>
<asp:Label ID="Label2" runat="server" Text="Label 2"></asp:Label>
</TabContent>
</juice:TabPage>
</juice:Tabs>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</form>
This the server code:
public partial class WebForm4 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
Label lbl = (Label) TabPage1.FindControl("Label1");
if (lbl != null)
{
lbl.Text = DateTime.Now.ToString();
}
}
protected void Button1_Click(object sender, EventArgs e)
{
}
}

I couldn't reproduce the problem with Brew, which is a fork of Juice. If you get the chance, please give it a shot and let me know if you experience the same issue.

Related

Invalid case exception

In report page i have dropdown and datepicker fromdate and todate and button
so when i select values from dropdown and datepicker then this show error
on this line
dt=report(Convert.ToDateTime(fromdate), Convert.ToDateTime(todate), Convert.ToString(DropDownList1.SelectedValue));
error
An exception of type 'System.InvalidCastException' occurred in mscorlib.dll but was not handled in user code
Additional information: Unable to cast object of type 'System.Web.UI.HtmlControls.HtmlInputText' to type 'System.IConvertible'
.
code
protected void Button1_Click(object sender, EventArgs e)
{
dt=report(Convert.ToDateTime(fromdate), Convert.ToDateTime(todate), Convert.ToString(DropDownList1.SelectedValue));
GridView1.DataSource = dt;
GridView1.DataBind();
}
DataTable dt = new DataTable();
public DataTable report(DateTime fromdate,DateTime todate,string IMEI)
{
DateTime fromdatee = Convert.ToDateTime(Request.Form["fromdate"]);
DateTime todatee = Convert.ToDateTime(Request.Form["todate"]);
Entities track = new Entities();
DateTime fr_date = new DateTime(fromdatee.Year, fromdatee.Month, fromdatee.Day, 0, 0, 0);
DateTime t_date = new DateTime(todatee.Year, todatee.Month, todatee.Day, 23, 59, 59);
List<spGetReport_Result> report = track.spGetReport(IMEI,fr_date,t_date).ToList();
dt.Columns.Add("Time",typeof(DateTime));
dt.Columns.Add("X",typeof(float));
dt.Columns.Add("valuenumber",typeof(int));
foreach(var c in report)
{
dt.Rows.Add(c.Time, c.X, c.valuenumber);
}
return dt;
}
HTML
<form id="form1" runat="server">
<div>
<span>
<asp:DropDownList ID="DropDownList1" runat="server"></asp:DropDownList>
</span>
<span>
<input id="fromdate" runat="server" clientidmode="static" />
</span>
<span>
<input id="todate" runat="server" clientidmode="static" />
</span>
<span>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</span><br />
<asp:Label ID="Label1" style="margin-left: 220px;" runat="server" Text="Export to"></asp:Label>
<asp:GridView ID="GridView1" runat="server" class="display nowrap"
Width="100%" CellPadding="0"
Font-Names="Verdana" BackColor ="White" BorderColor="#CCCCCC" BorderStyle="None"
BorderWidth="1px" Font-Size="9pt">
<FooterStyle BackColor="White" ForeColor="#000066" />
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
<RowStyle ForeColor="#000066" />
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
<SortedAscendingCellStyle BackColor="#F1F1F1" />
<SortedAscendingHeaderStyle BackColor="#007DBB" />
<SortedDescendingCellStyle BackColor="#CAC9C9" />
<SortedDescendingHeaderStyle BackColor="#00547E" />
</asp:GridView>
</div>
</form>
Because you are sending Convert.ToDateTime the HTML control instead of the string to be converted.
You should be doing this:
dt = report(Convert.ToDateTime(fromdate.Value), Convert.ToDateTime(todate.Value), DropDownList1.SelectedValue);
A very simple debugging process would have quickly showed you where the problem was.
DropDownList1.SelectedValue is already a string, so no point in converting it.
Anyway, you should check first that what's in those inputs are really valid DateTime representations by using a validator.

CKEditor disappears on partial postback

I have a page that shows a ckeditor in an update panel. My page is as follows:
<form id="form1" runat="server">
<cc1:ToolkitScriptManager runat="server" ID="ToolkitScriptManager" EnablePartialRendering="true"></cc1:ToolkitScriptManager>
<div>
<asp:Label ID="Label1" runat="server" Text="Hello"></asp:Label><br />
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<script src="../../../../../ckeditor/ckeditor.js" type="text/javascript"></script>
<asp:TextBox class="ckeditor" ID="tbEditorHeader" runat="server" ClientIDMode="Static" TextMode="MultiLine" Columns="80" Rows="4"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
Has anyone seen this issue? Any known solutions?
Thanks for the help!!

C# Asp.net Ajaxcontroltoolkit multiple Accordion Panels. Show or Hide last panel if a checkbox is selected in first panel

<ajaxToolkit:Accordion ID="Accordion1" CssClass="accordion" SelectedIndex="0" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" AutoSize="None" RequireOpenedPane="false" ContentCssClass="accordionContent" runat="server">
<Panes>
<ajaxToolkit:AccordionPane ID="Pane1" runat="server">
<Header><b>Panel 1</b></Header>
<Content>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<br>
Age: <asp:textbox id="Age1" runat="server" Width="35" Font-Bold="True"/><br>
Attorney: <asp:CheckBox ID="Attorney" runat="server" /><br>
<asp:button ID="Button1" text="Submit" OnClick="Button1_Click"
runat="server"/><br>
<asp:label id="Message1" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True"/>
</ContentTemplate>
</asp:UpdatePanel>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="Pane2" runat="server">
<Header><b>Panel 2</b></Header>
<Content>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<br>
<asp:textbox id="Age2" runat="server" Width="35" Font-Bold="True"/><br>
<asp:button ID="Button2" text="Submit" onclick="Button2_Click"
runat="server"/><br><br>
<asp:label id="Message2" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True" />
</ContentTemplate>
</asp:UpdatePanel>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
protected void Button1_Click(object sender, EventArgs e) {
if (Attorney.Checked) {
Pane2.Visible = true;
} else {
Pane2.Visible = false;
}
//Message1.Text = Age1.Text;
}
I have five Accordion Panels. Last Panel should be displayed only if a checkbox is checked in the first panel. Inside each Accordion Panel I have a UpdatePanel and within that I have ContentTemplate with controls and submit button particular to that accordion panel. The reason I added UpdatePanel is so that when i update a particular panel it does not affect other accordion panels.
The problem is I need to toggle last accordion panel display depending upon if a checkbox is checked in the first Panel and submit button is clicked. In Code behind, in the btnSubmit1 event...I have code that says if checkbox is checked....Pane2.Visible = true else Pane2.Visible=false. For some reasons it still shows the LastPanel.
I am not sure where am I going wrong...please advise!
Thanks!
Jini
I fixed the problem by adding an outer update panel...and removed the updatepanel for Panel 2. Haven't tested it thoroughly but so far looks good.
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:UpdatePanel ID="OuterPanel" UpdateMode="Always" ChildrenAsTriggers="true" runat="server">
<ContentTemplate>
<ajaxToolkit:Accordion ID="Accordion1" CssClass="accordion" SelectedIndex="0" HeaderCssClass="accordionHeader"
HeaderSelectedCssClass="accordionHeaderSelected" AutoSize="None" RequireOpenedPane="false" ContentCssClass="accordionContent" runat="server">
<Panes>
<ajaxToolkit:AccordionPane ID="Pane1" runat="server">
<Header><b>Panel 1</b></Header>
<Content>
<br>
Age: <asp:textbox id="Age1" runat="server" Width="35" Font-Bold="True" /><br />
Attorney: <asp:CheckBox ID="Attorney" runat="server" /><br>
<asp:button ID="Button1" text="Submit" OnClick="Button1_Click"
runat="server"/><br>
<asp:label id="Message1" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True"/>
</Content>
</ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="Pane2" runat="server">
<Header><b>Panel 2</b></Header>
<Content>
<br>
<asp:textbox id="Age2" runat="server" Width="35" Font-Bold="True"/>
<asp:button ID="Button2" text="Submit" onclick="Button2_Click"
runat="server"/><br><br>
<asp:label id="Message2" runat="server" ForeColor="White" Font-Size="Small" Font-Bold="True" />
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>
</ContentTemplate>
I'd like to see your code to be sure, but I'm expecting it's because you have an UpdatePanel in each of the AccordionPanels. Once an event happens in one UpdatePanel, ASP.NET will not run code handling that event that is attached to another UpdatePanel.
First, I'd take out all UpdatePanels to see if your code works as expected. Then, I'd add one UpdatePanel wrapped around the entire Accordion and see if your code still works.
If you really decided you need to have 5 UpdatePanels, look into the <Triggers> portion of the UpdatePanel. You'll be able to provide the CheckBox's ID to force the other associated UpdatePanel to PostBack.

Unable to download file using AsyncPostBackTrigger in RadGrid

Hi all I am using RadGrid in my application, as I want my RadGrid not to refresh I had my RadGrid in an Update Panel as follows
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Always">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RadGrid1" EventName="ItemCommand" />
<%--<asp:PostBackTrigger ControlID="RadGrid1" />--%>
</Triggers>
<ContentTemplate>
<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" OnItemCommand="RadGrid1_ItemCommand"
OnNeedDataSource="RadGrid1_NeedDataSource">
<MasterTableView Width="950" AutoGenerateColumns="false" DataKeyNames="EmpID" GridLines="None"
TableLayout="Auto">
<Columns>
<telerik:GridBoundColumn DataField="EmpID" HeaderText="Emp ID" ReadOnly="true" HeaderStyle-HorizontalAlign="Left"
ItemStyle-HorizontalAlign="Left" UniqueName="EmpID" FilterControlWidth="30px"
AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" />
<telerik:GridButtonColumn DataTextField="ButtonName" ItemStyle-ForeColor="Blue" CommandName="Generate"
ConfirmTextFields="ButtonName" ConfirmTextFormatString="Would you like to {0} ACH file ?"
ConfirmDialogType="RadWindow" Reorderable="false" UniqueName="ButtonName" ConfirmTitle="ACH File">
</telerik:GridButtonColumn>
<telerik:GridBoundColumn DataField="EmployeeName" HeaderText="Employee Name" ReadOnly="true"
HeaderStyle-HorizontalAlign="Left" ItemStyle-HorizontalAlign="Left" UniqueName="EmployeeName"
FilterControlWidth="60px" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains" />
</Columns>
</MasterTableView>
</telerik:RadGrid>
</ContentTemplate>
</asp:UpdatePanel>
When I click on download button I am unable to download the file this is my code in Itemcommand
protected void RadGrid1_ItemCommand(object sender, Telerik.Web.UI.GridCommandEventArgs e)
{
if (e.CommandName == "Generate")
{
Response.ContentType = "text/plain";
Response.AppendHeader("Content-Disposition", "attachment;filename= errorLog.txt");
Response.AddHeader("content-length", "0");
Response.Flush();
Response.End();
}
}
Can some one help me how can I work out this using AsyncPostBackTrigger
You cannot call Response with AsyncPostBack. It is Ajax Framework limitation.
Updated 1/28/2013
Since you are using telerik, I prefer using RadAjaxManager. Basically, when Generate button is clicked, it uses regular post back instead of ajax. In my example, sorting still uses ajax.
<telerik:RadGrid ID="RadGrid1" AutoGenerateColumns="false" AllowSorting="True" runat="server"
OnNeedDataSource="RadGrid1_NeedDataSource" OnItemCommand="RadGrid1_ItemCommand">
<MasterTableView DataKeyNames="EmpID">
<Columns>
<telerik:GridTemplateColumn>
<ItemTemplate>
<asp:Button runat="server" CommandName="Generate" ID="GenerateButton"
Text="Generate" OnClientClick="Generate(this, event); return false;" />
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="EmpID" HeaderText="Emp ID" UniqueName="EmpID" SortExpression="EmpID" />
<telerik:GridBoundColumn DataField="EmployeeName" HeaderText="Employee Name" UniqueName="EmployeeName" />
</Columns>
</MasterTableView>
</telerik:RadGrid>
<%-- RadAjaxManager --%>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<%-- RadAjaxLoadingPanel --%>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">
</telerik:RadAjaxLoadingPanel>
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
<script type="text/javascript">
function Generate(sender, e) {
$find("<%= RadAjaxManager1.ClientID %>").__doPostBack(sender.name, "");
}
</script>
</telerik:RadCodeBlock>
public class Employee
{
public int EmpID { get; set; }
public string EmployeeName { get; set; }
}
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
RadGrid1.DataSource = new List<Employee>
{
new Employee {EmpID = 1, EmployeeName = "John"},
new Employee {EmpID = 2, EmployeeName = "Marry"},
new Employee {EmpID = 3, EmployeeName = "Eric"}
};
}
protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
if (e.CommandName == "Generate")
{
Response.ContentType = "text/plain";
Response.AppendHeader("Content-Disposition", "attachment;filename= errorLog.txt");
Response.AddHeader("content-length", "0");
Response.Flush();
Response.End();
}
}

Question about AJAX Update Panel

Here is the problem im having. I have 5 buttons on my form that appear next to each other (horizontal). 3 out of the 5 buttons had to be put in an update panel b/c these buttons have to do AsyncPostBack, the other 2 buttons need to be outside to do a postback. Everything works the way I would like accept that all the buttons dont appear on the same line. Is there anything I can do put get these 5 buttons to appear on the same line, given the different functionality of these buttons?
The UpdatePanel renders a <div> you need to style this div so that that it displays inline Notice the Style="display:inline" in the following code. There's other ways to accomplish this depending on your layout but this is the most straightforward.
<asp:UpdatePanel ID="UpdatePanel1" runat="server" Style="display:inline">
<ContentTemplate>
<asp:Label ID="labelText" runat="server" Text="Label" />
<asp:Button ID="Button1" runat="server" Text="Button1" />
<asp:Button ID="Button2" runat="server" Text="Button2" />
<asp:Button ID="Button3" runat="server" Text="Button3" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button4" runat="server" Text="Button4" />
<asp:Button ID="Button5" runat="server" Text="Button5" />
You don't have to have your buttons inside the UpdatePanel to make this work. You would simply need to define them as AsyncPostBackTriggers. You don't have to worry about breaking your layout then.
<div class="toolbar">
<asp:Button ID="Button1" runat="server" Text="Button1" />
<asp:Button ID="Button2" runat="server" Text="Button2" />
<asp:Button ID="Button3" runat="server" Text="Button3" />
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="labelText" runat="server" Text="Label" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
<asp:AsyncPostBackTrigger ControlID="Button3" EventName="Click" />
</Triggers>
</asp:UpdatePanel>

Resources