JSSOR conflict with Ajax?

Question

I was testing Jssor and was a success. When I edit the code to get the slides content from another file with Ajax it stop working.

But if instead I add them in the code without Ajax it work again. There is a way to load the images dinamically?

Ajax function:

function getImages(n, type){
$.ajax({
    url: "./r/"+type+"/"+n+"/img",
    success: function(data){
        $("#slcont").html(data);
    },
    error: function(){
        alert("Problem loading page. Try later.");
    }
});
}

Import file content:

<div>
                <img u="image" src2="./i/works/web/1/w1_0.jpg" />
            </div>
            <div>
                <img u="image" src2="./i/works/web/1/w1_1.jpg" />
            </div>

Any Idea?

I tried also to call GetImages() from different places, included

jQuery(document).ready(function ($) {
        getImages(i,t);
        var options = {

Note: #slcont is an ID assigned to: <div u="slides" ...> I would avoid to post the full code, it will be long and anyway it is the same of the example.

Answer 1

There is no conflicts with ajax call. You can initialize jssor slider when the ajax call returns.

var jssor_slider1;
function getImages(n, type){
$.ajax({
    url: "./r/"+type+"/"+n+"/img",
    success: function(data){
        //you can optionally pause the slider if it exists already.
        if(jssor_slider1)
            jssor_slider1.$Pause();

        //empty slider1_container and repopulate html code in slider1_container again, and then reinitialize jssor slider.
        $("#slcont").html(data);
        ...
        jssor_slider1= new $JssorSlider$("slider1_container" ...;
    },
    error: function(){
        alert("Problem loading page. Try later.");
    }
});
}