Rails, en utilisant jQuery sans jrails

Question

J'ai essayé de convertir mon application rails 2.2.2 en jQuery, et je voudrais donc sans utiliser de jrails. Le seul document de référence que je puisse trouver sur le sujet est Railscasts Episode 136. Ryan explique comment utiliser jQuery pour publier un formulaire et gérer la réponse dans un fichier .js.erb. Est-ce que quelqu'un a essayé d'utiliser jQuery avec des fichiers .js.erb avec des ancres comme déclencheur? En remplacement de "link_to_remote".

J'ai demandé à jQuery de faire un .get pour soumettre ce lien en cliquant sur le contrôleur, mais je n'arrive pas à l'obtenir dans le fichier .js.erb.

Merci

Answer 1

Voici les étapes pour obtenir des ancres de travail en détournant leur comportement avec un style jQuery.

Dans la vue, permet de l'appeler index.html.erb vous mettez un peu d'ancrage avec une carte d'identité spéciale ou une classe en utilisant l'aide link_to normale - par exemple lien vers l'action show du contrôleur des utilisateurs en utilisant le routage des ressources:

# in index.html.erb 
<%= link_to 'First user', user_path(1), class => 'ajax_link' %> 
<div id='some_container'> 
    to modify via javascript. 
</div> 

Deuxième étape - rendre le contrôleur capable de répondre en javascript:

# in users_controller.rb 
def show 
    @user = User.find(params[:id]) 
    respond_to do |wants| 
    wants.html 
    wants.js 
    end 
end 

prochain - créer le fichier js.erb correspondant, dans ce cas, il serait users/show.js.erb et faire tout votre magie javascript ici.

# show.js.erb 
alert('ajax answers!'); 
$('#some_container').html('hey this works great'); 
$('#some_container').after("<%= @user.name %>"); 

Veuillez noter que le code erb doit être placé entre guillemets.

Et maintenant, la dernière étape, pirater le lien avec jQuery dans votre fichier application.js comme ceci:

# in application.js 
$(document).ready(function() { 
    $(".ajax_link").live("click", function() { 
    $.getScript(this.href); 
    return false; 
    }); 
} 

Il est assez simple: si votre document est complètement chargé, tous les noeuds avec la classe « ajax_link » sont piratés et sur un événement de clic getScript obtient la réponse javascript de l'URL spécifiée dans l'attribut ancres href. A propos: cela fonctionnera aussi parfaitement comme lien normal si javascript est désactivé. Espère que cela vous aidera, si vous avez des questions, n'hésitez pas à demander! ;)

Answer 2

J'utilise les éléments suivants : vue

<%= link_to 'more ...', show_all_tags_path(:category => category.name), :class => 'ajax_link' %> 

: contrôleur (j'ai vérifié qu'il obtient ici)

def show_all_for_section 
    @category = TagCategory.find_by_name(params[:category]) 
    respond_to do |format| 
     format.html { redirect_to root_path } 
     format.js 
    end 
end 

show_all_for_section.js.erb 

alert('ajax answers!'); 

application.js

jQuery.noConflict(); 

jQuery(document).ready(function() { 
    jQuery(".ajax_link").live("click", function() { 
     jQuery.getScript(this.href); 
     return false; 
    }); 
}); 

Lorsque Je clique sur le lien, il jette juste une erreur js, mais ne fournit pas un numéro de ligne (voir sa capture d'écran e: http://dev.tristar-cimarron.com/rails_jquery.png)

Answer 3

qu'en est-il du jeton d'authenticité?vous êtes complètement ignorant

/* 
Post data via html 
Use the class post in your link declaration 
<%= link_to 'My link', my_new_path(),:class => "post" %> 
*/ 
jQuery.fn.postWithAjax = function() { 
    this.unbind('click', false); 
    this.click(function() { 
    $.post($(this).attr("href"), $(this).serialize(), null, "script"); 
    return false; 
    }); 
    return this; 
}; 

$('a.post').postWithAjax(); 

<a onclick="var f = document.createElement('form'); f.style.display = 'none'; this.parentNode.appendChild(f); f.method = 'POST'; f.action = this.href;var s = document.createElement('input'); s.setAttribute('type', 'hidden'); s.setAttribute('name', 'authenticity_token'); s.setAttribute('value', 'V6kGWHXmdepMOufNJBh0TZvvhON+Kag6GeR/MUj2dRk='); f.appendChild(s);f.submit();return false;" class="post add_to_cart " href="/line_items?product_id=547">Add to cart</a> 

le problème avec ce code est que le lien se thru d'une certaine manière, je ne pouvais pas figgure que sur encore, si des idées serait appréciée.