Skip to content

Instantly share code, notes, and snippets.

@jesslilly
Last active April 30, 2020 20:48
Show Gist options
  • Save jesslilly/5f646ef29367ad2b0228e1fa76d6bdcc to your computer and use it in GitHub Desktop.
Save jesslilly/5f646ef29367ad2b0228e1fa76d6bdcc to your computer and use it in GitHub Desktop.
Some jQuery to do various common things
Using this file to rename the gist
<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>
(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);
(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);
(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);
(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)
(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);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment