Question

我想知道是否有人可以告诉我如何在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

现在，当我点击“提交”按钮时，因为它有一个“远程”属性，它不会强制页面重新加载，但随后搜索事件也不会发生。我知道我错过了一些东西，或者可能是我在错误的轨道上，所以这里很受欢迎。

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

Answer 1

经过几个小时的研究和测试，我已经成功实现了我的目标。下面我将发布我所做的。

控制器

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”文件。接下来我解释那里有什么（只有对话框相关部分）。

Show.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");

“list”部分是我将要进行搜索的地方，以下是其中的内容：

<%= 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>

好的，就是这样。它应该工作（它适合我）。我花了一段时间才弄清楚这一点，虽然它看起来很简单，但它并不适合我：P lol我和rails / jscript一起工作了大约5个月，所以我只能这样做：p

感谢所有检查过的人。

在JQuery对话框上搜索表单

1 个答案: