I have a slider (flexslider2) that takes the data of a json which changes depending on a value that happened to the function. The slider is generated automatically. The problem is that when I want to change the json's data, calling the function again, the slider does not change. This is the code already solved.
function conv_bus(txtBus){
var parametros = {
"txtBus":txtBus,
}
$.ajax ({
data: parametros,
url: "php/AgrApp/conv_bus.php",
type: "POST",
beforeSend: function(){
$("#proceso").html("<img src='img/cargando.gif' />"); //Cargo la web en el div
},
success: function(data){
$("#proceso").html(""); //Cargo la web en el div
objJsonConBus=JSON.parse(data);
$("#lblSlider").html("<h4><span class='modal-title label label-default'> <span class=' glyphicon glyphicon-picture'></span> Carrusel de Convenios</span></h4>");
var conv ='<div class="flexslider carousel">'+
'<ul class="slides">';
$.each(objJsonConBus, function(f, convenio){
subDescuento = convenio.dsc_desc.substring(0, 52); //Estas funcion es para capar el campo descripción de descuento.
conv += '<li>'+
'<div data-name="'+convenio.name+'"data-desc="'+convenio.dsc_emp +'"data-des_desc="'+convenio.dsc_desc +'"data-dir="'+convenio.dir +' "data-toggle="modal" data-target="#myModal" >'+
'<center><img class="img-responsive " src="'+convenio.base64_png+'" />'+
'<h5 CLASS="descuento ">'+subDescuento+'</h5></center></div>'+
'</li>';
});
conv += '</ul>'+
'</div>';
$('#carrusel').append(conv); //Aqui le estoy asignando al div de convenios toda la informacion
$('.flexslider').flexslider({ //Convoco al objeto
animation: "slide",
animationLoop: true,
itemWidth: 150,
itemhight: 150,
itemMargin: 20,
pausePlay: true,
mousewheel: true,
slideshowSpeed: "2500",
});
}
});
}
Html
<div id="lblSlider"></div> <!--- Esto es un label que indica el nombre del slider---->
<div id= "divSlider" class=" col-md-12 row-no-padding">
<div id="container" >
<div id="main" role="main">
<section class="slider">
<div id="carrusel"></div> <!---Aqui se pinta el slider de imagenes------->
</section>
</div>
</div>
</div>