3

Hi I just came across an article about how to combine Rails with jQuery.
http://blog.bernatfarrero.com/category/ror/
I followed the instructions but I couldn't make it work (instead of using ajax rails tried the non-javascript way of handling the request). After I downloaded the source code i found out what the problem was. In the source in public/javascripts there is a file jquery-rails.js which is connected with the line

javascript_include_tag "jquery-rails.js" 

in application.html.erb. If I change the name of that file in the line above it doesn't work anymore. So I tried to change the original name of a driver file downloaded form here: http://docs.jquery.com/Downloading_jQuery#Download_jQuery (many different versions) to the one I found in the source. Of course I placed it in the same directory too. And again it failed to work... So finally i compared the files. What I so was that the file from the source was much shorter. Well I'm a real beginner to JS so I must ask you for help here. Why doesn't it work? How to make Rails work with the original jQuery driver?
Bye

Below you can see the 'jquery-rails.js' from the source

jQuery(function ($) {
var csrf_token = $('meta[name=csrf-token]').attr('content'),
    csrf_param = $('meta[name=csrf-param]').attr('content');

$.fn.extend({
    /**
     * Triggers a custom event on an element and returns the event result
     * this is used to get around not being able to ensure callbacks are placed
     * at the end of the chain.
     *
     * TODO: deprecate with jQuery 1.4.2 release, in favor of subscribing to our
     *       own events and placing ourselves at the end of the chain.
     */
    triggerAndReturn: function (name, data) {
        var event = new $.Event(name);
        this.trigger(event, data);

        return event.result !== false;
    },

    /**
     * Handles execution of remote calls firing overridable events along the way
     */
    callRemote: function () {
        var el      = this,
            data    = el.is('form') ? el.serializeArray() : [],
            method  = el.attr('method') || el.attr('data-method') || 'GET',
            url     = el.attr('action') || el.attr('href');

        if (url === undefined) {
          throw "No URL specified for remote call (action or href must be present).";
        } else {
            if (el.triggerAndReturn('ajax:before')) {
                $.ajax({
                    url: url,
                    data: data,
                    dataType: 'script',
                    type: method.toUpperCase(),
                    beforeSend: function (xhr) {
                        el.trigger('ajax:loading', xhr);
                    },
                    success: function (data, status, xhr) {
                        el.trigger('ajax:success', [data, status, xhr]);
                    },
                    complete: function (xhr) {
                        el.trigger('ajax:complete', xhr);
                    },
                    error: function (xhr, status, error) {
                        el.trigger('ajax:failure', [xhr, status, error]);
                    }
                });
            }

            el.trigger('ajax:after');
        }
    }
});

/**
 *  confirmation handler
 */
$('a[data-confirm],input[data-confirm]').live('click', function () {
    var el = $(this);
    if (el.triggerAndReturn('confirm')) {
        if (!confirm(el.attr('data-confirm'))) {
            return false;
        }
    }
});


/**
 * remote handlers
 */
$('form[data-remote]').live('submit', function (e) {
    $(this).callRemote();
    e.preventDefault();
});

$('a[data-remote],input[data-remote]').live('click', function (e) {
    $(this).callRemote();
    e.preventDefault();
});

$('a[data-method]:not([data-remote])').live('click', function (e){
    var link = $(this),
        href = link.attr('href'),
        method = link.attr('data-method'),
        form = $('<form method="post" action="'+href+'"></form>'),
        metadata_input = '<input name="_method" value="'+method+'" type="hidden" />';

    if (csrf_param != null && csrf_token != null) {
      metadata_input += '<input name="'+csrf_param+'" value="'+csrf_token+'" type="hidden" />';
    }

    form.hide()
        .append(metadata_input)
        .appendTo('body');

    e.preventDefault();
    form.submit();
});

/**
 * disable-with handlers
 */
var disable_with_input_selector = 'input[data-disable-with]';
var disable_with_form_selector = 'form[data-remote]:has(' + disable_with_input_selector + ')';

$(disable_with_form_selector).live('ajax:before', function () {
    $(this).find(disable_with_input_selector).each(function () {
        var input = $(this);
        input.data('enable-with', input.val())
             .attr('value', input.attr('data-disable-with'))
             .attr('disabled', 'disabled');
    });
});

$(disable_with_form_selector).live('ajax:after', function () {
    $(this).find(disable_with_input_selector).each(function () {
        var input = $(this);
        input.removeAttr('disabled')
             .val(input.data('enable-with'));
    });
});

});

0

2 Answers 2

10

I assume your using rails 3, if so the easiest way to use jquery is with the jquery-rails gem just install it (add gem 'jquery-rails') to your Gemfile, run bundle then run rails generate jquery:install and jquery can be used!

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

Comments

2

To get Ruby on Rails' UJS to use jQuery, you need to do both of the following:

  1. Include jQuery in your layout: Download jQuery from jQuery.com into your public directory and link to it with javascript_include_tag or use Google's CDN, (which is my preference)

  2. Include the jQuery Rails driver: The Rails driver uses jQuery's functionality to do Rails-specific stuff, which is why you also need jQuery. Download the jQuery Rails driver (the file you listed in your question) and link to it with javascript_include_tag in the same way.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.