Refreshing a rails partial on a set time interval using AJAX and JQuery

Question

I have a page in my rails application that looks like:

Now, I have another AI application coded in python that processes a video (displayed on the left of a page of the rails app) and populates the database with the captured vehicles and their corresponding license plates (displayed beside the video in the rails app). Meaning to say, the rails and python applications have a shared database.

What I want to do now is that I want to refresh the partial on the right, say every 10 seconds so that it will show the newly added vehicles. I patterned my current solution from this stack overflow post and I was able to confirm that I can successfully render the js page as shown in my logs:

However, the partial still shows just one entry despite adding a new entry. I need to manually refresh the page for it to show all new entries. I am not sure where I made a mistake. Here are the following relevant codes that I have so far:

application.js //Responsible for the partial refresh

$(document).ready(function () {
  setInterval(refreshPartial, 1000);
});

function refreshPartial() {
  $.get("/single_live.js", function(data){
    $("#captured_vehicles_live").html(data);
  });  
}

static_pages_controller.rb

def single_live
  @all_captured_violators = CapturedViolatorPlaceholder.all.order('capture_date DESC')

  respond_to do |format|
    format.html
    format.js
  end
end

single_live.html.slim

.ui.container style="margin-top: 100px;"
  .ui.container
    h1.ui.center.aligned.header Camera 1
    .ui.divider  
    .ui.left.aligned.grid.stackable
      .ten.wide.column
        .ui.segment
          image[src="http://62.242.189.219:80/mjpg/video.mjpg?COUNTER" style="border: 0 none transparent; min-height: 200px; max-height: 600px;" height="100%" width="100%" frameborder="0"]
      .six.wide.column 
        .ui.segment
          h1.ui.center.aligned.header
            | Captured License Plates
        = render 'captured_vehicles_live'

single_live.js.slim

= render partial: 'captured_vehicles_live', data: @all_captured_violators

_captured_vehicles_live.html.slim \partial

#captured_vehicles_live.ui.segment style="height: 450px; margin-top: 15px; overflow:scroll;"
  .ui.grid.stackable
    - @all_captured_violators.each do |violator|
      .row.ui.basic.segment
        .six.wide.column
          = image_tag "/MASTER/IMAGES/#{violator.car_image_filename}", style: "width: 100%; height: 100%;"
        .ten.wide.column
          = form_tag encode_license_plate_path do
            .row
              .ui.form
                .two.fields
                  .field
                    = image_tag("/MASTER/PLATES/#{violator.license_plate_image_filename}")
                  .field
                    = text_field_tag 'captured_violator[license_plate_text]', violator.license_plate_text
                    = hidden_field_tag 'captured_violator_placeholder[id]', violator.id
                    = hidden_field_tag 'violation[name]', violator.violation
                    = hidden_field_tag 'offense[location]', violator.location
                    = hidden_field_tag 'offense[car_image_filename]', violator.car_image_filename
                    = hidden_field_tag 'offense[license_plate_image_filename]', violator.license_plate_image_filename
              .row.center.aligned
                  = submit_tag "Encode", class: 'fluid ui button primary'
      .ui.divider

routes.rb

get '/single_live' => 'static_pages#single_live'

[WORKING UPDATE]

After trying to apply the recommendations below of @Matias Seguel, I now have this code:

single_live_js.slim

| $("#captured_vehicles_live").html("
= j render 'captured_vehicles_live'
| ");

I also removed the $("#captured_vehicles_live").html(data); from my application.js to avoid rendering my code twice.

application.js

$(document).ready(function () {
  setInterval(refreshPartial, 1000);
});

function refreshPartial() {
  $.get("/single_live.js", function(data){});  
}

Answer 1

You should try doing something like:

single_live.js.slim

$("#captured_vehicles_live").html("<%= j render 'captured_vehicles_live' %>");

or if you are using slim:

| $("#captured_vehicles_live").html("
= j render 'captured_vehicles_live'
| ");

There is no need to pass @all_captured_violators again.

Do not forget to also remove $("#captured_vehicles_live").html(data); in the application.js so it would finally look like:

$(document).ready(function () {
  setInterval(refreshPartial, 1000);
});

function refreshPartial() {
  $.get("/single_live.js", function(data){});  
}