Category Archives: JQuery

Upgrading jquery-ui-rails from 4.2.1 to 0.5.0

Posted on by
Reply

Problem

You would like to upgrade your jquery-ui-rails gem from a version before 0.5.x to the latest version 0.5.0, but when you do that your tests are failing with error messages similar to the one below:

ActionView::Template::Error: 
couldn't find file 'jquery.ui.effect-blind'

Solution

According to the changelog the naming between 4.2.1 and 0.5.0 has changed jquery-ui-rails

So if you were using something like the following in your app/assets/javascripts/applications.js file (as used in the depot example in the Agile Web Development with Rails 4 book):

//= require jquery.ui.effect-blind

you would need to change it to the following after upgrading your jquery-ui-rails gem to ~> 0.5.0:

//= require jquery-ui/effect-blind

Adding a record in Rails through javascript

Posted on by
Reply

Problem

You would like to trigger a record insertion after a specific action has happened through javascript (ie drag – drop an item into a container), in a rails application.

 

Solution

You would need to get the object attributes from the html page somehow (ie user_id and user_name), and then have a function in your application js that calls the post function.

So if you have a drag and drop container for example then the code in the application.js should be like the following:

$("#name_of_container").droppable({
  drop: handleDropEvent
});

function handleDropEvent(event,ui) {
  var user_id = ui.draggable.attr("user_id");
  var user_name = ui.draggable.attr("user_name");
  $.post('/users', {user: {user_id: user_id, name: user_name}})
}

 

setting dynamic event_source in jquery fullcalendar in rails application

Posted on by
Reply

Problem

You would like to use the fullcalendar jquery plugin to be able to display events in your rails application, but you also want to be able to set the eventSources dynamically depending on the path to your view, especially if your view contains a relationship as in the following example:

model_a/1/model_b (user/14/comments)

Solution

Change your eventSources to be something like the following and using the jQuery.ajaxSettings.url :

 // a future calendar might have many sources.
    eventSources: [{
      url: jQuery.ajaxSettings.url,
      color: 'orange',
      textColor: 'black',
      ignoreTimezone: false
    }],