jQuery Accordion dynamically add more sections?
On my ASP.net MVC 3.0 I have a View looks in that i have a section of code
<div id="accordion">
@Html.Action("Action", "Controller")
</div>
@Ajax.ActionLink("Add Another Content", "Action", "Controller", new AjaxOptions
{
UpdateTargetId = "accordion",
InsertionMode = InsertionMode.InsertAfter,
HttpMethod = "POST"
}, new { @class = "standard button", id = "AddAnother" })
The Generated HTML markup for the above code will look like this
<div id="accordion">
<h3><a href="#"> Title</a> </h3>
<div> Body Content </div>
</div>
<a href="Add" id="AddAnother"> Add</a>
Script i have on my page is like this
$("#AddAnother").click(function () {
$("#accordion").accordion('destroy');
$("#accordion").accordion();
$("#accordion").accordion("option", "active", ":last");
});
Every time if Add link is clicked it adds anot开发者_运维问答her h3/div section to with in the main accordion section as bellow
<div id="accordion">
<h3><a href="#"> Title</a> </h3>
<div> Body Content </div>
<h3><a href="#"> Title</a> </h3>
<div> Body Content </div>
<h3><a href="#"> Title</a> </h3>
<div> Body Content </div>
</div>
My Problem is. when ever add link is clicked it goes through three steps.
1)Destroy accordion
2)Recreate Accordion
3)Add New H3/Div
I don't want this way
I want is to follow this order
1) destroy accordion
2) Add new h3/div to the block
3) Recreate Accordion
Can any one help me to correct this in in my scrip
$("#AddAnother").click(function () {
$("#accordion").accordion('destroy');
$("#accordion").accordion();
$("#accordion").accordion("option", "active", ":last");
});
@Ajax.ActionLink("Add Another Content", "Action", "Controller", new AjaxOptions
{
UpdateTargetId = "accordion",
InsertionMode = InsertionMode.InsertAfter,
HttpMethod = "POST",
OnBegin = "destroyAccordion",
OnSuccess = "createAccordion"
}, new { @class = "standard button", id = "AddAnother" })
JS:
function destroyAccordion () {
$("#accordion").accordion('destroy');
}
function createAccordion() {
$("#accordion").accordion();
$("#accordion").accordion("option", "active", ":last");
}
精彩评论