CODEWITHSUNDEEP
jqueryhtmlajaxjquery-jscrollpane
Buff
Buff

Reputation: 37

JScrollpane wont work after ajax

So after I load some content on my div I wanted to initialize jscrollpane, but it just won't work. Here's my code. See if you guys can tell me what is wrong.

Ajax (jquery)

   $("#mision").click(function() {
        var id = this.id;
        $.ajax({
          url: template + "/acciones.php",
          type: "POST",
          data:  "id=" + id,

          complete: function() {

          },

          success: function(x) {
            $("#cargaContenido").html(x);
                $("#scrollpro").css({'height':(($(window).height())-361)+'px'});
        $('#scrollpro').jScrollPane({

        });

        $(window).resize(function(){
          $('#scrollpro').css({'height':(($(window).height())-301)+'px'});
          $('#scrollpro').jScrollPane({autoReinitialise: true});
         });
              $("#scrollpro").trigger('resize');

         },

          error: function() {
            //called when there is an error
          },
        });

    });

It does work now!

Upvotes: 0

Views: 1394

Answers (2)

Paco Valdez
Paco Valdez

Reputation: 1975

Try this:

$("#mision").click(function() {
    var id = this.id;
    $.ajax({
      url: template + "/acciones.php",
      type: "POST",
      data:  "id=" + id,

      complete: function() {
        $('#cargaContenido').jScrollPane().fadeIn();
      },

      success: function(x) {
        $("#cargaContenido").html(x);

     },

      error: function() {
        //called when there is an error
      },
    });

});

Upvotes: 2

Frexuz
Frexuz

Reputation: 4933

It may have something to do with the fadeIn animation. I don't think jScrollPane can measure the content while its animated. At least it's my guess.

Try this instead:

$("#cargaContenido").html(x).fadeIn(500, function() {
    //Callback when the fadeIn is complete
    $('#cargaContenido').jScrollPane();
});

Upvotes: 0

Related Questions