c# - Ajax, I want use a search box in my layout view, but it fails when I am not on the "home/index" -

this script runs inside of file entitled otf.js. form listed below run in _layout.cshtml in shared folder. script execute without problem on main website page other page not redirect user. did use fiddler2 see if ajax returning information , found did recover data not redirect , pass data main page.

$(function () {     var ajaxformsubmit = function () {          var $form = $(this);          var options = {             url: $form.attr("action"),             type: $form.attr("method"),             data: $form.serialize()         };          $.ajax(options).done(function(data) {              var $target = $($form.attr("data-otf-target"));             $target.replacewith(data);           });         return false;     };      var submitautocompleteform = function(event, ui) {         var $input = $(this);         $input.val(ui.item.label);         var $form = $input.parents("form:first");         $form.attr("action", "/home/index"); // doesn't work on other pages         $form.submit();      };      var createautocomplete = function() {         var $input = $(this);          var options = {             source: $input.attr("data-otf-autocomplete"),             autofocus: "true",             select:  submitautocompleteform          };         $input.autocomplete(options);     };      var getpage = function() {         var $a = $(this);          var options = {             url: $a.attr("href"),             data: $("form").serialize(),             type: "get"         };          $.ajax(options).done(function(data) {             var target = $a.parents("div.pagedlist").attr("data-otf-target");             $(target).replacewith(data);         });         return false;     };       $("form[data-otf-ajax='true']").submit(ajaxformsubmit);     $("input[data-otf-autocomplete]").each(createautocomplete);     $(".main-content").on("click", ".pagedlist a[href]", getpage);  }); 

my form in layout view of website:

 <form action="@url.action("index","home")" method="get"                     data-otf-ajax="true" data-otf-target="#restaurantlist" >                     <input type="search" name="searchterm" data-otf-autocomplete="@url.action("autocomplete","home")"/>                     <input type="submit" value="search name" />                 </form> 

the autocomplete gets list of restaurants not redirect me /home/index/ , save looking for.

to make ajax function work seamlessly, need have div housed results in body surrounding @renderbody() , seen below:

    <div id="body">                     @rendersection("featured", required: false)         <section class="content-wrapper main-content clear-fix">             <div id="restaurantlist">              @renderbody()                 </div>         </section>     </div> 

i did try in in past problem became pagedlist function, not work. because of code listed below:

    $.ajax(options).done(function(data) {         var target = $a.parents("div.pagedlist").attr("data-otf-target");         $(target).replacewith(data);     });     return false; }; 

essentially code finding parents of div attribute "data-otf-target" , replacing it. error take place on other pages because other pages not calling partial view render list of restaurants. therefore, needed make sure div named, "restaurantlist", being recreated when autocomplete ajax used , user click 1 of pagedlist icons.

i did replacing ajax code this:

    $.ajax(options).done(function (data) {         var target = $a.parents("div.pagedlist").attr("data-otf-target");         $(target).replacewith("<div id='restaurantlist'>" + data + "</div>");      }); 

thank looking , thank helpful edits.