Forum PHP.pl

Cześć.
Mam problem z podpinaniem js'ów do elementów pobieranych ajaxowo. Dobry przykład jest z dropzone.js
Pobieram część strony za pomocą ajax'a. Na końcu jest skrypt:

[HTML] pobierz, plaintext 
<script>
    Dropzone.options.myAwesomeDropzone = {
        autoProcessQueue: true,
        uploadMultiple: true,
        parallelUploads: 100,
        maxFiles: 100,
        init: function() {
            var myDropzone = this;
 
            this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
                e.preventDefault();
                e.stopPropagation();
                myDropzone.processQueue();
            });
            this.on("sendingmultiple", function() {
            });
            this.on("successmultiple", function(files, response) {
            });
            this.on("errormultiple", function(files, response) {
            });
        }
 
    }
</script>
[HTML] pobierz, plaintext 

Próbowałem dać bez document ready ale też nie działało.

Zdarzenia można przypiąć tylko do istniejących elementów. Dlatego w Twoim wypadku musisz przypinać dropzone'y przy każdym zakończeniu żądania ajaksowego.

Tak, wiem o tym. Mój problem polega na tym iż skrypt jest na końcu zawartości widoku który ajax mi zwraca, tj:

[HTML] pobierz, plaintext 
<div class="col-md-8">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>Dodaj nowe zadanie</h5>
            <div class="ibox-tools">
 
            </div>
        </div>
        <div class="ibox-content">
            <form method="get" class="form-horizontal">
                <div class="form-group"><label class="col-sm-2 control-label">Nazwa: </label>
 
                    <div class="col-sm-10"><input type="text" class="form-control"></div>
                </div>
                <div class="hr-line-dashed"></div>
                <div class="form-group"><label class="col-sm-2 control-label">Opis: </label>
                    <div class="col-sm-10">
                        <textarea class="form-control" rows="10"></textarea>
                    </div>
                </div>
                <div class="hr-line-dashed"></div>
                <form id="my-awesome-dropzone" class="dropzone" action="#">
                    <div class="dropzone-previews"></div>
                    <button type="submit" class="btn btn-primary pull-right">xXx</button>
                </form>
                <div class="hr-line-dashed"></div>
                <div class="form-group">
                    <div class="col-sm-4 col-sm-offset-2">
                        <button class="btn btn-white" type="submit">Anuluj</button>
                        <button class="btn btn-primary" type="submit">Dodaj</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="col-md-4">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>Komunikacja</h5>
            <div class="ibox-tools">
                <a class="collapse-link binded">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                    <i class="fa fa-wrench"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                    <li><a href="#">Config option 1</a>
                    </li>
                    <li><a href="#">Config option 2</a>
                    </li>
                </ul>
                <a class="close-link binded">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">
            <div>
                <div class="feed-activity-list">
                    <div class="feed-element">
                        <div class="media-body form-group">
                            <textarea class="form-control" placeholder="Wiadomość"></textarea>
                            <div class="pull-right">
                                <button type="button" class="btn btn-xs btn-primary" style="margin-top: 5px;">Wyślij wiadomość</button>
                            </div>
                        </div>
                    </div>
                </div>
                <button class="btn btn-primary btn-block m-t"><i class="fa fa-arrow-down"></i> Show More</button>
            </div>
        </div>
    </div>
</div>
<script>
    Dropzone.options.myAwesomeDropzone = {
        autoProcessQueue: true,
        uploadMultiple: true,
        parallelUploads: 100,
        maxFiles: 100,
        init: function() {
            var myDropzone = this;
 
            this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
                e.preventDefault();
                e.stopPropagation();
                myDropzone.processQueue();
            });
            this.on("sendingmultiple", function() {
            });
            this.on("successmultiple", function(files, response) {
            });
            this.on("errormultiple", function(files, response) {
            });
        }
 
    }
</script>
[HTML] pobierz, plaintext 

Dodam że ten sam problem mam przy np: http://abpetkov.github.io/switchery/

Ten post edytował NickOver 17.11.2015, 15:18:34

Bo Ajax takich skryptów nie wykonuje. Musiałbyś parsować odpowiedź, wyciągać te skrypty i odpalać przez eval… albo zmienić sposób zwracania odpowiedzi i kod js przerzucić do miejsca, z którego żądania wykonujesz

Ok. Przerobiłem wszystko w taki sposób aby zwracał mi json'a z tablicą:
-page - zawartość jaka ma się wyświetlić - działa bez problemu.
-script - skrypt js'owy i tu zaczynają się schody ponieważ nadal to nie działa.
Gdy dam console.log('asd'); jest ok, ale przy skrypcie z posta wcześniej nic nie działa. Dumpując co zwraca po eval mam obiekt, niestety i tak nie jest on podpinany. Pierwsza moja myśli to że jednocześnie to wszystko odpala, tj. w tym samym momencie przez co tworzy się ten obiekt, ale nie podpina się pod id więc dałem wszystko w

[HTML] pobierz, plaintext 
setTimeout(skrypt, 3000);
[HTML] pobierz, plaintext 

, niestety to nie pomogło. Następnie wszystko wrzuciłem w funkcję którą chciałem odpalić z konsoli. Niestety chcąc odpalić ją z konsoli dostałem "is not defined". Może jeszcze wrzucę skrypt który jest odpowiedzialny za obsługę tego jsona:

[HTML] pobierz, plaintext 
$("body").on("click", ".ajax-menu", function(e){
	e.preventDefault();
	var url = $(this).attr('href');
	$.ajax({
		method: "POST",
		url: url,
	})
	.done(function(json){
		data = $.parseJSON(json);
		$('.page-content').html(data.page);
		eval(data.script);
	});
});
[HTML] pobierz, plaintext 

Mógłby mi ktoś powiedzieć co robię źle?

Ten post edytował NickOver 17.11.2015, 17:59:08

Czy data.script zawiera znaczniki <script>?

Nie

A zwykły alert w kodzie w data.script? Działa?

A dropzone.js jest dołączany gdzieś po drodze?

Tak se myślę czy nie da się ominąć eval przy pomocy dynamicznie stworzonego script, hm

Tak.


Tak. dropzone.js jest ładowany razem ze stroną.

A alert w metodzie init DropZone działa?
Wygląda na to, jakbyś nie incjalizował tego modułu. To co robisz to tylko ustawienia opcji (co prawda jest tam metoda init, ale wywoływana przy nadrzędnej inicjalizacji, coś ala onload).

Ten post edytował trueblue 17.11.2015, 19:39:27

Ok, ogarnąłem w czym jest problem. Mianowicie plik jest jednocześnie wyzwalaczem (co jest według mnie bez sensu, taka mała dygresja). Wyrzuciłem pobieranie tego pliku, teraz pobiera go jquerowe getScript(), niestety to nadal nie rozwiązuje problemu. Funkcja zwraca mi sukces, ale nadal nie chce się podpiąć. Niezrażony próbami wrzuciłem pobrany plik w eval();, niestety nieskutecznie. Ale zauważyłem że mam formularz w formularzu. Usunąłem więc jeden, ale i to nie przyniosło rezultatu (z eval i bez niego na zmiennej ze skryptem) Macie jeszcze jakieś pomysły? A może znacie godny polecenia plugin do wrzucania plików "drag & drop"?

Czyli jest właśnie tak, że fragment, który podałeś odpowiada tylko za parametry, a sama inicjalizacja zaszła już wcześniej.

Czy czasem ta opcja nie jest użyteczna:
// Disable auto discover for all elements:
Dropzone.autoDiscover = false;
?

Lub .disable(), obecny skrypt (ustawienie opcji), enable().