0

我想知道是否有人可以提示我如何在 Jquery 对话框中设置搜索表单。我希望这可以通过 AJAX 工作。我曾尝试使用这样的东西：

<%= form_tag teachers_path, :method => 'get', :remote=> 'true' do %>
    <%= text_field_tag :search, params[:search] %>
    <%= submit_tag "Search", :name => nil %>
<% end %>

然后在我的控制器上：

def index
    @teachers= Teacher.search(params[:search])
end

和型号：

def self.search(search)
  if search
    find(:all, :conditions => ['name LIKE ?', "%#{search}%"])
  else
    find(:all)
  end
end

现在，当我点击“提交”按钮时，因为它有一个“远程”属性，它不会强制页面重新加载，但是搜索的事情也不会发生。我知道我错过了一些东西，或者我可能走错了路，所以在这里非常感谢你。

我尽力寻找这个问题的合适答案，但最终找不到任何东西。

4

1 回答 1

0

经过几个小时的研究和测试，我设法做出了我想要的。下面我将发布我所做的。

控制器

def index
    @teachers= Teacher.search(params[:search])
end

模型

 def self.search(search)
        if search
            case $search_by
                when '1'
                    find(:all, :conditions => ['name ILIKE ?', "%#{search}%"])
                when '2'
                    find(:all, :conditions => ['address ILIKE ?', "%#{search}%"])
            end
        else
            find(:all)
        end
    end

指数

<table>
  <tr>
    <td><b><%= label_tag "Teacher:" %></td>
    <td><%= text_field_tag(:teacher," " ,:id => "teacher", :size => 3,     :onchange=>"selection('typed_teacher', this)")%>
    <span id="filtros"><%= image_tag "SearchIcon2.png",   :onclick=>"selection('search_teacher', this)", :height =>'20', :width => '20', :title=>"Search", :valign=>"middle", :class=>"pin_image" %></td>
  </tr>
</table>

图像标签是调用对话框的标签。“选择”功能如下所述。基本上它所做的是调出老师的信息（姓名，地址，电话，ID）并将其绘制在屏幕上（此示例将省略数据显示，因为它与代码无关），我需要的是“id ”老师的。我输入了 text_field（如果我知道老师的 id）或在对话框中搜索它，这就是我想要完成的。

选择功能

function selection(pmodel,elObj) 
    {
        var dataString = 'model='+pmodel+'&search='+code+';  
        document.getElementById('mydivdialog').innerHTML=" ";
        $.ajax(
        {  
        type: "GET",  
        url: "/teachers/show",  
        data: dataString  
        }); 

        return false;
    };

这调用了我文件夹中的“show.js.erb”文件。接下来我解释里面有什么（只有对话相关的部分）。

显示.js.erb

$( "#midivdialog" ).dialog(
                {
                    modal: true,
                    height: 400,
                    width: 550,
                    stack: true,
                    buttons: 
                        {
                    Cancel: function() 
                      {
                         $( this ).dialog( "close" );
                      }
                   }
                }
            );
$(document.getElementById("mydivdialog").innerHTML= " ");
$("<%= escape_javascript(render "list") %>").appendTo("#mydivdialog");
$("<%= escape_javascript(render "teachers") %>").appendTo("#theteachers");

“列表”部分是我将进行搜索的地方，这是那里的内容：

<%= form_tag(@teachers, :method=> "get", :id=> "searching", :remote=> true) do %>
    <b>Search By: </b>  
    <fieldset class = "ui-widget-content ui-corner-all", style = "width: 420px;  padding: 0px;">
        <%= radio_button_tag :search_by, '1' %> Name| <%= radio_button_tag :buscar_por, '2' %> Address
    </fieldset>
    <%= text_field_tag :search, params[:search] %>
    <%= submit_tag "Search", :form=> "searching", :name => nil %>
<% end %>   

<div id= "the_teachers"></div>

这是每当提交“搜索”按钮时将呈现的“教师”部分：

<font size="2">
    <% @buscar = params[:search] %>
    <% @bancas = Banca.search(@buscar) %>                        
    <table class = "tabla">
        <tbody> 
            <tr class = "ui-widget-header">
                <th>ID</th>
                <th>Name</th>
                <th>Address</th>
                <th>Phone Number</th>
            <% @bancas.each do |det| %>
               <tr onclick="takeGeneric('<%= det.teacher_id %>','<%= det.name %>','<%= det.address %>','<%= det.phone %>')">
                        <td><%= det.teacher_id %></td>
                        <td><%= det.name %></td>
                        <td><%= det.address %></td>
                        <td><%= det.phone %></td>
                    </tr>
                <% end %>
            <% end %>
        <tbody>
    </table>
</font>

以下代码位于“教师”部分中，它处理 onclick 事件。这与对话框无关，但我想我会添加它以防有人需要它。

<script>
    function takeGeneric(paramcod, paramname, paramaddress, paramphone)
      { 
      $( "#teacher" ).val(paramcod);
      $("#teacherdata").replaceWith('<div id="teacherdata"><table><thead><tr><td style = "width: 250px">'+paramname+'</td></tr> <tr><td>'+paramaddress+'</td></tr> <tr><td>'+paramphone+'</td></tr></thead></table></div>');
      $(document.getElementById('teacherdata').style.fontSize = "13px");

       $( "#mydivdialog" ).dialog( "close" );   
      };

</script>

好的，就是这样。它应该可以工作（它适合我）。

于 2013-11-14T19:46:52.543 回答