Saisie semi-automatique jQuery sur le contrôleur d'utilisateur dans le répéteur .NET

Question

J'ai une fonction de recherche Multiview sur un contrôleur d'utilisateur Web qui est appelé dans un répéteur, OHMY !! J'ai des sessions de formation énumérées sur une page, appelant chacune un contrôleur d'utilisateur Web EmployeeSearch afin que les gens puissent rechercher des employés à ajouter à la session de formation. J'ai les noms des employés et les ID des employés répertoriés dans JS sur la page et en utilisant la saisie semi-automatique jQuery je les ai chercher l'employé et remplir un champ caché dans le contrôleur de l'utilisateur. Une fois le processus terminé, ils ont la possibilité d'ajouter un autre employé. J'ai donc fait fonctionner Autocompelte dans toutes les boîtes de recherche des employés, mais la saisie semi-automatique de la recherche initiale (postback) ne fonctionnera plus.

Alors je mis à jour $(). Prêt (function() à pageLoad() de sorte qu'il fonctionne correctement sur plusieurs recherches, mais seulement dans le dernier élément du répéteur (jQuery est chargé sur le contrôleur de l'utilisateur)

Pour votre information : J'ai la chaîne JS définie comme EmployeeName | ID et jQuery affiche le nom de l'employé et s'ils choisissent le jette l'ID dans un ASP: CHAMP HIDDEN

<script type="text/javascript"> 

    format_item = function(item, position, length) { 
     var str = item.toString().split("|", 2);   
     return str[0]; 
    } 

    function pageLoad() {  
     $("#<%=tb_EmployeeName.ClientID %>").autocomplete(EmployeeList, { 
      minChars: 0, 
      width: 500, 
      matchContains: true, 
      autoFill: false, 
      scrollHeight: 300, 
      scroll: true, 
      formatItem: format_item, 
      formatMatch: format_item, 
      formatResult: format_item 
     }); 
     $("#<%=tb_EmployeeName.ClientID %>").result(function(event, data, formatted) {     
      var str = data.toString().split("|", 2); 
      $("#<%=hf_EmployeeID.ClientID %>").val(str[1]); 
     }); 
    };  

    </script> 

Je devine déjà que, en répétant pageLoad au sein de l'utilisateur Controll Je remplace la page précédenteChargement

LA QUESTION: Y at-il un moyen de contourner cela, une façon d'avoir tous les jQuery apparaissent dans un seul chargement de page ou d'une façon ou d'une autre d'avoir un seul appel jquery pour gérer tous mes champs de recherche?

Je ne peux pas déplacer le jQuery dans la page appelant tous les contrôleurs parce que je n'ai aucun moyen de référencer le tb_EmployeeName spécifique TextBox et hf_EmployeeID champ caché.

Merci beaucoup pour toute aide ou aperçu que vous pouvez me donner dans ce problème.

C'est le Multiview que sur le contrôleur de l'utilisateur

 <asp:MultiView ID="mv_EmployeeArea" runat="server" ActiveViewIndex="0"> 

     <asp:View ID="vw_Search" runat="server">     
      <asp:Panel ID="eSearch" runat="server"> 
       <b>Signup Employee Search</b> (<i>Last Name, First Name</i>)<br /> 
       <asp:TextBox ID="tb_EmployeeName" class="EmployeeSearch" runat="server"></asp:TextBox> 
       <asp:HiddenField ID="hf_EmployeeID" runat="server" /> 

       <asp:Button ID="btn_Search" runat="server" Text="Search" /> 
      </asp:Panel>      
     </asp:View> 

     <asp:View ID="vw_Confirm" runat="server"> 
      <b>Signup Confirmation</b> 
      <asp:FormView ID="fv_EmployeeInfo" runat="server"> 
       <ItemTemplate> 
        <%#(Eval("LastName"))%>, <%#(Eval("FirstName"))%><br /> 
       </ItemTemplate> 
      </asp:FormView>  
      <asp:Button ID="btn_Confirm" runat="server" Text="Signup this employee" /> &nbsp; <asp:Button ID="btn_Reset3" runat="server" Text="Reset" /> 
     </asp:View> 

     <asp:View ID="vw_ThankYou" runat="server"> 
      <b>Thank You</b><br /> 
      The employee has been signed up and an email confirmation has been sent out.<br /><br /> 
      <asp:Button ID="btn_Reset" runat="server" Text="Reset" /> 
     </asp:View>    

    </asp:MultiView> 

------------ ------------- MISE À JOUR

Merci à Nalum j'ai pu résoudre le problème d'une manière beaucoup mieux alors mon essai précédent (supprimé). Maintenant, j'ai une seule fonction qui gère toutes les instances pour la boîte de recherche sans avoir à générer plus de code pour chaque boîte de recherche en cours de création.

Le javascript suivant est appelé sur la page parent qui contient le répéteur.

format_item = function(item, position, length) { 
    var str = item.toString().split("|", 2); 
    return str[0]; 
} 

function pageLoad() { 
    $(".ea_Autocomplete").each(function(i, element) { 

     var tb_EmployeeName = $(this).children('input[id*=tb_EmployeeName]:first') 
     var hf_EmployeeID = $(this).children('input[id*=hf_EmployeeID]:first') 

     tb_EmployeeName.autocomplete(EmployeeList, { 
      minChars: 0, 
      width: 500, 
      matchContains: true, 
      autoFill: false, 
      scrollHeight: 300, 
      scroll: true, 
      formatItem: format_item, 
      formatMatch: format_item, 
      formatResult: format_item 
     }); 

     tb_EmployeeName.result(function(event, data, formatted) { 
      var str = data.toString().split("|", 2); 
      hf_EmployeeID.val(str[1]); 
     }); 


    }); 
}; 

Je ne change rien dans la Multiview au-delà d'envelopper les deux entrées dans un div avec la classe ea_Autocomplete

<asp:Panel ID="eSearch" runat="server"> 
       <b>Signup Employee Search</b> (<i>Last Name, First Name</i>)<br /> 
       <div class="ea_Autocomplete"> 
        <asp:TextBox ID="tb_EmployeeName" class="EmployeeSearch" runat="server"></asp:TextBox> 
        <asp:HiddenField ID="hf_EmployeeID" runat="server" /> 
       </div>                     

       <asp:Button ID="btn_Search" runat="server" Text="Search" /> 
    </asp:Panel> 

Merci encore Nalum!

Answer 1

Je devine un peu ici, je ne sais pas vraiment asp.net alors corrigez-moi si je me trompe.

Je suppose que multiview fait une sorte de chose de type ajax en arrière-plan de asp.net auquel cas lorsque votre formulaire de recherche est rechargé le jQuery.autocomplete ne s'appliquerait pas au nouveau formulaire.

Plus que probablement je me trompe complètement dans ce que je viens de dire cependant.

---

Modifier pour mon deuxième commentaire.

$('.autocomplete').each(function(i,element){ 
    $(element).autocomplete({...}); 
    $(element).result(function(event, data, formatted) { 
     // Now based on you're element id you can build up an id and work with that 
     var id = element.id + '-extra-stuff';    
     var str = data.toString().split("|", 2); 
     $('#' + id).val(str[1]); 
    }); 
});