Question

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

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