twitter bootstrap modal avec ruby on rails
J'ai couru dans un peu d'un problème et d'un gratte la tête, que je ne suis pas sûr de savoir si ce que je veux faire est possible avec RoR.
Un peu de fond de l'info: j'ai une application avec plusieurs contrôleurs... et voudrais travailler avec 2 d'entre eux pour cette modal exemple. Le premier est un users_controller et l'autre est un recommendations_controller.
Voici ce que je suis en train de faire: Dans l'index d'utilisateur de la vue que j'ai une listes de postes. Chaque poste a un recommander bouton. Si un utilisateur clique dessus, il/elle est envoyée à la recommandation de la page d'index, et on peut rechercher et trouver un utilisateur qu'il/elle aimerait partager le poste avec. La raison pour laquelle je l'ai configuré de cette manière est parce que la Recommandation modèle crée le recommander relation.
Je voudrais comme-il donc lorsque l'utilisateur clique sur le recommander sur le bouton d'index d'Utilisateur de la page, un modale s'affiche (celui qui accède à la recommandation du contrôleur) et l'utilisateur peut rechercher l'utilisateur qu'il/elle aimerait partager le poste avec. En gros, je voudrais savoir si il est possible d'accéder à la Recommandation du contrôleur via l'Utilisateur du contrôleur de la vue index page.
Si elle ne l'est pas, est-il un travail? Je peux poster le code que j'ai si c'est utile, mais je ne suis pas sûr que cela aide dans ce cas-ainsi que je l'essaie pour voir si c'est encore possible de faire ce que je suis en train de faire.
Merci!
Plus De Détails:
recommendations_controller:
def index
@user = Search.find_users(params[:name], current_profile)
respond_to do |format|
format.html
format.js
end
end
index.js.haml (situé dans l'avis ou les recommandations d'un dossier)
:plain
$(#my-modal).show();
index.html.haml (situé dans l'avis ou les recommandations d'un dossier)
= form_tag post_recommendations_url, :method => "get" do
= text_field_tag :name, '', :class => "span12", :placeholder => "Please enter the name of the users you would like to share this post with."
%center
= submit_tag "Search", :class => "btn btn-primary"
index.html.haml (situé dans le view/posts dossier)
%a{:href => "#{post_recommendations_path(post)}", :remote => true}
%i.icon-share.icon-large
Recommend Post
#my-modal.modal.hide.fade
.modal-header
%a.close{"data-dismiss" => "modal"} ×
%h6 This is a header
.modal-body
%p This is where I would like the contents of the index.html.haml file, located in the view/recommendations folder to appear.
Partie 2: Afficher les résultats de la recherche à l'intérieur de l'modal/partielle
Matzi, à l'instant, un utilisateur clique sur un lien proximité du poste qu'ils veulent à recommander. Ce lien rend le modal avec un partiel (_recommendation.html.haml) à l'intérieur d'elle.
Cette partielle (maintenant à l'intérieur du modal) contient de la recherche form_tag
et le code pour rendre tous les utilisateurs qui correspondent aux résultats de la recherche. Malheureusement, lorsque j'essaie d'exécuter une recherche en entrant un nom et en cliquant sur le bouton de recherche (encore une fois, maintenant situé à l'intérieur de la modale), il me prend à l'adresse url suivante au lieu de rendre les résultats à l'intérieur de l'modal.
http://localhost:3000/posts/2/recommendations?utf8=%E2%9C%93&name=Test&commit=Search
voici ce que ma mise à jour index.html.haml (situé dans le view/posts dossier) ressemble:
= link_to 'Recommend Post', post_recommendations_path(post), :remote => true, "data-toggle" => "modal"
#my-modal.modal.hide
.modal-header
%a.close{"data-dismiss" => "modal"} ×
%h6
%i.icon-share.icon-large
Recommend Post
.modal-body
#modal-rec-body
%p *this is where _recommendation.html.haml is rendered*
mis à jour index.js.haml
:plain
$("#modal-rec-body").html("#{escape_javascript(render('recommendations/recommendation'))}");
$('#my-modal').modal({
keyboard: true,
show: true
});
_recommendation.html.haml
.span12
= form_tag post_recommendations_path, :method => "get" do
= text_field_tag :name, '', :class => "span12", :placeholder => "Please enter the name of the user you would like to share this post with.", :style => "max-width:520px;"
%center
= submit_tag "Search", :class => "btn btn-primary", :remote => "true"
- @user.each do |i|
- unless current_profile == i
.row-fluid
.span6
.row-fluid
.well{:style => "margin-left:0px;"}
.row-fluid
.span2
=image_tag i.avatar(:bio), :class=> "sidebar_avatar"
.span6
%dl{:style => "margin:0px"}
%dt
%i.icon-user
Name
%dd= i.name
%dt
%i.icon-map-marker
Location
%dd= i.location
.span4
- form_for :recommendation do |r|
= r.hidden_field :friend_id, :value => i.account.id
= r.submit "Send Recommendation", :class => "btn btn-primary"
Problème: Malheureusement, il semble que lorsque je clique sur le submit (recherche) bouton à l'intérieur du modal au lieu de rendre les résultats à l'intérieur de l'modal, il le redirige le navigateur vers le post_recommendations_path (posts/post.id/recommendations)
. Je voudrais afficher les résultats de la recherche à l'intérieur de la modale sans l'avoir rediriger vers le post des recommandations chemin.
Comme toujours, merci beaucoup! Je suis extrêmement reconnaissant pour votre aide, et j'ai obtenu une bien meilleure compréhension de l'AJAX grâce à vous. Merci!!!!
OriginalL'auteur slovak_100 | 2012-04-24
Vous devez vous connecter pour publier un commentaire.
Bien sûr, vous pouvez le faire, mais il a besoin de quelque ajax magie.
Tout d'abord, vous avez besoin pour créer une action, de répondre .js demandes, dans la recommandation du contrôleur. Il est fait jusqu'à présent dans la mise à jour. Mais, votre .js n'est pas tout à fait droit. Le problème, c'est que vous rendre le formulaire modal de la poste vue, mais probablement dans le poste de contrôleur, vous n'avez pas le droit de champs. Je recommande ce qui suit .js.erb:
Cela remplit le modal avec le formulaire. La prochaine étape est de faire une demande à distance à partir de ce formulaire. Modifier vos messages/l'indice de la manière suivante:
La différence est la
:remote => true
balise, cela envoie une requête ajax à votre contrôleur, alors vous devez préparer .js et .réponse html (en cas de non-JS sur le client). L' .js doit masquer le formulaire modal, et peut actualiser l'origine de la page, le code html peut vous rediriger retour à la poste.Partie 2:
Le problème est la :partie à distance. Il doit faire partie de la forme de la définition de, pas le bouton soumettre. Mon erreur.
J'ai trouvé ce guide maintenant, il semble assez bon.
J'espère que cela aide! Demander si quelque chose n'est pas clair.
Ok, consultez la mise à jour de la solution. J'espère que c'est mieux que la première. 🙂
grâce matzi, malheureusement, le js n'est pas exécutée. Simplement, il redirige vers le ../recommandations/id/ url sans jamais passer par js. Si l' .js.erb fichier doit être situé dans les recommandations de dossier ou les postes du dossier? Je pense qu'il a quelque chose à voir avec les recommandations lien... je pense que c'est simplement en envoyant un chemin prédéterminé sans appel js, même si elle a un :distance => true condition. Votre aide est très apprécié, merci encore!
%a{:href => "#{post_recommendations_path(post)}", :remote => true}
Elle ne fonctionne pas, vous devez utiliserlink_to 'Recommend post', post_recommendations_path(post), :remote => true
La distance de la balise n'est pas la balise html du paramètre, c'est un tag pour link_to, pour créer une requête ajax lien.Matzi, je vous remercie beaucoup... la
link_to
n'a en effet lancer ajax. Cependant, il ne veut pas montrer le modal. J'ai limitéindex.js.haml
de ce qui suit:$(#my-modal).show();
et le modal ne pas afficher. Quand j'ai remplacé le code avec une base " alert('ajax fonctionne!"); le" alerte, l'alerte a travaillé--ajax est au travail, mais pour une raison quelconque, il ne veut pas charger mon modal. Mon modal être dans leindex.html.haml (located in the view/posts folder)
? Matzi, je vous remercie encore beaucoup pour votre aide... vous êtes une légende!OriginalL'auteur Matzi