ajax - scratch - Agregue elementos a un jQuery Accordion con jquery

jquery accordion from scratch

Question

Estoy usando el complemento jQuery accordion para hacer un acordeón de algunos datos. Entonces quiero que el usuario pueda agregar más datos al accordian. Configuré el acordeón para que funcione correctamente, luego hice una función que precede a un "elemento de lista" para el acordeón que coincide con la semántica del acordeón.

¿Es posible "actualizar" el acordeón para que funcione con el elemento recién agregado, sin guardar los datos nuevos en la base de datos y actualizar la página?

Algo como esto:

.accordion(''refresh'')

O algo así como el evento en vivo agregado en jQuery 1.3, ¿alguien tiene una pista?

Answer 1

Como necesitaba un trabajo de agregar / editar / eliminar elementos de acordeón Vor, pirateé estas pequeñas funciones de JavaScript para este propósito

http://jsfiddle.net/Sd6fC/

h3 y div necesitan una identificación única que se rige por la siguiente convención

<h3 id="divname_hitm_<uniquenumber>"><h3>

el div correspondiente necesita la siguiente

<div id="divname_ditm_<samenumber as h3"></div>

bloque de código de acordeón de muestra

<div id="divname">
    <h3 id="divname_hitm_1><a href="#">Section 1</h3>
    <div id="divname_ditm_1>
        <p>Section 1 Payload</p>
    </div>
    <h3 id="divname_hitm_2><a href="#">Section 2</h3>
    <div id="divname_ditm_2>
        <p>Section 2 Payload</p>
    </div>
</div>

¡Diviértanse tal vez ayude a algunas personas por ahí!

Answer 2

Como se mencionó anteriormente por Shahzad, jQuery UI 1.10 ha hecho esto más fácil; ver la documentación .

Answer 3

Es posible que desee ver el plugin LiveQuery: http://plugins.jquery.com/project/livequery

Le permite agregar eventos y enlaces después de que se carga el DOM.

Answer 4

No lo he probado, pero probablemente debería funcionar: di que tienes tu acordeón con id #accordion

$(''#accordion'').append(''<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>'')
    .accordion(''destroy'').accordion();

Básicamente, solo destruye y vuelve a crear el acordeón.

ACTUALIZAR:

Desde que se escribió esta respuesta, se ha agregado un método refresh () al widget de acordeón. Se puede invocar llamando:

$( ".selector" ).accordion( "refresh" );

Puedes leer más sobre este método here

Answer 5

Para agregar una nueva sección y mantener activa la anterior:

var active = $(''#accordion'').accordion(''option'', ''active'');
$(''#accordion'').append(''<h3><a href="#">New Paragraph</a></h3><div><p>New data</p></div>'')
    .accordion(''destroy'').accordion({ active: active});