JQuery refactoring help needed

Question

Hi all,

Here's my javascript code:

<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>

And here's my 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>

I have plenty of more lookup fields (which i omitted) similar to the two listed above and i was looking to see if anyone could help me come up with a cleaner/dry method of doing something like this?

Thanks

Answer 1

You could have a sort of jquery plugin that attaches the click handlers for userLookup and locationLookup. It would probably take 3 arguments:

1. url
2. input
3. label

otherwise, you could have a function that takes 4 (the first being the item to bind the click handler to) and runs the exact code you have above.

Just don't go over the top. If you start adding more arguments for one-off solutions (e.g. boolean whether to show modal with "x" or "close" at the top), then probably you're just complicating things.

Answer 2

If you use a convention for naming all of your lookup elements you could create a general funciton that would work for all instances.

Something like:

    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;
    }

To use it:

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

You could even get fancy and bind the click event of all id's ending in "Lookup" in one statement:

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

Warning: This code is untested, but hopefully it gets the idea across.

Answer 3

I would add the url for the modal box into the link itself. Then you could just add a class to that link to invoke the required functionality. It also means that you can have your JS in an external file and your JS doesn't have a dependence on the ASP.NET MVC Html helper methods.

Change your html to something like:

<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>

Then you can simplify your jQuery to something like:

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;
});

I haven't tested any of this code, so there's probably a million errors. ;-)

HTHs,
Charles