JQuery und Javascript .load ruft das Javascript kein zweites Mal auf

#1
Hallo,

ich hab ein Problem.

Und zwar hab ich ein Menü:

Code:
    <ul>
        <li id="settingscompany"><a id="showsettingscompany" href="#">Einstellungen</a></li>
        <li id="user"><a id="user" href="#">Benutzer</a></li>
        ...
    </ul>
Wenn ich auf Einstellungen klicke, dann wird folgendes aufgerufen:

Code:
$( "#settingsfeatures" ).click(function() {
  $('#settingscontent').load('settingsfeatures.html');   
});
In der Datei settingsfeatures.html habe ich folgende Initialisierung des Plugins https://www.dropzonejs.com :

Code:
    <form id="uploadCompanyPicture" action="" class="dropzone"></form>
<script>
  $(".dropzone").dropzone({ init: function() {     
 ...
 }); 
</script>
Dropzone dienst dazu, Dateien hochzuladen, z. B. Bilder. Den Code habe ich jetzt gekürzt, weil es zu umfangreich wäre...

Das Problem ist jetzt, dass wenn ich im Menü auf den Menüpunkt "Einstellungen" gehe, dann ein Bild hochlade und auf "Benutzer" und dann wieder zurück auf "Einstellungen" gehe, dass dann immer noch das alte Bild angezeigt wird. Es scheint so, dass dieser Codeabschnitt:

Code:
<script>
  $(".dropzone").dropzone({ init: function() {     
 ...
 }); 
</script>
nicht neu geladen wird.

Wie kann ich erreichen, dass mit

Code:
  $('#settingscontent').load('settingsfeatures.html');
der JavaScript Code nochmal neu geladen wird?

Danke!
 

asc

Well-Known Member
c-b Experte
#2
Javascript:
$('#settingscontent').load('settingsfeatures.html', function () {
    $(".dropzone").dropzone({ init: function() {     
         ...
     });
})
 
#3
Javascript:
$('#settingscontent').load('settingsfeatures.html', function () {
    $(".dropzone").dropzone({ init: function() {    
         ...
     });
})
Hallo,

hab's versucht. Leider habe ich dasselbe Problem.

Hier mein Codeabschnitt:

Code:
$('#settingscontent').load('settingscompany.html', function() {
                  $(".dropzone").dropzone({ ... })

                  });                           
                  
             });
Das Problem ist folgendes:

1.) Ich ziehe das Bild dort rein. Dann ziehe ich noch ein Bild da rein. Dann klicke ich auf "Benutzer" und dann zurück auf "Einstellungen". Und das alte Bild wird immer noch angezeigt.

Wenn ich den Browser schließe und die Seite nochmal neu lade, funktioniert es. Als Browser wird Chrome benutzt, bzw. das Electron Framework https://electronjs.org/ .
 

asc

Well-Known Member
c-b Experte
#4
Verstehe, du willst die hochgeladenen Dateien (bzw. die "gedroppten" Dateien) entfernen.
Ich befürchte da kommt die jQuery Variante an ihre Limits und du musst es über den direkten Weg versuchen:

Statt:
Javascript:
$(".dropzone").dropzone({ init: function() {    
...
});
... musst du das Ganze so initialisieren, damit man mit der Instanz arbeiten kann:
Javascript:
var myDropzone = new Dropzone($('.dropzone').get(0), {
    init: function () { ... }
});
Jetzt kannst du die Dateien aus der Dropzone entfernen wenn man auf den "Einstellungen" Tab klickt:
Javascript:
$('#settingscontent').load('settingsfeatures.html', function () {
    myDropzone.removeAllFiles();
})
 
#5
Hallo,

das entfernt mir jetzt das Bild, was ich hochgeladen habe und es wird nichts mehr angezeigt... :-(

Hier noch ein ausführlicherer Code-Abschnitt:

Code:
var myDropzone = new Dropzone($('.dropzone').get(0), {
    init: function() {                   
        var me = this;
        
        $.getJSON(webserverurl + '?sessionid=' + sessionkey + '&settings=true&company=checkPhotoExists', function( json ) {
          if(json.STATUS == 'OK') {
              var mockFile = { name: "Firmenlogo", dataURL: getcompanypicture, accepted: true };
              me.createThumbnailFromUrl(mockFile, getcompanypicture);
              me.files.push(mockFile);
              me.emit('addedfile', mockFile);
              me.emit('thumbnail', mockFile, getcompanypicture);
              me.emit('complete', mockFile);
          }
        });
      
        this.on("addedfile", function() {
            if (this.files[1]!=null){
              this.removeFile(this.files[0]);
            }
          });
      
        this.on("maxfilesexceeded", function(file) {
          this.removeAllFiles();
          this.addFile(file);
        });
        },  url: uploadcompanypicture, parallelUploads: 1, maxFiles: 1, addRemoveLinks: true, removedfile: function(file){
        var name = file.name;     
      
        deletePhoto();
      
        var _ref;
        return (_ref = file.previewElement) != null ? _ref.parentNode.removeChild(file.previewElement) : void 0;
      },
      ...
});
Was ich mache, ist nichts anderes, als nur 1 Bild zu erlauben. Dieses Bild wird vom Server geholt. Es wird auch beim ersten mal angezeigt.

Wenn ich deine Codeabschnitte umsetze, dann wird gar nichts mehr angezeigt. :-(

Ich will auch nicht das Bild entfernen, sondern das Problem ist folgendes:

1.) Ich lade ein Bild hoch (z. B. image1.jpg)
2.) Ich lade ein zweites Bild hoch (z. B. image2.jpg)
3.) Nun klicke ich auf einen Menüpunkt und es wird eine andere Seite angezeigt mit der JavaScript load() Funktion.
4.) Nun klicke ich wieder zurück zur Bilderupload-Seite.
5.) Es wird immer noch image1.jpg angezeigt, nicht image2.jpg... Warum?
6.) Würde ich den Browser neu starten, dann wird image1.jpg angezeigt, das ist auch korrekt...
 
