开发者

jQuery Accordion dynamically add more sections?

开发者 https://www.devze.com 2023-04-12 11:35 出处:网络
On my ASP.net MVC 3.0 I have a View looks in that i have a section of code <div id=\"accordion\">

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");
}
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号