JQuery refactoring avait besoin d'aide

Question

Voici mon code javascript:

<script type="text/javascript"> 
    $(document).ready(function() { 

     var currentInput = ''; 
     var currentLabel = ''; 

     $("#userLookup").click(function() { 
      var url = "<%= Url.Action("ListAll" , "User") %>"; 
      currentInput = $("#User"); 
      currentLabel = $("#lblUser"); 
      openModal(url); 
      return false; 

     }); 

     $("#locationLookup").click(function() { 
      var url = "<%= Url.Action("ListAll" , "Location") %>"; 
      currentInput = $("#Location"); 
      currentLabel = $("#lblLocation"); 
      openModal(url); 
      return false; 
     }); 


     $(".selectable").live("click", function(e){ 
      currentInput.val($(this).attr('id')); 
      var labelText = $(this).parent().parent().find('td').eq(2).html(); 
      currentLabel.html(labelText); 
      $.fn.colorbox.close(); 
      e.preventDefault(); 
     }); 

    }); 

    function openModal(url){ 
     $.fn.colorbox({ 
       href:url 
       , open:true 
       , width: "400px" 
       , height: "300px" 
       }); 
    } 
</script> 

Et voici mon code HTML

<table width = "100%"> 
    <tr>    
     <td>Asset User Id:</td> 
     <td><%= Html.TextBox("User", Model.User, (object)new{style = "width:100px", maxLength="20"})%> 
      <a id="userLookup" href="#">Lookup User</a> 
     <label id="lblUser"></label> 
     <%=Html.ValidationMessage("User")%></td> 
    </tr>  
    <tr>    
     <td>Location Id:</td> 
     <td><%= Html.TextBox("Location", Model.Location, (object)new{style = "width:100px", maxLength="20"})%> 
      <a id="locationLookup" href="#">Lookup Location</a> 
     <label id="lblLocation"></label> 
     <%=Html.ValidationMessage("Location")%></td> 
    </tr>   
</table> 

J'ai beaucoup d'autres champs de recherche (que j'omis) similaire aux deux énumérées ci-dessus et i Je cherchais à voir si quelqu'un pourrait m'aider à trouver une méthode plus propre/sèche pour faire quelque chose comme ça?

Merci

Answer 1

Je voudrais ajouter l'URL de la boîte modale dans le lien lui-même. Ensuite, vous pouvez simplement ajouter une classe à ce lien pour invoquer la fonctionnalité requise. Cela signifie également que vous pouvez avoir votre JS dans un fichier externe et que votre JS ne dépend pas des méthodes d'assistance ASP.NET MVC Html.

Changer votre code html à quelque chose comme:

<table width = "100%"> 
    <tr>    
     <td>Asset User Id:</td> 
     <td> 
      <%= Html.TextBox("User", Model.User, (object)new{style = "width:100px", maxLength="20"})%> 
      <%= ActionLink("Lookup User", "ListAll", "User", null, new { class="lookup-link" }) %> 
      <label id="lblUser"></label> 
      <%=Html.ValidationMessage("User")%> 
     </td> 
    </tr>  
    <tr>    
     <td>Location Id:</td> 
     <td> 
      <%= Html.TextBox("Location", Model.Location, (object)new{style = "width:100px", maxLength="20"})%> 
      <%= ActionLink("Lookup Location", "ListAll", "Location", null, new { class="lookup-link" }) %> 
      <label id="lblLocation"></label> 
      <%=Html.ValidationMessage("Location")%> 
     </td> 
    </tr>   
</table> 

Ensuite, vous pouvez simplifier jQuery à quelque chose comme:

var currentInput = ''; 
var currentLabel = ''; 

$(".lookup-link").click(function() { 
    var url = $(this).attr("href"); 
    currentInput = $(this).siblings("input")[0]; 
    currentLabel = $(this).siblings("label")[0]; 
    openModal(url); 
    return false; 
}); 

Je ne testons de ce code, donc il y a probablement un million les erreurs. ;-)

HTHS,
Charles

Answer 2

Vous pourriez avoir une sorte de plugin jquery qui se fixe les gestionnaires de clic pour userLookup et locationLookup. Il faudrait sans doute 3 arguments:

1. url
2. entrée
3. étiquette

sinon, vous pourriez avoir une fonction qui prend 4 (le premier étant l'élément à lier le gestionnaire de clic pour) et exécute le code exact que vous avez ci-dessus.

Juste ne pas aller au-dessus. Si vous commencez à ajouter d'autres arguments pour des solutions uniques (par exemple, si vous souhaitez afficher modal avec "x" ou "close" en haut), vous compliquez probablement les choses.

Answer 3

Si vous utilisez une convention pour nommer tous vos éléments de recherche, vous pouvez créer une fonction générale qui fonctionnerait pour toutes les instances.

Quelque chose comme:

OpenLookupModal(lookupId) 
    { 
     var inputName = lookupId.id.substr(0, lookupId.id.indexOf('Lookup'); //take all of the id before the word "lookup" 
     var currentInput = $("#" + inputName)); 
     var currentLabel = $("#lbl" + inputName); 
     openModal(url); 
     return false; 
    } 

Pour l'utiliser:

$("#locationLookup").click(OpenLookupModal("#locationLookup")); 

Vous pouvez même obtenir la fantaisie et de lier l'événement clic de tous les id se terminant par "Recherche" dans une déclaration:

$("[id$='lookup']").click(OpenLookupModal(this)); 

Avertissement: Ce code n'a pas été testé, mais j'espère qu'il ets l'idée à travers.