Jquery ui Ajax in rails 4

Question

I was creating a project for last days. Its a task assigning project to employees in rails 4. In this project the admin can change the order of the task. For that I am using jquery ui sortable.So when admin drag the tasks in specific order, an ajax request is send to the rails controller. Where I could get the position of the sortable element. I can save it to database.But cannot render on to the html page.

My Html file

<% content_for :head do %>
    <script>
        $(function() {
            $( "#sortable" ).sortable({
                revert: true,
                stop: function(event,ui){
                    var datas = { 
                        top: ui.position["top"],
                        left: ui.position["left"] 
                    };
                    $.ajax({
                type: "POST",
                url: '/task/position',
                data: datas,
                success: function(data){
                    console.log(data);
                    },
                    dataType: 'json'
                });
                }
            });
            $( "#draggable" ).draggable({
                connectToSortable: "#sortable",
                opacity: 0.35,
                helper: "clone",
                revert: "invalid"
            });
            $( "ul, li" ).disableSelection();
        });
    </script>
<% end %>

<% @page_title = 'Tasks' %>

<% if !flash[:notice].blank? %>
    <div class="notice">
        <%= flash[:notice] %>
    </div>
<% end %>
<div class="big">
    <%= @top %>
    <strong>Task Assigned</strong>
    <ul id="sortable">
        <% @tasks.each do |task| %>
        <li>
            <%= link_to(task.task_name,{:action => 'show',:id => task.id}) %>
        </li>
        <% end %>
    </ul>
</div>

My Controller looks like this

  def position

    @top = params[:top]
    value = {
      :top => @top,
      :test => "hiuhiuh",
    }
    respond_to do |format|
      format.html
      format.json { render json: value}
    end

  end

My doubt is that can I access the variable @top directly in the html page.I tried but cant.But the json response has the data because I am passing it through that.Can I take the variable @top directly in the html page like <%=@top %>.

Also I need to get a logic for saving the position,So browser refresh did not refreshes the sortable elements position.

Answer 1

Yes, in your html view you can directly reference the @top variable you set up in your controller.