it-swarm.com.de

Wie reinigt man das Eulenkarussell nach einem Ajax-Anruf?

Ich versuche, das Eulenkarussell nach einem erfolgreichen Ajax-Aufruf neu zu initialisieren. Der Ajax-Aufruf ändert die Daten, aber die Ansicht sollte gleich bleiben. Ich habe ein Problem, bei dem die Ansicht (die Karussellstruktur) nicht neu initialisiert wird. 

ich verwende Version 1.3.3

$(document).ready(function() {
 $(".owl-carousel").owlCarousel({
   items : 3
 });
});

Ajax-Anruf

$.ajax({
    type: 'get',
    url: '/public/index',
    dataType: 'script',
    data: data_send,
      success: function(data) {
       $(".owl-carousel").owlCarousel({
         items: 3
       });
      }
   });
}

Verpasse ich etwas, das ich tun muss? Ich habe mir dieses Problem auf der Github-Seite angesehen und die Vorschläge ausprobiert, aber ohne Erfolg.

Jede Hilfe geschätzt

Bearbeiten

aus dem rat habe ich diese beiden funktionen geschaffen

function owlCarousel() {
  var owl = $(".owl-carousel"); 
  //init carousel
  owl.owlCarousel();
    owl.data('owlCarousel').reinit({
     items : 3
    });
}

function destroyOwlCarousel() {
  var owl = $(".owl-carousel");
  //init carousel
  owl.owlCarousel();
    owl.data('owlCarousel').destroy();
  }
}

Es scheint zu funktionieren, fragt sich aber, ob dies der richtige Weg ist, dies zu tun?

14
Richlewis

Das Beispiel unten funktioniert.

Initialisierung des Karussells:

owl = $("#owl-demo");

owl.owlCarousel({
  items: 10,
  autoPlay: 1000,
});

Und wenn Sie den Ajax-Callback verwenden, versuchen Sie Folgendes:

owl.data('owlCarousel').destroy();

owl.owlCarousel({
  items: 5,
  autoPlay: 1000,
});

Ich erstelle eine Geige, um zu erklären, wie Sie das Karussell erneut initialisieren können: http://jsfiddle.net/s10bgckL/959/

PS: Ich habe kein Array von Optionen erstellt, wenn Sie einige Parameter wie Geschwindigkeit, Anzahl der angezeigten Elemente usw. ändern möchten.

Ich hoffe, es hilft.

6
Eduardo

Versuchen Sie $(window).load() anstelle von reinitialize.

0
Gopal Raj

Ich habe das gleiche Problem durchgemacht und die reinit()-Methode ausprobiert, aber es funktionierte nicht für mich, also versuchte ich es mit dest und init und es funktionierte.

$.ajax({
    type: 'get',
    url: '/api/v1/companies',
    ...,
    success: function(data) {
        $("#main-company-carousel").data('owlCarousel').destroy();
        $("#main-company-carousel").owlCarousel({
            items : 3 
        });
    }
});
0
Ridham Tarpara

Probieren Sie es aus, es existiert in owl documention :

//Initialize Plugin
    $(".owl-carousel").owlCarousel()

    //get carousel instance data and store it in variable owl
    var owl = $(".owl-carousel").data('owlCarousel');

    owl.reinit(options)
0
Govind Samrow

Das sollte helfen: 

/*
 reinit() method reinitialize plugin 

 Syntax:
 owldata.reinit(newOptions)

 Yes! you can reinit plugin with new options. Old options
 will be overwritten if exist or added if new.

 You can easly add new content by ajax or change old options with reinit method.
 */

 $('.reinit').click(function(e){
 e.preventDefault()
 if(booleanValue === true){
  booleanValue = false;
  } else if(booleanValue === false){
  booleanValue = true;
}

owl.data('owlCarousel').reinit({
    singleItem : booleanValue
  });
})
0
Chris