Dynamiczne wczytywanie podstron - niedziałający JavaScript

0

Witam, mam problem z działaniem skryptów na podstronach ładowanych dynamicznie, a mianowicie: Wczytuje dane pod zakładki witryny ajaxem, w niektórych zakładkach są skrypty, które wykonują się po wczytaniu danej podstrony np skrypty odpowiadające za wygląd listy rozwijanej. Mój problem polega na tym, że jak wczytam daną podstronę dynamicznie, to skrypty na tej witrynie już nie działają.

jQuery.ajax({
					type: "GET",
					url: url,
					data: getData,
					cache: false,
					dataType: "html",
					success: function(data) {tutaj wczytuje treść do diva, treść która np zawiera <script>console.log('test');</script> i ten skrypt się nie wykonuje po wykonaniu żądania. Po normalnym odświeżeniu działa}
 

Próbowałem już z .on, .live, .bind itp. ale nic nie działa. Ma ktoś może jakiś pomysł?

0

pobieranie tagów <script> z kodem to zupełnie zła droga.
wrzuć KONKRETNY przykład, gdzie Ci on nie działa, jakie zdarzenie przypinasz, jaki masz html i co konkretnie zwraca cały ajax - wskażemy Ci błąd.

0

Przykładowo mam stronę główną index.html oraz podstronę lista.html. Zrobiłem przechodzenie między stronami ajaxem. Na stronie lista.html mam listę rozwijaną stylizowaną dodatkiem //harvesthq.github.io/chosen/ i skrypty są ładowane wyłącznie na tej stronie lista.html. Problem jest taki, że podczas pobierania zawartości z lista.html, javascript zawarty w lista.html się nie wykonuje, czyli nie działa chosen.

kod lista.html:


<script>
        console.log('czy to sie laduje?');
        var config = {
          '.find-chosen-select'           : {width:"inherit"},
          '.find-chosen-select'  : {allow_single_deselect:true},
          '.find-chosen-select' : {disable_search_threshold:10},
          '.find-chosen-select': {no_results_text:'Oops, nothing found!'},
          '.find-chosen-select'     : {width:"180px"}
        }
        for (var selector in config) {
          $(selector).chosen(config[selector]);
        }

</script>
<select class="find-chosen-select" data-placeholder="Opcje" tabindex="2" id="lista"> 
      <option value="1">opcja1</option>
      <option value="2">opcja2</option>
      <option value="3">opcja3</option>
      <option value="4">opcja4</option>
      <option value="5">opcja5</option>
</select> 
 

próbowałem już z $(document).on('ready', function(){...});

0

czyli ten kod który wrzuciłeś jest ładowany ajaxem? to nie masz po co podpinać go w document.ready, bo ten trigger został już odpalony wcześniej. Natomiast wpisany w <script> raczej powinien zadziałać - pokaż czy nie masz jakiegoś błędu w konsoli firebuga albo czegoś takiego.

0

Już mi działa ładowanie skryptów, zrobiłem jeden problem w wczytywaniu danych. Teraz mam trochę inny problem, jak odpalić ponownie funkcje, które standardowo odpalają się po odświeżeniu strony np:
Podczas wejścia do index, zostaje wysyłane żądanie, które pobiera mi z bazy dane. Następnie przechodzę ajaxem, do zakładki list, potem ponownie chce przejść ajaxem do strony głównej, ale wtedy już nie uruchamia się to żądanie wczytujące dane z bazy do strony głównej.

Edit:

znalazłem małe rozwiązanie, które nie działa do końca, a mianowicie wywołanie po wczytaniu danych ajaxem funkcji $(document).trigger("ready"); teraz odpala mi skrypty, ale jak przejdę ponownie na stronę główną, to wykona się dwa razy wywołanie, jak kliknę kolejny raz "home", to wywoła się 3 razy, potem 4, 5 itd. Czy ktoś wie co zrobić, żeby skrypty po każdym ponownym kliknięciu wykonały się tylko jeden raz?

0

Triggerowanie ready mi się wydaje.. dziwne.
Ja robię to tak, że mam jedną funkcję, którą wywołuję w ready, np. function gotowe() { /* dodaje zdarzenia */ }
Potem przy wywołaniach ajaxowych "ręcznie" wywołuję gotowe();

A jak uniknąć podwójnego bindowania? Albo przy bindowaniu dodaj do elementów jakąś klasę, i wybieraj elementy, które tej klasy nie mają:

$('a:not(.event_attached)').addClass('events_attached').click(function() { /* ... */ });

Albo po prostu odbinduj wszystkie eventy i zabinduj jeszcze raz - żeby uniknąć ew. odbinowania innych zdarzeń - nadawaj zdarzeniom klasę, a więc coś takiego:

$('*').unbind('.myevents');

a przy dodawaniu zdarzeń musisz zastąpić "skrótowe" click, hover itd i pisać:

$('a').bind('click.myevents', function() { /* ... */ });

1 użytkowników online, w tym zalogowanych: 0, gości: 1