Develop Reference

ASP.NET C# JQueryUI How to save index of accordion in a dynamically created user control?

ASP.NET C# JQueryUI How to save index of accordion in a dynamically created user control?
I have a JQueryUI accordion inside a user control , which is dynamically created n times (based on a chosen number inside a ComboBox) from the main aspx page.
I have been using the following javascript code to save the index of accordions that occur once in the main aspx page, I have this once per accordion Control:
var activeAccordion1Item = document.getElementById("<%= HFaccordion1.ClientID %>");
var activeAccordion1 = 0;
if (activeAccordion1Item) {
activeAccordion1 = parseInt(activeAccordion1Item.value);
}
$("#accordion1").accordion({
collapsible: true,
heightStyle: "content",
active: activeAccordion1,
activate: function (event, ui) {
var i = $("#accordion1").accordion("option", "active");
var activeAccordion1Item = document.getElementById("<%= HFaccordion1.ClientID %>");
activeAccordion1Item.value = i;
}
});
And in aspx file:
<asp:HiddenField ID="HFaccordion1" runat="server" Value="0" />
I used this same approach for the one inside the user_control that can happen many times, and it also works, BUT the saved index is always the one from the first accordion, and that is shared among the rest.
So, if I have index 2 in accordion1, and index 1 in accordion2, and a control causes postback, after the postback, both accordion1 and accordion2 appear with index 2 active.
How can I modify the above code to work for the dynamically created accordions independently of each other?

You should change $("#accordion1").accordion to $(".acc").accordion. .acc is class of accordions for this example. You used $("#accordion1") that this worked with active accordion1.
Edit
You need save active accordions in a array (accordionsActivate) when click on each accordion and for getting this array, store array in hidden field (HFaccordions) like this:
<script>
var accordionsActivate = [];
$(document).ready(function () {
var $accordions = $(".acc").accordion({
collapsible: true
, active: false
, icons: false
}).on('click', function () {
if ($.inArray($(this).attr('id'), accordionsActivate) < 0) {
accordionsActivate.push($(this).attr('id'));
$('#<%=this.HFaccordions.ClientID%>').val(accordionsActivate.join());
}
else {
accordionsActivate.splice($.inArray($(this).attr('id'), accordionsActivate), 1);
$('#<%=this.HFaccordions.ClientID%>').val(accordionsActivate.join());
}
});
activeAccodions(); // Active accodions after postback
});
function activeAccodions() {
if ($('#<%=this.HFaccordions.ClientID%>').val() === "")
return;
activeAccardions = $('#<%=this.HFaccordions.ClientID%>').val().split(',');
for (var i = 0; i < activeAccardions.length; i++) {
accordionsActivate.push(activeAccardions[i]);
}
for (var i = 0; i < accordionsActivate.length; i++) {
$('#' + accordionsActivate[i]).accordion("option", "active", 0);
}
}
</script>
Online demo (fiddle)

Dynamically Loading DevExpress PageControl Tabs

Below is a simplified example of my view code. I would like to have DevExpress tabs such that each tab shares the content of a single div. The idea here is that I have a lot of HTML that will be displaying in these tabs and I don't want to bog down the browser with all of it at once. I would like to make it so when you select a tab the HTML in the shared div is deleted and then a new partial view is loaded through AJAX to repopulate the div and display on the screen. This way only a single tab would load on page load and when switching between tabs the HTML of the previous tab would be dropped to increase browser performance. Does anyone know how I might accomplish this? Thanks!
<%
Html.DevExpress().PageControl(settings =>
{
settings.Name = "pcGeneralTabs";
settings.Styles.Tab.Paddings.Padding = Unit.Pixel(5);
settings.Styles.ActiveTab.BackColor = Color.White;
settings.Styles.Tab.Height = Unit.Pixel(35);
settings.Width = Unit.Percentage(100);
settings.Height = Unit.Percentage(100);
settings.ClientSideEvents.ActiveTabChanged = #"
function(s, e) {
var tab = s.GetActiveTab().name;
//Implement loading of Tab content through AJAX
}";
settings.TabPages.Add(tab =>
{
tab.Name = "tbFirst";
tab.Text = "Summary Information";
});
settings.TabPages.Add(tab =>
{
tab.Name = "tbSecond";
tab.Text = "Financial Analysis";
});
}).Render();
%>

You can do it by changing following settings and methods:
Change Name and text properties for other tabs.
settings.TabPages.Add(tabpage =>
{
tabpage.Name = "TabPage1";
tabpage.Text = "Page 1";
tabpage.SetContent(() =>
{
ViewContext.Writer.Write(String.Format("<div id='{0}' >", tabpage.Name));
Html.RenderAction(tabpage.Name);
ViewContext.Writer.Write("</div>");
});
});
and ClientSideEvent:
function OnActiveTabChanging(s, e) {
var action = e.tab.name;
var actionUrl = window.location + "/Home/" + action;
$.ajax({
type: "POST",
url: actionUrl,
success: function (response) {
$("#" + action).html(response);
}
});
}
Add Method in your controller:
public ActionResult TabPage1()
{
return PartialView("PartialView1");
}

