Question

I have a C#.NET MVC3 web app and I have some common jQuery functionality across my pages and want to modularize it. I don’t know how to do this. Below is an example of the code I’m using. You will notice several controls have functions assigned to events. Each View I have will do this, BUT the controls (and number of controls) will be different. There may be 1 control that needs the event added to or there may be 10.

$(document).ready(function () {
    $('.datepicker').datepicker({ dateFormat: "mm/dd/yy", minDate: "12/27/2011" }); 

    $("#Description").keyup(function () {
        enableSaveAlert();
    });
    $("#DueDate").change(function () {
        enableSaveAlert();
    });
    $("#DueDate").keyup(function () {
        enableSaveAlert();
    });
});


    function enableSaveAlert() {
        document.title = document.title.replace("*", "");
        document.title = document.title + "*";
        return true;
    }

Any ideas how to put this into one .js file?

Answer 1

Rather than having an Id selector per input element, why not put a class on all the elements which require the enableSaveAlert() function to be called on them?

So in your HTML you’d have

<input type="text" name="Description" class="save-alert" />
<input type="text" name="DueDate" class="save-alert" />
<input type="text" name="OtherField" />

Then in your JS, attach your events once via that class:

$(document).ready(function () {
    $('.datepicker').datepicker({ dateFormat: "mm/dd/yy", minDate: "12/27/2011" }); 

    $(".save-alert").bind("change keyup", function() {
        enableSaveAlert();
    });
});

function enableSaveAlert() {
    document.title = document.title.replace("*", "");
    document.title = document.title + "*";
    return true;
}