#6
Mal sehen, ob ich das richtig verstehe:
Wenn Du auf eine andere Seite wechselst und dann zurück zur Upload-Seite, wird letztere mit jQuery-load neu geladen und Dropzone initialisiert. D. h. ich würde erwarten, dass sich der Grundzustand einstellt. Insofern ist das, was Du beschreibst, das, was zu erwarten ist und um die Anzeige des zweiten Bildes wiederherzustellen, müsste man zusätzliche Maßnahmen ergreifen, den letzten Zustand speichern und wieder laden und anzeigen, wenn die Seite wieder geladen wird.
 
#7
Wenn Du auf eine andere Seite wechselst und dann zurück zur Upload-Seite, wird letztere mit jQuery-load neu geladen und Dropzone initialisiert. D. h. ich würde erwarten, dass sich der Grundzustand einstellt.
Tut es aber nicht! Das alte Bild ist immer noch vorhanden.

Also ich lade ein Bild hoch (image1.jpg). Dann lade ich ein zweites Bild hoch (image2.jpg). Dann wechsele ich auf eine andere Seite und dann wieder zurück und es wird immer noch image1.jpg angezeigt. Warum?

Insofern ist das, was Du beschreibst, das, was zu erwarten ist und um die Anzeige des zweiten Bildes wiederherzustellen, müsste man zusätzliche Maßnahmen ergreifen, den letzten Zustand speichern und wieder laden und anzeigen, wenn die Seite wieder geladen wird.
Ja, irgendwie so. Wobei, eigentlich ist das Bild auf dem Server stets aktuell. Wenn ich image1.jpg hochlade und dann image2.jpg, dann ist image2.jpg in der Datenbank.

Ehm. Noch was. Wenn ich folgenden Code einfüge:

Code:
var myDropzone = new Dropzone($('.dropzone').get(0), {
                      init: function() {                     
                          alert('Ja');
                    }
                 });
Und dann wechsle ich vom Upload-Menüpunkt zu einem anderen und dann zurück, dann wird richtigerweise alert('Ja') aufgerufen.

Auch wenn ich das hier mache:

Code:
var myDropzone = new Dropzone($('.dropzone').get(0), {
                      init: function() {                     
                          var me = this;
                          
                          $.getJSON(webserverurl + '?sessionid=' + sessionkey + '&settings=true&company=checkCompanyPhotoExists', function( json ) {
                            if(json.STATUS == 'OK') {
                                alert('Ja');
                           } });
                    }
               });
Warum wird dann das Bild nicht neu vom Server geladen?
 
#8
Eines verstehe ich noch nicht: Was ist das für ein Bild, das Du da mit getJSON holst? Ich vermute, dass es eine Art Default-Bild ist, das nach der Initialisierung angezeigt wird, bevor Bilder hochgeladen werden?

Ein Hinweis ins Blaue: Eine mögliche Quelle für Probleme beim Laden mit Ajax ist der Cache des Browsers. Ist dieses Bild immer das selbe? Wenn nicht, versuche, das Neuladen zu erzwingen, indem Du z. B. die Zeit in die URL einfügst:
$.getJSON(webserverurl + '?time=' + Date.now()' + '&sessionid=' + sessionkey

Am besten wäre es, wenn man das mit dem Debugger untersuchen könnte. Kannst Du die URL posten? Gibt ja sicher einen Weg, Testbilder wieder zu entfernen, wenn das Problem gelöst ist.
 
#9
Eines verstehe ich noch nicht: Was ist das für ein Bild, das Du da mit getJSON holst? Ich vermute, dass es eine Art Default-Bild ist, das nach der Initialisierung angezeigt wird, bevor Bilder hochgeladen werden?

Ein Hinweis ins Blaue: Eine mögliche Quelle für Probleme beim Laden mit Ajax ist der Cache des Browsers. Ist dieses Bild immer das selbe? Wenn nicht, versuche, das Neuladen zu erzwingen, indem Du z. B. die Zeit in die URL einfügst:
$.getJSON(webserverurl + '?time=' + Date.now()' + '&sessionid=' + sessionkey

Am besten wäre es, wenn man das mit dem Debugger untersuchen könnte. Kannst Du die URL posten? Gibt ja sicher einen Weg, Testbilder wieder zu entfernen, wenn das Problem gelöst ist.
Das hat geklappt mit Date.now(). Super danke!
 
Oben