title: Ember.js Ajax call is not working as expected
body: <p>I am new to Ember.js framework.</p>
  
  <p>I was trying to do a ajax call with from the Framework and not getting value as expected.</p>
  
  <p>Below is the code in Page -</p>
  
  <p>Link to first ajax call and it is working as expected.</p>
  
  <pre><code>{{#linkTo listemployee class="span3 btn btn-large btn-block"}}Employees{{/linkTo}}
  </code></pre>
  
  <p>Call data to populate the table -</p>
  
  <pre><code>App.ListemployeeRoute = Ember.Route.extend({
          setupController: function(controller) {
          $.getJSON('data/Tutorials.json', function(data) {
              controller.set('content',data);
          });
        }
      });
  </code></pre>
  
  <p>And the template for the data -</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="listemployee"&gt;
    &lt;h3 class="demo-panel-title"&gt;This is the list for Employee&lt;/h3&gt;
    &lt;table border=2&gt;
      &lt;tr&gt;&lt;td&gt;&lt;b&gt;Name&lt;/b&gt;&lt;/td&gt;&lt;td&gt;&lt;b&gt;Address&lt;/b&gt; &lt;/td&gt;&lt;td&gt;&lt;b&gt; Phone&lt;/b&gt;&lt;/td&gt;&lt;td colspan=3&gt;Action&lt;td&gt;&lt;/tr&gt;
      {{#each item in content}}
        &lt;tr&gt;&lt;td&gt;{{item.name}}&lt;/td&gt;&lt;td&gt;{{item.address}} &lt;/td&gt;&lt;td&gt; {{item.phone}}&lt;/td&gt;&lt;td&gt; {{#linkTo viewemployee item.name}}View{{/linkTo}} &lt;/td&gt;&lt;td&gt;Edit&lt;/td&gt;&lt;td&gt;Delete&lt;/td&gt;&lt;/tr&gt;
      {{/each}}
     &lt;/table&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>The above is working as expected.</p>
  
  <p>But when I clicked to </p>
  
  <pre><code>{{#linkTo viewemployee item.name}}View{{/linkTo}}
  </code></pre>
  
  <p>for above section -</p>
  
  <p>My Controller code is in App.js -</p>
  
  <pre><code>App.Router.map(function() {
        this.route("listemployee", { path: "/employees" });
        this.resource("viewemployee", {
          path: "/employees/:name"
        });
      });
  </code></pre>
  
  <p>And my <code>ViewemployeeRoute</code> is</p>
  
  <pre><code>App.ViewemployeeRoute = Ember.Route.extend({
        model: function(params) {
          return {name: params.name};
        },
        setupController: function(controller, model) {
          $.getJSON('data/Tutorials.json', function(data) {
              data.forEach(function(item){
                  if(item.name === model.name)
                  {
                      var tabledata = '&lt;table border = \"1\" &gt;&lt;tr&gt;&lt;td&gt;Name&lt;/td&gt;&lt;td&gt;'+item.name+'&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Address&lt;/td&gt;&lt;td&gt;'+item.address+'&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Phone&lt;/td&gt;&lt;td&gt;'+item.phone+'&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;';
                      $('#employeetable').html(tabledata);
                      controller.set('content',item);
                  }
              });
          });
        }
      });
  </code></pre>
  
  <p>and my template code is -</p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="viewemployee"&gt;
    &lt;h3 class="demo-panel-title"&gt;This is the View Employee template&lt;/h3&gt;
    &lt;div id = "employeetable"&gt;
  
    &lt;/div&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p>The Problem -</p>
  
  <p><strong>The data for the employee is not coming when I am clicking on the <code>View</code> Link for first time.</strong></p>
  
  <p><strong>But when I refresh the page, the data is coming as expected.</strong></p>
  
  <p>I think the problem is, when I click on the <code>View</code> link the response from ajax is coming later after page rendering.</p>
  
  <p>So, what should I do in code, so that I have the Employee Related Details on clicking the <code>View</code> link?</p>
  
  <p>Appreciate any help in this regard.</p>
  
  <p>Thanks.</p>
  
  <p><strong>Update 2 after trying from the answer. But still the same result is coming.</strong></p>
  
  <p>I have changed My app.js as follows -</p>
  
  <pre><code>App.ListemployeeRoute = Ember.Route.extend({  
          model: function() {
              return App.Employee.findAll();
          }
      });
  
      App.ViewemployeeRoute = Ember.Route.extend({
        model: function(params) {
          return App.Employee.find(params);
        }
      });
  
      App.Employee.reopenClass({
        findAll: function() {
          var result = Ember.ArrayProxy.create({content: []});
          var self = this;
          $.ajax({
            url: 'data/Tutorials.json',
            type: 'GET',
            success: function(data, textStatus, xhr) {
              result.set('content', data);
            },
            error: function(xhr, textStatus, errorThrown) {
              alert('error');
            }
          });
          return result;
        },
        find: function(params) {
          var result = Ember.Object.create({content: null});
          var self = this;
          $.ajax({
            url: 'data/Tutorials.json',
            type: 'GET',
            success: function(data, textStatus, xhr) {
                  data.forEach(function(item){
                      if(item.name === params.name)
                      {
                          result.set('content', item);
                      }
                  });
              },
            error: function(xhr, textStatus, errorThrown) {
              alert('not found');
            }
          });
          return result;
        }
      });
  </code></pre>
  
  <p>And the my data file is -</p>
  
  <pre><code>[
      {
          "name": "John",
          "address": "John's Home",
          "phone": "John's Phone"
      },
      {
          "name": "Harry",
          "address": "Harry's Home",
          "phone": "Harry's Phone"
      },
      {
          "name": "Tom",
          "address": "Tom's Home",
          "phone": "Tom's Phone"
      }
  ]
  </code></pre>
  
  <p>we can find the work here -</p>
  
  <p><a href="http://www.phloxblog.in/ember-crud-ajax/" rel="nofollow">http://www.phloxblog.in/ember-crud-ajax/</a></p>