2010-11-12 7 views
0

Je suis en train d'accomplir un observe_field dans des rails 3.observe_field dans Rails 3

Rails 2.3.5 J'ai: -

<%= observe_field 'query', :frequency => 2, 
          :update => "search_results",         
          :url => {:controller => params[:area], :action => "search",:area => params[:area]}, 
          :method=>:get, 
          :with => "query" %> 

Ce qui fonctionne très bien, vérifier mon text_field_tag ​​"requête" et mise à jour mes "search_results" toutes les deux secondes. C'est ce que j'essaie de simuler en utilisant un prototype.

Au moment où j'ai dans une application de base dans Rails 3: -

<script> 
document.observe("dom:loaded", function() { 
$('search').observe('change', 
respondToChange()); 
}); 
</script> 

ou

<script> 
document.observe("dom:loaded", function() { 
new Form.Element.Observer(
'search', 
1, 
respondToChange() 
) }); 
</script> 

qui deux déclenche la fonction respondToChange lorsque la page se charge, en dépit du « dom: chargé ", puis ne plus observer.

Est-ce que quelqu'un a une idée de la façon dont je pourrais obtenir les vérifications répétées de l'observateur sur ma "recherche" text_field_tag.

+2

Man, je vous suggère de travailler un peu plus sur la mise en forme de question, il est un peu en désordre. –

+0

Merci, je viens d'apprendre comment et j'espère que je l'ai édité correctement – MDM

Répondre

0

Merci à « themiddleman » et « agnaki » quelque part dans l'éther, j'ai résolu le problème:

Utilisez respondToChange, non respondToChange()

Comme les parenthèses() exécuter la fonction, alors que sans() il le fait référence.

$('search').observe('change', respondToChange); 
// only triggers when the focus is moved away from the text_field. 

new Form.Element.Observer(
    'search', 
    1, 
respondToChange 
) }); 

//................................repeatedly checks the text_field,every 1 second, and call the function if there is a any change. 
+0

Je l'ai craqué. $ ('search'). up ('formulaire'). submit() – MDM

0

Voici mon code complet si quelqu'un est intéressé. Ce code observe text_field_tag ​​"recherche" toutes les 2 secondes, et s'il y a un changement dans la valeur, il déclenche automatiquement une recherche. Le bouton de soumission peut maintenant être supprimé, je pense. Je pourrais ajouter :autocomplete => "off", :onKeyPress=>"return disableEnterKey(event)") %> à text_field_tag ​​pour désactiver la clé de retour, pas sûr.

Dans mon index.html.erb je:

<h1>Listing homepages</h1> 
<div id = "testsearch"> 
    <%=render :partial => 'homepage'%>  
</div> 
<%= form_tag homepages_path, :method => 'get', :remote => true do %> 
<%= label_tag(:search, "Search for:") %> 
<%= text_field_tag :search, params[:search]%> 
<%= submit_tag "search", :name => nil %> 
<%end%> 

<%= set_focus_to_id 'search' %>    // I have a helper "set_focus_to_id" 

<script> 
document.observe("dom:loaded", function() { // ensures the page is loaded first 
new Form.Element.Observer(     // Observes the text_field_tag every 2 seconds 
    'search', 
    2, 
    respondToChange       //refrences the function in the Layout <head> 
)           // on a change in search calls respondToChange 
}); 
</script> 
<br /> 
<%= link_to 'New Homepage', new_homepage_path %> 

Dans mon application tête de la mise en page je:

<script> 
function respondToChange() { 
$('search').up('form').submit()   // The ".up finds the form in the DOM" 
}; 
</script 

Dans mon contrôleur index # J'ai:

def index 
    @homepages = Homepage.search(params[:search]) //".search method is in the Model" 
    respond_to do |format| 
    format.html # index.html.erb 
    format.xml { render :xml => @homepages } 
    format.js 
end 
end 

Dans mon modèle j'ai:

def self.search(search_item) 
    if search_item 
    self.where('section LIKE ?', "%#{search_item}%") //Handles the ajax call. 
    else 
    self.all           //Handles the html call on startup. 
    end 
end 

Dans l'assistant, j'ai:

def set_focus_to_id(id) 
    javascript_tag("$('#{id}').focus()"); 
end 

Dans le "_homepage" je partielle:

<table> 
    <tr> 
    <th>Id</th> 
    <th>Section</th> 
    <th>Link</th> 
    <th>Description</th> 
    <th></th> 
    <th></th> 
    <th></th> 
</tr> 

<% for homepage in @homepages %> 

    <tr> 
    <td><%= homepage.id %></td> 
    <td><%= homepage.section %></td> 
    <td><%= homepage.link %></td> 
    <td><%= homepage.description %></td> 
    <td><%= link_to 'Show', homepage %></td> 
    <td><%= link_to 'Edit', edit_homepage_path(homepage) %></td> 
    <td><%= link_to 'Destroy', homepage, :confirm => 'Are you sure?', :method => :delete %></td> 
    </tr> 
<%end%> 

</table> 

Et dans le index.js.erb je:

$('testsearch').update("<%= escape_javascript(render :partial => 'homepage') %>"); 

Si quelqu'un a des commentaires sur la façon dont je pourrais améliorer cela, s'il vous plaît contactez-moi ou dites-le.

0

Je pense que j'ai maintenant résolu le problème de faire un appel ajax via la programmation.Je vais devoir le vérifier dans tous les types de navigateurs, mais pour le moment il fonctionne dans Firefox et Safari. J'ai maintenant déplacé aussi javascript "document.observe (" dom: loaded "et la fonction qu'il appelle" respondToChange() "à la tête de l'application avec content_for Tous les autres fichiers restent les mêmes

Dans mon index.html .erb je maintenant: -

<h1>Listing homepages</h1> 
<div id = "testsearch"> 
    <%=render :partial => 'homepage'%>  
</div> 
<%= form_tag homepages_path, :method => 'get', :remote => true do %> 
    <%= label_tag(:search, "Search for:") %> 
<%= text_field_tag :search, params[:search]%> 
<%= submit_tag "search", :name => nil %> 
<%end%> 

<%= set_focus_to_id 'search' %>    

<% content_for :search_javascript do %> 

function respondToChange() { 

    var pars = 'search=' + $('search').getValue() 

     new Ajax.Request("<%= homepages_path %>" ,{ 
     method: 'get', 
     parameters: pars 
    }); 
}; 

document.observe("dom:loaded", function() { 
    new Form.Element.Observer(    
     'search', 
     2, 
     respondToChange 

    )           
}); 

<% end %> 

<br /> 
<%= link_to 'New Homepage', new_homepage_path %> 

Dans mon dossier de mise en page de l'application que j'ai maintenant: - GardenR3 <% = stylesheet_link_tag: tous%> <% = javascript_include_tag: par défaut%> <% = csrf_meta_tag%>

<script> 
<%= yield :search_javascript %> 
</script> 

</head> 
<body> 

<%= yield %> 

</body> 
</html>