Mirrored_Repos/InvenTree
1
0
Fork 0
mirror of https://github.com/inventree/InvenTree synced 2024-08-30 18:33:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

Abstracted jquery code to load a modal form

Browse Source 
- static/scripts/modal_form.js
- bindModalForm function takes care of the mechanics
This commit is contained in:
Oliver 2018-04-25 15:28:57 +10:00
parent ab05c6ce1e
commit e3b2bd7129
2 changed files with 62 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
InvenTree/part/templates/part/index.html
View File

@ -32,56 +32,12 @@
{% block javascript %}
<script type='text/javascript' src="{% static 'script/modal_form.js' %}"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".js-create-cat").click(function () {
$.ajax({
url: '/part/category/new/',
type: 'get',
dataType: 'json',
beforeSend: function () {
$("#modal-cat").modal("show");
},
success: function (data) {
if (data.html_form) {
$("#modal-cat .modal-content").html(data.html_form);
}
else {
alert('JSON response missing form data');
$("#modal-cat").modal("hide");
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error requesting form data:\n" + thrownError);
$("#modal-cat").modal("hide");
}
});
});
$("#modal-cat").on("submit", ".js-modal-form", function () {
var form = $(this);
$.ajax({
url: form.attr('action'),
data: form.serialize(),
type: form.attr('method'),
dataType: 'json',
success: function (data) {
if (data.html_form) {
$("#modal-cat .modal-content").html(data.html_form);
}
else {
alert('No form data!');
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error submitting form data:\n" + thrownError);
}
});
return false;
});
bindModalForm('#modal-cat', '.js-create-cat', "{% url 'category-create' %}", {category: 1});
});
</script>

59
InvenTree/static/script/modal_form.js Normal file
View File

@ -0,0 +1,59 @@
/* Bind a button to launch a modal form and handle AJAX requests */
function bindModalForm(modal, button, url, data) {
$(button).click(function () {
$.ajax({
url: url, // Where to request the data from
type: 'get', // GET request
data: data, // Any additional context data (e.g. initial values)
dataType: 'json',
beforeSend: function() {
$(modal).modal('show');
},
success: function(response) {
if (response.html_form) {
var target = modal + ' .modal-content';
$(target).html(response.html_form);
} else {
alert('JSON response missing form data');
$(modal).modal('hide');
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert('Error requesting form data:\n' + thrownError);
$(modal).modal('hide');
}
});
});
$(modal).on('submit', '.js-modal-form', function() {
var form = $(this);
$.ajax({
url: form.attr('action'),
data: form.serialize(),
type: form.attr('method'),
dataType: 'json',
success: function (response) {
if (response.form_valid) {
alert("Success!");
$(modal).modal('hide');
}
else if (response.html_form) {
var target = modal + ' .modal-content';
$(target).html(response.html_form);
}
else {
alert('JSON response missing form data');
$(modal).modal('hide');
}
},
error: function (xhr, ajaxOptions, thrownError) {
alert("Error posting form data:\n" + thrownError);
$(modal).modal('hide');
}
});
// Override the default form submit functionality
return false;
});
}