javascript uncaught type error function ajax

Question

Below you can see two functions. The second works perfectly. It submits data when a select menu has been changed.

I am trying to apply a similar logic but this time to a field. When the value in the field as changed I want to the data to submit, as seen in the first bit of js

Despite the logic being almost the same I get this error

Uncaught ReferenceError: $ is not defined
9452:382 (anonymous function)

If someone could illuminate to me what exactly this and how I fix it I'd be very grateful. My assumption is that its something related to the order in which things load, however as the logic is no different from the old logic surely this shouldnt be a problem.

 :javascript

    $('#booking_package_#{package.id}').on("keyup change", function(){
      var bookingPackageQuantity = document.getElementById("menu_item_#{package.id}");
      $.ajax({
        url: "/venues/#{venue.id}/bookings/#{booking.id}/booking_packages/#{@booking_package.id}/add_menu_item?menu_item_id="+bookingPackageQuantity,
        type: "GET"
      })
    });


    $('#menu_item_#{package.id}').on("change", function(){
      var selects = document.getElementById("menu_item_#{package.id}");
      var menuItemId = selects.options[selects.selectedIndex].value
      $.ajax({
        url: "/venues/#{venue.id}/bookings/#{booking.id}/booking_packages/#{@booking_package.id}/add_menu_item?menu_item_id="+menuItemId,
        type: "GET"
      })
    });

I am trying to bind the event to this field

    = number_field_tag 'quantity', booking.find_package(package).quantity, id: "booking_package_#{package.id}"

Probably means that that code is imported before jQuery, or that something has called jQuery.noConflict();. — Pointy
– Pointy, Commented Feb 6, 2015 at 15:12

Hemant · Accepted Answer · 2015-02-06 15:23:36Z

1

In the first part of the JS, please put value. Probably that may be breaking the javascript, please try the following edited code...

 $('#booking_package_#{package.id}').on("keyup change", function(){
  var bookingPackageQuantity = document.getElementById("menu_item_#{package.id}");
  $.ajax({
    url: "/venues/#{venue.id}/bookings/#{booking.id}/booking_packages/#{@booking_package.id}/add_menu_item?menu_item_id="+bookingPackageQuantity.value,
    type: "GET"
  })
});

Can you please let me know if you are using any frameworks for this? so that i can help you better...

answered Feb 6, 2015 at 15:23

Hemant

2,0692 gold badges14 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user3868832 Over a year ago

the above code didnt make a difference. I am using Ruby on Rails. I have jquery used throughout the application, all working. It just seems to be this that is causing the issue.

Hemant Over a year ago

is it possible you can post a JSFiddle for this?

Hemant Over a year ago

Once i enable the jquery in JSFiddle, i can see the alert message, which means to me its working? If so, please double check that the jquery is included properly

user3868832 Over a year ago

but the second example runs perfectly - this requires jquery.

Hemant Over a year ago

Can you please place the full code in which you are facing issue in JSFiddle?

Collectives™ on Stack Overflow

javascript uncaught type error function ajax

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related