title: Using autocomplete (Jquery) on AJAX loaded partial view (MVC4)
body: <p>I've got a view to create Project models which contains (among other things) a table of company-related data.</p>
  
  <p>I've added a button that does an AJAX call to retrieve a partial view and adds it to the table:</p>
  
  <pre><code>$("#addCompanyRoleProject").click(function () {
          cache: false,
          $.get('CompanyRoleProjectEntryRow', function (result) {
  
                  $("#companyTable").append(result); // Add the row to the table
  
          }, "html").done(function (result) { 
  
  
              });
  
              return false;
          });
  </code></pre>
  
  <p>The partial view is a &lt; tr > in wich one of the &lt; td >'s has an input field:</p>
  
  <pre><code>&lt;input class="company-role-project-company" type="text" data-containerPrefix="@ViewData["ContainerPrefix"]" /&gt;
  </code></pre>
  
  <p>I want that input field inside the partial view received by ajax to be an autocomplete (<a href="http://jqueryui.com/autocomplete/" rel="nofollow">http://jqueryui.com/autocomplete/</a>) so that the user is able to select from a set of options on each &lt; input > for each row of the table.</p>
  
  <p>I can't seem to access the correspondent field on my AJAX call inside the main view. I've tried using "filter()" and "find()" on both the success and done functions.</p>
  
  <p>I could put my javascript code inside the partial view, but it would then be replicated, not to mention possible ID colisions =\</p>
  
  <p>Any ideias on how to achieve this?</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I believe I have everything properly referenced in my view:</p>
  
  <pre><code>@section Scripts {
      @Styles.Render("~/Content/themes/base/css")
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/jqueryui")
      @Scripts.Render("~/bundles/jqueryval")
  
      &lt;&lt;&lt;&lt; My JS code is here &gt;&gt;&gt;&gt;
  
  }
  </code></pre>
  
  <p>And in my page's source code I can see:</p>
  
  <pre><code>&lt;script src="/Scripts/jquery-1.7.1.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery-ui-1.8.20.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery.unobtrusive-ajax.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery.validate.js"&gt;&lt;/script&gt;
  &lt;script src="/Scripts/jquery.validate.unobtrusive.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>I followed Darin Dimitrov's advice and added this on the ajax success callback, after appending the result to the table: </p>
  
  <pre><code>$('input.company-role-project-company', result).autocomplete({
      ...define source etc...
  });
  </code></pre>
  
  <p>But when I type something in the input field, it behaves like a regular text field...
  Is there something wrong in my process of using an ajax call to: request a partial view, append it to the table, make it an autocomplete ?</p>