it-swarm-eu.dev

Spuštění Javascriptu Pokud je v backendu přidán widget

Mám widgety, které mají ovládací prvky javascript připojené k nim.

Pokud je widget přítomen při načítání stránky administrátora widgetu, ovládací prvky fungují správně.

Když přidám nový widget, nepracují správně, dostanu označení, ale žádné události javascriptu se projeví.

Pokud uložím nový widget, když se formulář znovu načte, ovládací prvky jsou vytvořeny správně a nyní pracují.

Obnovení stránky také opravuje problém, ale pouze pro existující widgety. Nové widgety mají tento problém stále.

Konkrétně používám výběr na vybraných vstupech v těchto bodech:

  • dokument připraven
  • Ajaxcomplete

Ověřil jsem, že kód je spuštěn na každé události podle potřeby, ale výsledky nejsou očekávané.

Zde je testovací plugin, který demonstruje problém:

https://Gist.github.com/Tarendai/8466299

Uvidíte, že mám čítač, který se zvyšuje s každým vybraným prvkem, který zjistí, že může konvertovat.

Poznámky:

  • Když se stránka s widgety načte, vidím, jak se počítadlo zvyšuje v konzole JS podle očekávání
  • Když jsem přidal nový widget, kód je spuštěn, nicméně, to nedokáže najít žádné vybrané prvky, které může běžet na, jak je ukázáno found.length je 0. To by nemělo být případ, protože každý nový widget tohoto typu by měl mít prvek výběru
  • výběrové prvky mají třídu, která je má identifikovat, tato třída se odstraní, jakmile se použije výběrová knihovna, aby se zabránilo duplikaci a opětovnému zpracování existujících widgetů.
  • Před použitím selectize jsem použil Select2, který měl stejný problém
  • Při komentování kódu AJAX bych očekával, že nové widgety budou mít standardní výběr vstupu. Ne. Nevím, proč tomu tak je

Jak tedy mohu provést práci s ovládacím prvkem výběru, aniž bych uživateli před provedením změn sdělil, že má provést aktualizaci nebo kliknutí?

20
Tom J Nowell

Skvělá zpráva,

Opravil jsem to.

Ospravedlňuje se za to, že jste mi v úvodním komentáři nezmizeli a poskytli jste odpověď, kterou jste již provedli. To mě naučí odpovědět na telefon, když jsem ve vlaku!

Vaše použití ajaxstopu je správné. Peklo JS z velké části funguje správně, můžete vidět inicializované css styly a změny v DOM.

Problém spočívá ve skutečnosti s vaším voličem.

Je to proto, že obsah widgetu není načten v přes ajax, ve skutečnosti je klonuje z levého sloupce, kde je skrytý, a pak zavolá iax volání pro uložení pozice widgetu do pravého sloupce. To vysvětluje, proč ajaxstop pracuje na léčbě, i když je klonovaný obsah myšlenky. Protože je však v levém sloupci skrytá verze widgetu, váš JS je na tom instancí. Když jej přetáhnete na sloupec na pravé straně, dostanete klokovaný skrytý widget.

Musíte tedy vybrat ten, který je na levé straně. Níže je uveden opravený kód:

<script>
jQuery( document ).ready( function( $ ) {
    function runSelect() {
        var found = $( '#widgets-right select.testselectize' );
        found.each( function( index, value ) {

            $( value ).selectize();
                .removeClass( 'testselectize' )
                .addClass( 'run-' + window.counter );

            console.log( $val );
            window.counter++;
        } );
    }

    window.counter = 1;

    runSelect();

    $( document ).ajaxStop( function() {
        runSelect();
    } );
} );
</script>
12
MichaelJames

Jako @ aaron-holbrook komentoval čistší přístup bude dělat:

jQuery(document).on('widget-updated widget-added', function(){
    // your code to run
});

V mnoha případech budete také chtít spustit JS při načítání stránky, stejně jako při aktualizaci widgetů. Můžete tak učinit.

function handle_widget_loading(){
   // your code to run
}
jQuery(document).ready( handle_widget_loading );
jQuery(document).on('widget-updated widget-added', handle_widget_loading );

Jen vkládání zde pro odkaz jako odpovědi jsou mnohem snazší najít tyto komentáře

16
chifliiiii