CODEWITHSUNDEEP
javascriptjqueryajaxslider
zeros-and-ones
zeros-and-ones

Reputation: 4438

JQuery Slider Initialize in Ajax

I am using the JQuery slider, and it loads fine in my header. I suppose it is being initialed with the following code:

$(function() {
$( "#slider" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) );
});
$( ".selector" ).on( "slidecreate", function( event, ui ) {
} );

I am calling an Ajax function that responds with another JQuery slider using the tag 

<div id="slider"></div>

Here is the Ajax function:

<!-- Ajax Function for removing an users favorites-->
function ShowFavoritesAjax(url,cfunc,userID)
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("POST",url,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("user_id=" + userID);
}


function ShowFavorites(userID)
{
ShowFavoritesAjax("ajaxPHP/users/ajaxShowFavorites.php",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("userFav").innerHTML=xmlhttp.responseText; 
    } else { 
    document.getElementById("userFav").innerHTML='<img src="images/ajax-loader.gif">';
   }
  },userID,bandID);
}

So I am guessing that I need to "initialize the Slider" in one of my Ajax functions. So I tried this by modifying the return as so: (I just pasted the initialize function in it's entirety right before the response text is displayed)

function ShowFavorites(userID)
{
ShowFavoritesAjax("ajaxPHP/users/ajaxShowFavorites.php",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
 $(function() {
$( "#slider" ).slider({
orientation: "horizontal",
range: "min",
min: 0,
max: 100,
value: 60,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) );
});
$( ".selector" ).on( "slidecreate", function( event, ui ) {
} );
    document.getElementById("userFav").innerHTML=xmlhttp.responseText; 
    } else { 
    document.getElementById("userFav").innerHTML='<img src="images/ajax-loader.gif">';
   }
  },userID);
}

If anyone can spot my problem and has a fix I would really be grateful.

Thanks.

Upvotes: 0

Views: 1103

Answers (1)

Khanh TO
Khanh TO

Reputation: 48982

Try this:

function ShowFavorites(userID)
{
   ShowFavoritesAjax("ajaxPHP/users/ajaxShowFavorites.php",function()
   {
         if (xmlhttp.readyState==4 && xmlhttp.status==200)
         {
             document.getElementById("userFav").innerHTML=xmlhttp.responseText; 
                $( "#slider" ).slider({
                    orientation: "horizontal",
                    range: "min",
                    min: 0,
                    max: 100,
                    value: 60,
                    slide: function( event, ui ) {
                          $( "#amount" ).val( ui.value );
                  });

              $( "#amount" ).val( $( "#slider" ).slider( "value" ) );

              $( ".selector" ).on( "slidecreate", function( event, ui ) {
              });
            } else { 
               document.getElementById("userFav").innerHTML='<img src="images/ajax-loader.gif">';
           }
  },userID);
}

What I have changed in this code:

  • move the line document.getElementById("userFav").innerHTML=xmlhttp.responseText; to be executed first.
  • Remove the $(function() {

Reasons:

  • $(function() { fires when document is ready (not in this case).
  • When you execute your code like $.slider, the html is not inserted into the document yet => so you have to reverse the order.

Upvotes: 1

Related Questions