Ruby on Rails с помощью jQuery - PullRequest
       0

Ruby on Rails с помощью jQuery

3 голосов
/ 14 марта 2011

Привет, я только что наткнулся на статью о том, как объединить Rails с jQuery.
http://blog.bernatfarrero.com/category/ror/
Я следовал инструкциям, но не смог заставить его работать (вместо использования ajax rails попробовал не-javascriptспособ обработки запроса).После того, как я скачал исходный код, я узнал, в чем проблема.В источнике в public / javascripts есть файл jquery-rails.js, который связан со строкой

javascript_include_tag "jquery-rails.js" 

в application.html.erb.Если я изменю имя этого файла в строке выше, он больше не будет работать.Поэтому я попытался изменить исходное имя загруженной формы файла драйвера здесь: http://docs.jquery.com/Downloading_jQuery#Download_jQuery (много разных версий) на имя, которое я нашел в источнике.Конечно, я тоже поместил его в тот же каталог.И снова это не сработало ... Итак, наконец, я сравнил файлы.То, что я так был, что файл из источника был намного короче.Ну, я настоящий новичок в JS, поэтому я должен попросить вас о помощи здесь.Почему это не работает?Как заставить Rails работать с исходным драйвером jQuery?
Пока

Ниже вы можете увидеть 'jquery-rails.js' из исходного кода

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'));
    });
});

});

Ответы [ 2 ]

9 голосов
/ 14 марта 2011

Я предполагаю, что вы используете rails 3, если так, то самый простой способ использовать jquery с jquery-rails gem, просто установить его (добавить gem 'jquery-rails') в ваш Gemfile, запустить bundle и запуститьrails generate jquery:install и jquery можно использовать!

2 голосов
/ 14 марта 2011

Чтобы заставить UJS Ruby on Rails использовать jQuery, вам нужно выполнить оба из следующих действий:

  1. Включить jQuery в свой макет : загрузите jQuery с jQuery.com в общедоступный каталог и укажите ссылку на него с помощью javascript_include_tag или используйте CDN Google (что мне больше нравится)

  2. Включите драйвер jQuery Rails : Драйвер Rails использует функциональные возможности jQuery для выполнения специфических для Rails вещей, поэтому вам также необходим jQuery.Загрузите драйвер jQuery Rails (файл, который вы указали в своем вопросе) и таким же образом укажите на него javascript_include_tag.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...