CODEWITHSUNDEEP
ruby-on-railsrubyajaxjquery-uislider
rails_developer
rails_developer

Reputation: 149

How to add ajax to jquery-ui slider using ruby on rails 3.2

So I'm following this outdated tutorial on using the jquery-ui slider with rails 3 beta since it's the only one I've found.

My view which has the script

<p>
  <p>Showing all stocks between <span id="x_low_selected"><%= @price_range.first %></span> and <span id="x_high_selected"><%= @price_range.last %></span></p>
</p>
<div id="x_slider"></div>
<ul id="x_stock_list">
<%= render 'map' %>
</ul>
<script type="text/javascript">
  $(function() {
  $("#x_slider").slider( { 
    range: true,
    step: 1,
    max: <%= @price_range.last %>,
    min: <%= @price_range.first %>,
    values: [<%= @price_range.first %>, <%= @price_range.last %> ],
    stop: function(event, ui) {
    var prices = $('#x_slider').slider('option', 'values');
    $('#x_low_selected').html(prices[0]);
    $('#x_high_selected').html(prices[1]);
    $.ajax({
        url: 'http://localhost:3000/users',
        type: "GET",
        data: { low: prices[0], high: prices[1] },
        dataType: 'json'
    });
   }
  });
});
</script>

model method for prices

def self.low_high_prices
  [User.minimum(:start), User.maximum(:end)]
end

and the index method in the controller which the ajax should call

def index
  @users = User.all
  unless params[:low] && params[:high]
    @users = User.all
    @json = User.all.to_gmaps4rails do |user, marker|
    marker.infowindow "<a href=/users/#{user.id}> #{user.name} </a>"
    marker.title user.name
  end
else
  @json = User.where("start >= params[:low] AND end <= params[:high]).to_gmaps4rails do |user, marker|
    marker.infowindow "<a href=/users/#{user.id}> #{user.name} </a>"
    marker.title user.name
  end
end
@price_range = User.low_high_prices
  respond_to do |format|
    format.html # index.html.erb
    format.json { render json: @users }
  end
end

Does anyone know why the ajax call isn't being sent to the controller when the slider stops sliding? Not sure if I would be able to use :remote => true because the slider is generated inside the div.

Thanks

Also I am currently using rails 3.2 with ruby 1.9.7

Upvotes: 2

Views: 1463

Answers (1)

mccannf
mccannf

Reputation: 16659

I would guess that your call is going through to the controller, and the controller is returning JSON data.

The problem is that your $.ajax call is doing nothing with the JSON data received.

You need to add a callback function to handle the JSON data passed back in some way in the ajax call:

$.ajax({
    url: 'http://localhost:3000/users',
    type: "GET",
    data: { low: prices[0], high: prices[1] },
    dataType: 'json',
    success: function (data) {
        alert("Success: " + data);
        //do something with the data here.
    }
});

Also, looking at the controller code, it will only pass back the contents of @users in the JSON data, not the contents of @json or anything else - not sure if that was your intention or not.

Upvotes: 2

Related Questions