Some jQuery to do various common things

!jQuery Functions

Using this file to rename the gist

AjaxForm

<script>
    (function ($) {

        $(function () {

            // For forms marked with data-ajax="#container",
            // on submit,
            // post the form data via AJAX
            // and if #container is specified, replace the #container with the response.
            // On success trigger the data-ajax-done event passing in the container ID.
            var postAjaxForm = function (event) {

                event.preventDefault(); // Prevent the actual submit of the form.

                var $this = $(this);

                $this.find(':input[type="submit"]').prop('disabled', true);

                var containerId = $this.attr("data-ajax");
                var $container = $(containerId);
                var url = $this.attr('action');

                console.log("Post ajax form to " + url + " and replace html in " + containerId);

                $.ajax({
                    type: "POST",
                    url: url,
                    data: $this.serialize()
                })
                    .done(function (result) {
                        if ($container) {
                            $container.html(result);
                            // re-apply this event since it would have been lost by the form getting recreated above.
                            var $newForm = $($container.find("[data-ajax]")[0]);
                            $newForm.on("submit", postAjaxForm);
                            $newForm.trigger("data-ajax-done", containerId);
                        }
                    })
                    .fail(function (error) {
                        alert(error);
                    });
            };
            $("[data-ajax]").submit(postAjaxForm);

            // Allow this code: $("#my-form").ajaxForm();
            // Allows callers to register manually for elements that are created by AJAX themselves and not available on page ready.
            $.fn.extend({
                ajaxForm: function() {
                    return this.each(function() {
                        $(this).on("submit", postAjaxForm);
                    });
                }
            });
        });

    })(jQuery);
</script>

FilterTable

    (function($) {

        $("document").ready(function() {

            // For text inputs marked with data-filter, on keyup, filter the data-target table.
            $("[data-filter]").on("keyup", function() {
                var $filter = $(this);
                var value = $filter.val().toLowerCase();
                var targetId = $filter.attr("data-target");
                console.log("Filter for value " + value + " in target table id " + targetId);
                $("table" + targetId + " tbody tr").filter(function() {
                    var $row = $(this);
                    $row.toggle($row.text().toLowerCase().indexOf(value) > -1);
                });
            });

        });

    })(jQuery);

Pager

    (function ($) {

        $(function () {

            // For elements marked with data-toggle="pager", 
            // on click, 
            // Show/hide the data-target elements by X of Y pages.
            var onPage = function (event, isNext) {
                if (event) {
                    event.preventDefault();
                }

                var $previous = $("[data-toggle='pager-previous']");
                var $next = $("[data-toggle='pager-next']");

                var pageSize = parseInt($next.attr("data-page-size"));
                var pageIndex = parseInt($next.attr("data-page-index")) || 0;
                var targetSelector = $next.attr("data-target");
                var itemCount = $(targetSelector).length;
                var pageCount = Math.ceil(itemCount / pageSize);

                // Increment/Decrement pageIndex and prevent over/underflow.
                if (isNext) {
                    pageIndex++;
                } else {
                    pageIndex--;
                }
                if (pageIndex < 0) {
                    pageIndex = 0;
                } 
                if (pageIndex >= pageCount) {
                    pageIndex = pageCount - 1;
                }
                $next.attr("data-page-index", pageIndex);

                // Enable/Disable next and previous.
                $next.prop("disabled",false);
                $previous.prop("disabled",false);
                if (pageIndex === 0) {
                    $previous.prop("disabled",true);
                }
                if (pageIndex === pageCount - 1) {
                    $next.prop("disabled",true);
                }

                console.log("Page " + targetSelector + " direction " + ((isNext) ? "next" : "previous" ) + " pagesSize " + pageSize + " pageIndex " + pageIndex);

                // Do the actual paging
                $(targetSelector).each(function(index) {
                    if (Math.floor(index / pageSize) === pageIndex) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            };

            var onPageNext = function(event) {
                onPage(event, true);
            }
            var onPagePrevious = function(event) {
                onPage(event, false);
            }

            $("[data-toggle='pager-next']").on("click", onPageNext);
            $("[data-toggle='pager-previous']").on("click", onPagePrevious);

            // call onPagePrevious once to initialize the pager.
            onPagePrevious();

        });

    })(jQuery);

PreventDoubleClick

    (function ($) {
        $(function () {
            // Prevent double-click on submit buttons and links styled as buttons
            $('form').submit(function () {
                $(this).find(':input[type=submit]').attr('disabled', 'disabled');
                $("a.btn").addClass('disabled');
            });
        });
    })(jQuery);

SelectAll

    (function ($, document) {

        $(document).ready(function () {

            // For inputs marked with data-select-all, on change, select all ids that start with data-target.
            $("[data-select-all]").on('change', function () {
                var value = this.checked;
                var targetId = $(this).attr("data-target").replace("#", "");
                console.log("Select all for value " + value + " in target ids starting with " + targetId);
                $('[id^=' + targetId + ']').prop('checked', value);
            });

        });

    })(jQuery, document)

Sort

    (function ($) {

        $(function () {

            // For click-able things marked with data-toggle="sort", 
            // on click, 
            // sort the data-target elements by data-sort-on targets.
            $("[data-toggle='sort']").on("click", function (event) {
                event.preventDefault();
                var $this = $(this);
                var downArrowHtml = "⇓ ";
                var upArrowHtml = "⇑ ";

                var targetSelector = $this.attr("data-target");
                var sortSelector = $this.attr('data-sort-on');
                var $container = $(targetSelector).parent();

                // Get sort order
                var order;
                var newArrow;
                if ($this.text().startsWith(downArrowHtml)) {
                    order = -1;
                    newArrow = upArrowHtml;
                } else {
                    order = 1;
                    newArrow = downArrowHtml;
                }

                // Remove all arrows from siblings and $this.
                $this.siblings("[data-toggle='sort']").add($this).each(function(index, element) {
                    $(element).text($(element).text().replace(downArrowHtml, ""));
                    $(element).text($(element).text().replace(upArrowHtml, ""));
                });

                // Add arrow back
                $this.text(newArrow + $this.text());

                console.log("Sort " + targetSelector + " on " + sortSelector + " order " + order);

                $(targetSelector).sort(function (a, b) {
                    var $a = $(a);
                    var $b = $(b);
                    var $aSortBy = $a.find(sortSelector);
                    var $bSortBy = $b.find(sortSelector);
                    var aValue = $aSortBy.text() || $aSortBy.val();
                    var bValue = $bSortBy.text() || $bSortBy.val();
                    return (aValue < bValue) ? -order : (aValue > bValue) ? order : 0;
                }).appendTo($container);
            });

        });

    })(jQuery);