Really cool episode! Thanks!

Hey, I was having trouble once the barcode is captured/scanned. In the console it has the error, ""POST http://localhost:3000/products/get_barcode 404 (Not Found)". I have checked my routes and run rake routes, and they are coming up correctly. Any idea why that may be?

Can you post the JS and Routes file?

I copied and pasted the code as you have it below, except my routes have 'orders' where you have 'products', and I'm only trying to find already existing orders.

The only difference is that my 'orders' routes are actually nested.

In my JS file, I have everything else exactly the same except the url in the ajax request.

$.ajax({
  type: "POST",
  url: '/orders/get_barcode',
  data: { upc: code }
});

Since my orders route is nested, when I run rake routes I get

get_barcode_ticket_orders ... POST ... /tickets/:ticket_id/orders/get_barcode(.:format) ... orders#get_barcode

In my routes file:

resources :tickets do
    resources :orders do
      post :get_barcode, on: :collection
    end
  end

With a nested routes like that,

get_barcode_ticket_orders POST   /tickets/:ticket_id/orders/get_barcode(.:format) orders#get_barcode

You would need to also pass the parameter ticket_id into the data hash.  Is the ticket_id available at this point? If so, you could pass it into a data attribute and access it in the JS. Otherwise, you may want to reconsider the routes to look something like this (or similar):

resources :tickets do
  resources :orders
end
post '/orders/get_barcode',  as: :get_barcode, controller: :orders, action: :get_barcode
# get_barcode POST   /orders/get_barcode(.:format)         orders#get_barcode

I was just about to ask you if it was throwing the error because I'm not passing the ticket_id. I'm not the best with jQuery so I didn't know if the client required that, although as I type it this makes sense that it would.

What do you mean by "pass it into the data attribute"?

Are you saying that the client is throwing the original error I posted because it's trying to find the order, but doesn't have the ticket_id?

Since you don't have the ticket_id, it's not a valid route.

In your HTML, if the ticket_id is available and you're already displaying it somewhere then you can create a data attribute like

<%= tag :div, id: 'some_name', data: { 'ticket-id': @ticket.id } %>

You can access the value of the ticket's id in jQuery like

var ticket_id = $('#some_name').data('ticket-id');

And then in the AJAX POST

data: { ticket_id: ticket_id, upc: code }

Hm. That's a problem because at this point the ticket_id is not accessible for me to put it in a div. Are there any other ways you can think of to do this? You don't have to write out the code, you can just let me know your ideas.

Looks like you should remove the collection on the orders and instead do something like this

post '/orders/get_barcode',  as: :get_barcode, controller: :orders, action: :get_barcode

Since it sounds like you have a barcode which references a record in the Order model, you're not really going to be able to do a nested resource and have the collection on the Orders. Instead, you can create a manual path (as shown above) which goes to your orders#get_barcode action.

In the get_barcode action, you can look up the order and then get the ticket association.

It might look something like

def get_barcode
  @ticket = Order.includes(:ticket).find_by(barcode: params[:upc]).ticket
end

This is assuming that a Ticket has_many Orders and an Order belongs_to a Ticket.

The previous example will generate two queries and could be a bit slower. You could get fancy with your query and also do something like this which will create an inner join

@ticket = Ticket.joins(:orders).where(orders: {barcode: params[:upc]})

I wasn't able to figure it out, and even utilizing the hints you gave me didn't change much. All the errors are popping up in the console on the client. I'm not a jQuery guy, so I'll have to look into another solution for accomplishing this. Thanks for your help and the video is great!

the best tutorial ever my dear friend! do you have this same project in GitHub? thanks for share your knowledge!

In my case i copyed and paste all code in my project, and don't appear nothing in my view using this <div id='barcode-scanner'></div> there.

Do you know if have something else to do? because "i think" that have to appear my webcam in the view, right? or i need to do more things?

Thanks!

I must have been exhausted when I was writing up the Resources section. Check it now, the source code link is posted.

Thanks for the answer Kobaltz! everything is working fine in my project, i just found one problem, not work in production mode, do you know why? even making the "rails assets:precompile" don't appear the webcam in my view and i don't have any error in Chrome.

Any suggestion? thanks again!

I picked up your project and checked that it also does not work in production mode, and I noticed that you refer to quagga.js but I do not see it inside your project, I even looked at your gems but I did not find anything. Do you know what more can i do to fix it? thanks Kobaltz!

In my project i don't use turbolinks, do you know what can i do to fix this part of the JS code?

$(document).on('turbolinks:load', load_quagga);

this is my application.js

//= require jquery

//= require jquery_ujs

//= require jquery-ui

//= require autocomplete-rails

//= require jquery.min

//= require bootstrap

//= require twitter/bootstrap

//= require bootstrap/modal

//= require bootstrap-datepicker

//= require bootstrap-datepicker/core

//= require maskedinput

//= require fusioncharts/fusioncharts

//= require fusioncharts/fusioncharts.charts

//= require fusioncharts/fusioncharts.theme.fint

//= require demo

//= require dash

//= require jquery.touchSwipe.min

//= require sweetalert

//= require dropzone

//= require progressbar

//= require quagga.min

//= require quagga

//= require_tree .

It should be in the `vendor/assets/javascripts` folder.

i found now, but i don't understand why not works in production mode, in your project i had the same result... do you have some suggestion?

Are you serving the site over SSL? Check the browser's developer tools to see if there are any warnings or errors.

Yes, i did it, nothing appear there too.. try to run your project in production mode, you gonna see that not is working too..

I did the same with your project.

Hello Dede,

I've pulled down the code from github and ran it in production mode.

The only difference that I made in the source app was add a secrets key in the secrets.yml file and run the app with RAILS_ENV=production passenger start as this will mount the rails app under nginx (similar to how it would be on a production environment).

I was able to get the camera showing without any issues.

You may want to check your browser to ensure that the camera was shared.

Hi, I need to compare a UPC and then compares it to a database in order to get the informations related to the products and show them to the user.

I'm a begginer sorry if this is dead simple. 

I'll consider covering an episode with scanning QR codes. Are there any particular libraries that you're interested in?

Holy cow, that is an incredible episode, thanks!

Hi, I am new to the rails + barcode projects . I am looking to build a member tracking system for a gym; the features are the same as this video initiate or retrieve based on barcodes . I am using the code from this forum to get things working. I cant seem to get the barcode reader to work properly. The barcode scanner is having a hard time capturing the barcode and when it does; it returns a false positive. ( It keeps scanning the same barcode but i get different results which isnt good for creating or retrieving records) I am working on a mac book pro 2012 using the FaceTime Video Camera to barcodes. I am using chrome for a browser. I also made sure that the decoder is set up for code39 readers. Is there any way someone can help me figure this out?

Hi, maybe I missing something but did not you forget to declare the variable code right here: ``` if (last_result.length > 20) { code = order_by_occurrence(last_result)[0]; ``` should not it be: ``` if (last_result.length > 20) { var code = order_by_occurrence(last_result)[0]; ``` All the best. Thanks for this amazing video

Great video, thanks for covering this.