2011-03-14 5 views
3

Salut Je viens de trouver un article sur la façon de combiner Rails avec jQuery. J'ai suivi les instructions mais je ne pouvais pas le faire fonctionner (au lieu d'utiliser les rails ajax essayé la façon non-javascript de gérer la demande). Après avoir téléchargé le code source, j'ai découvert quel était le problème. Dans la source/javascripts publique il y a un fichier jquery-rails.js qui est relié à la ligneRuby on Rails avec jQuery

javascript_include_tag "jquery-rails.js" 

dans application.html.erb. Si je change le nom de ce fichier dans la ligne ci-dessus, cela ne fonctionne plus. J'ai donc essayé de changer le nom original d'un fichier de pilote téléchargé ici: http://docs.jquery.com/Downloading_jQuery#Download_jQuery (beaucoup de versions différentes) à celui que j'ai trouvé dans la source. Bien sûr, je l'ai placé dans le même répertoire aussi. Et encore une fois il a échoué à travailler ... Alors finalement, j'ai comparé les fichiers. Ce que j'étais tellement que le fichier de la source était beaucoup plus court. Eh bien, je suis un vrai débutant à JS, je dois donc vous demander de l'aide ici. Pourquoi ça ne marche pas? Comment faire fonctionner Rails avec le pilote original de jQuery?
Bye

Ci-dessous vous pouvez voir le 'jquery-rails.js' de la 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')); 
    }); 
}); 

});

Répondre

9

Je suppose que votre aide de rails 3, dans ce cas la meilleure façon d'utiliser jquery est le joyau jquery-rails simplement l'installer (ajouter gem 'jquery-rails') à votre Gemfile, exécutez bundle puis exécutez rails generate jquery:install et jquery peut être utilisé!

+0

Cela a fonctionné aussi. Très belle méthode merci! – gisek

2

Pour obtenir Ruby on Rails UJS utiliser jQuery, vous devez faire à la fois des éléments suivants:

  1. Inclure jQuery dans votre mise en page: Télécharger jQuery de jQuery.com dans votre publique répertoire et un lien vers avec javascript_include_tag ou utiliser Google's CDN, (qui est ma préférence)

  2. Inclure le pilote Rails jQuery: le pilote Rails utilise jQuer La fonctionnalité de y pour faire des trucs spécifiques à Rails, c'est pourquoi vous avez aussi besoin de jQuery. Télécharger the jQuery Rails driver (le fichier que vous avez listé dans votre question) et liez-le avec javascript_include_tag de la même manière.

+0

Merci, cela a fonctionné parfaitement. – gisek