CODEWITHSUNDEEP
ruby-on-railsrubyruby-on-rails-3jqueryruby-on-rails-3.2
regmiprem
regmiprem

Reputation: 735

using Ajax in Rails works as whole page render

Here i want to call _employee_registers.html.erb via ajax. only the search output will display using ajax. i am following this http://railscasts.com/episodes/240-search-sort-paginate-with-ajax . and it works well. But i want to implement it in my project now.

my index.html.erb

<%= link_to 'New Employee register', new_employee_register_path %>
<%= form_tag employee_registers_path, :method => 'get', :id => "employee_registers_search" do %>
  <p>
    <%= select_tag "fieldtype", options_for_select([ "name", "email" ], "name") %>
    <%= text_field_tag :search, params[:search] %>
    <%= submit_tag "Search", :name => nil%>
  </p>
  <div id="employee_registers"><%= render 'employee_registers' %></div>
<% end %>
<br />

my index.js.erb

$("#employee_registers").html("<%= escape_javascript(render("employee_registers")) %>");

my _employee_registers.html.erb partial

<h1>Listing employees</h1>
<% @employee_registers.each do |employee_register| %>
<div class="span2 curve">
    <div class="profile_img">
        <%= image_tag employee_register.image.url,:size => "150x180"%>
</div>
         <p><strong><%= employee_register.first_name %><%= employee_register.last_name %>
         <br>
         <%= employee_register.department.name%><%=employee_register.division.name%><br>
            <%=mail_to employee_register.wemail%><br></strong></p>
    %><br/></br/>
<% end %>

</div>
<br />

my application.js

$(function() {
  $("#employee_registers th a").live("click", function() {
          $.getScript(this.href);
        return false;
         });
       $("#employee_registers_search input").keyup(function() {
       $.get($("#employee_registers_search").attr("action"), $("#employee_registers_search").serialize(), null, "script");
       return false;
  });

my problem is instead of refresing only that div 

$("#employee_register").html

It is giving output of all the page and ajax is not workin.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link href="/assets/application.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-wysihtml5/core.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-wysihtml5/index.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/bootstrap-responsive.css?body=1" media="all" rel="stylesheet" type="text/css" />
<link href="/assets/companies.css?body=1" media="all" rel="stylesheet" type="text/css" />

<script media="all" src="/assets/bootstrap.js?body=1" type="text/javascript"></script>

What could be the problem?

Upvotes: 0

Views: 1184

Answers (2)

Andreas Lyngstad
Andreas Lyngstad

Reputation: 4927

There is a few problems with your code.

I think the main problem is that you want your form to give employee_registers based on a search, but you don't have a javascript response from the search action.

Lets say you have a search action like this

def search
 @employee_registers = Employee.where(:name => params[:search])
end

then in your search.js.erb file 

$("#employee_registers").append("<%= j(render @employee_registers)  %>

(the j() is an alias for escape_javascript() )

In your _employee_registers.html.erb partial

<div class="span2 curve">
    <div class="profile_img">
        <%= image_tag employee_register.image.url,:size => "150x180"%>
    </div>
    <p><strong><%= employee_register.first_name %><%= employee_register.last_name %>
    <br>
    <%= employee_register.department.name%><%=employee_register.division.name%><br>
    <%=mail_to employee_register.wemail%><br></strong></p>
    <br/></br/>
</div>
<br />

Now you have to change some code in the index.html.erb file

<%= link_to 'New Employee register', new_employee_register_path %>
<%= form_tag employee_registers_path, , :remote => true, :method => 'get', :id =>    "employee_registers_search" do %>
  <p>
    <%= select_tag "fieldtype", options_for_select([ "name", "email" ], "name") %>
    <%= text_field_tag :search, params[:search] %>
    <%= submit_tag "Search", :name => nil%>
  </p>
  <div id="employee_registers"></div>
<% end %>
<br />

I have not tested this and there might be errors elsewhere in your code. Your question is containing a lot of code and you explain what the error is, thats good. But, it is not clear what you want to do. Try to explain a little more and you'll get better answers.

Upvotes: 1

sameera207
sameera207

Reputation: 16629

I can see 2 things,

1) make your form remote => true

<%= form_tag employee_registers_path, :method => 'get', :remote => true, :id => "employee_registers_search" do %>

2) its little unusual that you have the users list inside the search form itself, try to get it outside the form tag (this is nothing to do with your error, just as a practice)

HTH

Upvotes: 1

Related Questions