mirror of
https://github.com/Microsoft/sql-server-samples.git
synced 2025-12-08 14:58:54 +00:00
fixed bug with modal save
+fix in jquery htmltemplate
This commit is contained in:
Jovan Popovic
+47
-52
@@ -24,63 +24,59 @@
|
||||
<span class="glyphicon glyphicon-plus"></span> Add
|
||||
</button>
|
||||
</div>
|
||||
<div id="alertAddSuccess" class="alert alert-success alert-dismissible" role="alert" style="display:none;">
|
||||
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<strong>Well done!</strong> You successfully created new product.
|
||||
</div>
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title" id="myModalLabel">Product</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
||||
<!-- Bootstrap Modal -->
|
||||
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
|
||||
<div class="modal-dialog" role="document">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
|
||||
<h4 class="modal-title" id="myModalLabel">Product</h4>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
|
||||
<!-- Bootstrap form -->
|
||||
<form id="ProductForm">
|
||||
<input type="hidden" id="ProductID" value=""/>
|
||||
<div class="form-group">
|
||||
<label for="Name">Title</label>
|
||||
<input type="text" class="form-control" name="Name" placeholder="Title">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="Color">Color</label>
|
||||
<!--<input type="text" class="form-control" name="Color" placeholder="Color">-->
|
||||
<select class="form-control" name="Color">
|
||||
<option value="White">White</option>
|
||||
<option value="Silver">Silver</option>
|
||||
<option value="Magenta">Magenta</option>
|
||||
<option value="Red">Red</option>
|
||||
<option value="Multi">Multi</option>
|
||||
<option value="Black">Black</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="Price" class="field-label">Price</label>
|
||||
<input type="text" id="Price" name="Price" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="Quantity" class="field-label">Quantity</label>
|
||||
<input type="text" id="Quantity" name="Quantity" class="form-control">
|
||||
</div>
|
||||
<!-- Bootstrap form -->
|
||||
<form id="ProductForm">
|
||||
<input type="hidden" id="ProductID" value=""/>
|
||||
<div class="form-group">
|
||||
<label for="Name">Title</label>
|
||||
<input type="text" class="form-control" name="Name" placeholder="Title">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="Color">Color</label>
|
||||
<select class="form-control" name="Color">
|
||||
<option value="White">White</option>
|
||||
<option value="Silver">Silver</option>
|
||||
<option value="Magenta">Magenta</option>
|
||||
<option value="Red">Red</option>
|
||||
<option value="Multi">Multi</option>
|
||||
<option value="Black">Black</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="Price" class="field-label">Price</label>
|
||||
<input type="text" id="Price" name="Price" class="form-control">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="Quantity" class="field-label">Quantity</label>
|
||||
<input type="text" id="Quantity" name="Quantity" class="form-control">
|
||||
</div>
|
||||
|
||||
<!-- Allow form submission with keyboard without duplicating the dialog button -->
|
||||
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
|
||||
<!-- Allow form submission with keyboard without duplicating the dialog button -->
|
||||
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
|
||||
|
||||
</form>
|
||||
<!-- End Bootstrap form -->
|
||||
</form>
|
||||
<!-- End Bootstrap form -->
|
||||
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="cancelButton" type="reset" class="btn btn-link" data-dismiss="modal">Close</button>
|
||||
<button id="submitButton" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button id="cancelButton" type="reset" class="btn btn-link" data-dismiss="modal">Close</button>
|
||||
<button id="submitButton" type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-floppy-save"></span> Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- End Bootstrap triger modal -->
|
||||
</div>
|
||||
<!-- End Bootstrap modal -->
|
||||
|
||||
<!-- JQuery DataTable -->
|
||||
<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%">
|
||||
@@ -98,8 +94,7 @@
|
||||
</thead>
|
||||
<tbody></tbody>
|
||||
</table>
|
||||
<!-- End JQuery DataTable -->
|
||||
|
||||
<!-- End JQuery DataTable -->
|
||||
|
||||
</div>
|
||||
</body>
|
||||
|
||||
+5
-7
@@ -1,6 +1,6 @@
|
||||
/*
|
||||
* File: jquery.html-template.js
|
||||
* Version: 1.0.0.
|
||||
* Version: 0.9.0-Beta
|
||||
* Author: Jovan Popovic
|
||||
*
|
||||
* Copyright 2016 Jovan Popovic, all rights reserved.
|
||||
@@ -127,7 +127,8 @@
|
||||
case 'select':
|
||||
case 'select-one':
|
||||
if (typeof value == "string") {
|
||||
$(element).attr("value", value);
|
||||
$(element).val(value);
|
||||
//$(element).attr("value", value);
|
||||
refreshMobileSelect(element);
|
||||
|
||||
} else {
|
||||
@@ -138,17 +139,14 @@
|
||||
case 'hidden':
|
||||
case 'date':
|
||||
case 'datetime-local':
|
||||
$(element).attr("value", value);
|
||||
$(element).val(value);
|
||||
//$(element).attr("value", value);
|
||||
break;
|
||||
case 'a':
|
||||
var href = $(element).attr("href");
|
||||
|
||||
|
||||
|
||||
var iPosition = href.indexOf('#');
|
||||
if (iPosition > 1000000) {
|
||||
href = href.substr(0, iPosition) + '&' + name + '=' + value + href.substr(iPosition)
|
||||
|
||||
} else {
|
||||
iPosition = href.indexOf('?');
|
||||
if (iPosition > 0) // if parameters in the URL exists add new pair using &
|
||||
|
||||
+57
-41
@@ -1,42 +1,48 @@
|
||||
ROOT_API_URL = "/api/Product/";
|
||||
|
||||
var ProductController = function($table, $form, $modal){
|
||||
var ProductController =
|
||||
function ($table, $modal) {
|
||||
|
||||
return {
|
||||
editProduct: function () {
|
||||
$form.loadJSON(ROOT_API_URL + this.attributes["data-id"].value);
|
||||
},
|
||||
saveProduct: function () {
|
||||
var id = $("#ProductID", $form).val();
|
||||
$.ajax({
|
||||
contentType: 'application/json',
|
||||
method: id == "" ? "POST" : "PUT",
|
||||
url: ROOT_API_URL + id,
|
||||
processData: false,
|
||||
data: JSON.stringify($form.serializeJSON({ checkboxUncheckedValue: "false", parseAll: true })),
|
||||
}).fail(function (msg) {
|
||||
toastr.error('An error occured while trying to save the product.');
|
||||
}).done(function () {
|
||||
toastr.success("Product is successfully saved!");
|
||||
$table.ajax.reload(null, false);
|
||||
$modal.modal('hide');
|
||||
});
|
||||
},
|
||||
return {
|
||||
editProduct: function (productID) {
|
||||
$.ajax(ROOT_API_URL + productID)
|
||||
.done( function (json) {
|
||||
$modal.loadJSON(json);
|
||||
})
|
||||
.fail(function () {
|
||||
toastr.error('An error occured while trying to get the product.');
|
||||
});
|
||||
|
||||
},
|
||||
saveProduct: function (productID, product) {
|
||||
$.ajax({
|
||||
contentType: 'application/json',
|
||||
method: (productID == "") ? "POST" : "PUT",
|
||||
url: ROOT_API_URL + productID,
|
||||
processData: false,
|
||||
data: product,
|
||||
}).fail(function (msg) {
|
||||
toastr.error('An error occured while trying to save the product.');
|
||||
}).done(function () {
|
||||
toastr.success("Product is successfully saved!");
|
||||
$table.ajax.reload(null, false);
|
||||
$modal.modal('hide');
|
||||
});
|
||||
},
|
||||
|
||||
deleteProduct: function () {
|
||||
$.ajax({
|
||||
method: "DELETE",
|
||||
url: ROOT_API_URL + this.attributes["data-id"].value
|
||||
}).fail(function (msg) {
|
||||
toastr.error('An error occured while trying to delete the product.', 'Product cannot be deleted!');
|
||||
}).done(function () {
|
||||
toastr.success("Product is successfully deleted!");
|
||||
$table.ajax.reload(null, false);
|
||||
});
|
||||
deleteProduct: function (productID) {
|
||||
$.ajax({
|
||||
method: "DELETE",
|
||||
url: ROOT_API_URL + productID
|
||||
}).fail(function (msg) {
|
||||
toastr.error('An error occured while trying to delete the product.', 'Product cannot be deleted!');
|
||||
}).done(function () {
|
||||
toastr.success("Product is successfully deleted!");
|
||||
$table.ajax.reload(null, false);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
$(document).ready(function () {
|
||||
|
||||
@@ -80,14 +86,24 @@ $(document).ready(function () {
|
||||
});
|
||||
// end modal setup
|
||||
|
||||
var ctrl = ProductController($table, $("#ProductForm"), $modal);
|
||||
var $form = $("#ProductForm");
|
||||
var ctrl = ProductController($table, $modal);
|
||||
|
||||
$table.on("click", "button.edit", ctrl.editProduct);
|
||||
$table.on("click", "button.edit",
|
||||
function () {
|
||||
ctrl.editProduct(this.attributes["data-id"].value);
|
||||
});
|
||||
|
||||
$table.on("click", "button.delete", ctrl.deleteProduct);
|
||||
$table.on("click", "button.delete",
|
||||
function () {
|
||||
ctrl.deleteProduct(this.attributes["data-id"].value);
|
||||
});
|
||||
|
||||
$("#submitButton", $modal).on("click", function (e) {
|
||||
e.preventDefault();
|
||||
ctrl.saveProduct();
|
||||
});
|
||||
$('body').on("click", "#submitButton",
|
||||
function (e) {
|
||||
e.preventDefault();
|
||||
var productId = $("#ProductForm #ProductID").val();
|
||||
var product = JSON.stringify($("#ProductForm").serializeJSON({ checkboxUncheckedValue: "false", parseAll: true }));
|
||||
ctrl.saveProduct(productId, product);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user