There is no built-in functionality to drop the already loaded HTML content. However, it is possible to enable the lazy/postponed tabs loading (i.e., creating a dynamic HTML content to speed up the initial rendering) while activating them for the first time via the PageControlSettings.CallbackRouteValues settings. Check out the Tab Strip
- AJAX demo to see how to accomplish this task.

checkbox status lost after update panel works

I have an update panel, which fires every third seconds. I have this code into my asp.net page
<div ID="campaignDiv" runat="server" >
<ul>
</ul>
</div>
and I add its content dynamically like this:
private string CreateLiCheckbox(string checkBoxText)
{
return string.Format("<li><span class=\"textDropdown\">{0}</span><input id=\"{1}\" value=\"{0}\" type=\"checkbox\"><label for=\"{1}\"></label></li>", checkBoxText, checkBoxText + "dropdownID");
}
if (!IsPostBack) {
List<string> comps = getCompainNames();
string html = "<ul>";
for (int i = 0; i < comps.Count(); i++) {
html = html + CreateLiCheckbox(comps[i]);
}
html = html + "</ul>";
campaignDiv.InnerHtml = html;
}
My problem
when the page loads, the checkboxes are like this:
Then, I change the values to these:
but when the update pannel works, the page returns to its default statues, where nothing of the checkboxes are selected
could you help please?

adding new LiteralControl to an aspx page, from aspx.cs

So basicly im adding elements to my html, via litterals from the backend.
It works great when using it in the asp content placeholders. But i need it to be another specific place on a specific page. Ive tryed making div's with runat="server" But it does not seem to work.. Does anyone have any experience with what i could use? This is part of my code:
foreach (var something in somethingelse)
{
this.Page.Form.FindControl("ContentPlaceholder1")
.Controls.Add(
new LiteralControl("It's a long list, so just typing this.")
);
}

You can use runat="server" on divs. For example:
<div id="myNewDiv" runat="server"></div>
and in the code behind:
myNewDiv.InnerHtml = "Some new text in the div";
If you need to create the divs dynamically you can do the following:
for (var i = 0; i < 10; i++)
{
var ele = new HtmlGenericControl("div")
{
InnerHtml = string.Format("new div {0}", i),
ID = string.Format("NewDiv_{0}", i)
};
Page.Form.FindControl("MainContent").Controls.Add(ele);
}
You can even push the new divs into an existing div which is anywhere in the ContentPlaceHolder:
var page = Page.Form.FindControl("MainContent").FindControl("myNewDiv").Controls;
for (var i = 0; i < 10; i++)
{
var ele = new HtmlGenericControl("div")
{
InnerHtml = string.Format("new div {0}", i),
ID = string.Format("NewDiv_{0}", i)
};
page.Add(ele);
}

Place a HTML tag in source as below
<table>
<tbody>
<-- Your literal control here -->
</tbody>
</table>
and in code behind set literal1.Text ="<tr><td>'"+ Your data here +"'</td></tr>" and it will work

How to delete dynamically created DIV controls dynamically

I created few div's dynamically using C#. Now I want to delete few div's from displayed div's using the div's ID, which created dynamically. I tried in many ways, but didn't solution. So please me to come up with solution. I have created around 200 nodes using below code. I would like to delete using content or div id. Please suggest me the best way to solve this.
public void draw_node(int id, int top, int left, string content)
{
string topstr = Convert.ToString(top) + "px";
string leftstr = Convert.ToString(left) + "px";
System.Web.UI.HtmlControls.HtmlGenericControl dynDiv =
new System.Web.UI.HtmlControls.HtmlGenericControl("DIV");
dynDiv.ID = "window" + Convert.ToString(id); // like window1, window2, window3
dynDiv.Attributes["class"] = "component window";
dynDiv.Style.Add(HtmlTextWriterStyle.Top, topstr);
dynDiv.Style.Add(HtmlTextWriterStyle.Left, leftstr);
dynDiv.InnerHtml = content; // some no. like 1, 2, 3, 4
this.Controls.Add(dynDiv);
}

you could use jquery (documentation):
<div class="container">
<div class="hello">Hello</div>
<div id="a" class="goodbye">Goodbye</div>
</div>
<script>
$('div').remove('.hello');
or
$('div').remove('#a');
</script>
or as dynamic funktion:
<script>
function removeDIVbyID(ID)
{
$('div').remove('#'+ID);
}
</script>