I am encountering an issue with a button that triggers a modal form
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#agregarProducto">Add Material</a>
The modal appears as shown below:
https://i.stack.imgur.com/J39x9.png
Everything works fine when working locally (localhost), here is the modal form structure:
<div class="modal fade" id="agregarProducto">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Add Material</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="alert alert-dismissible alert-info">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Disclaimer!</strong> <a> to add more than one unit, enable </a><strong>add quantity.</strong>
</div>
<form id="myForm">
<label>Add Quantity</label>
<input type="checkbox" id="idcheckcantidad" />
<input type="text" class="form-control" name="cantidad" id="idcantidad" disabled="disabled" />
<br />
<label>Product Code</label>
<input type="text" class="form-control" name="codigoproducto" id="idcodigoproducto" autofocus="" />
<br />
</form>
</div>
<div class="modal-footer">
<input type="button" value="Add Material" class="btn btn-primary" id="btnSubmit" />
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
When you click submit on my modal, it triggers the following JavaScript code:
<script>
$(document).ready(function () {
$("#btnSubmit").click(function () {
var myformdata = $("#myForm").serialize();
$.ajax({
type: "POST",
url: "/Despachos/AgregarProducto",
data: myformdata,
success: function () {
$("#agregarProducto").modal("hide");
window.location.href = '@Url.Action("Create", "Despachos")';
},
error: function (xhr, text, error) {
console.log(xhr.status + " => " + error);
}
})
})
})
</script>
This code calls a method in my controller named AddProduct:
public JsonResult AgregarProducto(int codigoproducto, int? cantidad)
{
//Checking existing products in detail
var despachotmp = db.DespachoDetalleTmps.Where(o => o.Email == User.Identity.Name && o.Kn_CodigoProducto == codigoproducto).FirstOrDefault();
if (despachotmp == null)
{
//Find product
var producto = db.Productoes.Find(codigoproducto);
if (producto == null)
{
ViewBag.Error = "Please select a valid material";
return Json(false);
}
if (cantidad == null)
{
despachotmp = new DespachoDetalleTmp
{
v_Nombre = producto.v_Nombre,
Kn_CodigoProducto = producto.Kn_CodigoProducto,
Email = User.Identity.Name,
d_Cantidad = 1,
};
db.DespachoDetalleTmps.Add(despachotmp);
}
if (cantidad != null)
{
despachotmp = new DespachoDetalleTmp
{
v_Nombre = producto.v_Nombre,
Kn_CodigoProducto = producto.Kn_CodigoProducto,
Email = User.Identity.Name,
d_Cantidad = Convert.ToInt16(cantidad),
};
db.DespachoDetalleTmps.Add(despachotmp);
}
}
else
{
if (cantidad == null)
{
despachotmp.d_Cantidad += 1;
db.Entry(despachotmp).State = EntityState.Modified;
}
if (cantidad != null)
{
despachotmp.d_Cantidad += Convert.ToInt16(cantidad);
db.Entry(despachotmp).State = EntityState.Modified;
}
}
db.SaveChanges();
var jsonResult = "Json Result";
return Json(jsonResult);
}
While everything operates correctly locally, upon deploying the solution on my web server, the form stops responding when I attempt to submit. This problem arises after transitioning to bootstrap styling for the first time. Is there something wrong with my implementation? Any guidance would be greatly appreciated.
Can anyone offer assistance?