Develop Reference

Multiple fields not validated inside modal that are dynamically generated

I'm validating fields inside modal popup,for single field it is working but if more than one field are appended at a time then validation does not takes place on those fields. Here we can see we add new field by adding add field button but those newly field did'nt get validated.
$(function() {
$("#newModalForm").validate();
$('.form-control').each(function() {
required($(this))
});
$(document).on('click', '#add_field', function(e) {
$('#dynamic_div').html("<div class=form-group><label class=control-label col-md-3 for=email>Dynamic field 1:</label> <inputname=sfs type=text class=form-control></div> <div class=form-group><label class=control-label col-md-3 for=email>Dynamic field 2:</label><input name=ssf type=text class=form-control></div>");
required($(this))
});
function required(el) {
el.rules("add", {
required: true,
messages: {
required: "This field is required",
}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Stuff</h4>
</div>
<div class="modal-body">
<form role="form" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name"/>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" name="action" placeholder="Enter and action">
</div>
</div>
<div class="col-md-9" id="dynamic_div">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" id="add_field" class="btn btn-default">Add Field</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>

You need call .each() on the dynamically added elements as well.
Dynamically added elements are not in DOM onload so ideally you need to do wrap .each() in a function when you add more fields to your modal just call that function again to check for empty inputs
To handle submit and store data we can .submit on your modal form. Get all the data via .serialize method and send all your form data to the backend file via ajax request.
Run Snippet below to see it working.
$(function() {
//Validate Data
var validate = $("#newModalForm").validate()
checkInput()
//Add dynamic inputs
$(document).on('click', '#add_field', function(e) {
$('#dynamic_div').html("<div class=form-group><label class=control-label col-md-3 for=email>Dynamic field 1:</label> <input name=sfs type=text class=form-control></div> <div class=form-group><label class=control-label col-md-3 for=email>Dynamic field 2:</label><input name=ssf type=text class=form-control></div>");
//Required Dynamic Input
checkInput()
});
//Validate all inputs
function checkInput() {
$('.form-control').each(function() {
required($(this))
});
}
//Required field message
function required(el) {
el.rules("add", {
required: true,
messages: {
required: "This field is required",
}
});
}
//Submit form modal
$('#newModalForm').on('submit', function(e) {
//Prevent default submit behaviour
e.preventDefault()
//Store all the form modal form data
var data = $(this).serialize()
//Check all fieild have data
if (validate.errorList.length == 0) {
alert('All fields have value - Form will submit now')
//Request to backend
$.ajax({
url: 'your_url',
type: 'POST',
data: data,
success: function(response) {
//do something on success
},
error: function(xhr) {
//Handle errors
}
});
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.14.0/jquery.validate.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#addMyModal">Open Modal</button>
<div class="modal fade" id="addMyModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add Stuff</h4>
</div>
<div class="modal-body">
<form role="form" method="post" id="newModalForm">
<div class="form-group">
<label class="control-label col-md-3" for="email">A p Name:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="pName" name="pName" placeholder="Enter a p name" />
</div>
</div>
<div class="form-group">
<label class="control-label col-md-3" for="email">Action:</label>
<div class="col-md-9">
<input type="text" class="form-control" id="action" name="action" placeholder="Enter and action">
</div>
</div>
<div class="col-md-9" id="dynamic_div">
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="btnSaveIt">Save</button>
<button type="button" id="add_field" class="btn btn-default">Add Field</button>
<button type="button" class="btn btn-default" id="btnCloseIt" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>

Can't get spinner to load on bottom click

I am trying to use bootstrap spinner to load upon button click while flask is processing the request but it's not working.
When I click the button, the request is sent to flask and it never gets to the javascript part for some reason.
To confirm that, I tried the same HTML code below on a separate HTML page and it worked.
So my question is: how to make the javascript code work in conjunction with the request being sent to flask as well.
the HTML and Javascript part goes this way:
<div class="container-fluid mt-3">
<p class="font-weight-bold">Deactivate User</p>
<br>
<form action="{{ url_for('deactivate_user')}}" method='POST'>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input type="text" class="form-control" placeholder="Username" id="username" name="username" required>
</div>
<button type="submit" id="submit" class="btn btn-info btn-primary">Submit</button>
</form>
</div>
<script>
$('#submit').click(function () {
this.form.submit();
this.disabled = true;
this.html = '<button class="btn btn-primary" type="button" disabled> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span><span class="sr-only">Loading...</span></button>'
});
</script>
Am I doing something wrong? I am pretty new to HTML so excuse my ignorance in advance.

You can use ajax
<div class="container-fluid mt-3">
<p class="font-weight-bold">Deactivate User</p>
<br />
<div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-text">#</span>
</div>
<input
type="text"
class="form-control"
placeholder="Username"
id="username"
name="username"
required
/>
</div>
<button id="submit" class="btn btn-info btn-primary">
Submit
</button>
</div>
</div>
Then
<script>
$('#submit').click(function (d) {
let username = $('#username').val();
$.post(
"url_for_deactivate_user",
{
username: username,
},
function (data, status) {
// if (data) { // validate response data here
this.disabled = true;
this.html = `<button class="btn btn-primary" type="button" disabled> <span class="spinner-grow spinner-grow-sm" role="status" aria-hidden="true"></span><span class="sr-only">Loading...</span></button>
`;
// }
}
);
});
</script>
NOTE: Make sure you replace url_for_deactivate_user properly and also that your server gives a response.

What's the correct way to submit a single element in a list when each of them has a separate submit button

I have an event page which contains a list of participants. From there users can be invited to that event by opening a modal view containing a user list. Users are shown in the same modal with each having an 'Invite'(submit) button next to them. How can I let the controller action know which user is invited?
From what I could find, creating a form for each list element is bad and in addition displays warnings, but if I create a form element on top of the 'foreach', I then need to somehow find which user to submit.
Also thought about appending incrementing numbers to each of submit button name, but I still need to somehow map them to 'their' users.
Along with the invited user id, controller post action also needs to receive the event id.
Here's the code:
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Select user</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form id="eventMemberForm" method="post" class="col-sm-6 custom-close" data-ajax="true" data-ajax-method="post" data-ajax-complete="completed" data-ajax-url="#Url.Action("SendInvitation", "Sports")">
<input type="hidden" asp-for="Invitation.FkEvent" value="#Model.Event.EventId" />
<input type="hidden" asp-for="Invitation.EventInvitationId" />
<div class="modal-body">
<input class="form-control p-2 mb-2" id="myInput" type="text" placeholder="Search..">
<h4 class="align-content-center">Users</h4>
<div class="form-group">
<table class="w-100">
<tbody id="myField">
#foreach (var item in Model.Users)
{
<tr>
<td class="d-flex">
<div> #Html.DisplayFor(modelItem => item.Text) </div>
<input type="hidden" asp-for="Invitation.FkUser" value="#item.Value" />
<div class="ml-auto">
<input id="btnSave" type="submit" value="Invite" class="btn btn-success" />
</div>
</td>
</tr>
++i;
}
</tbody>
</table>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myField tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
completed = () => {
alert("User invited");
};
</script>

You can use jquery ajax to pass the parameters you need, through the click event, get the corresponding value of the control needed next to the current button.
By adding the name attribute to the submit button, and then triggered in jquery.
And add the id to the div that stores the Text value of User to facilitate finding the corresponding value in jquery.
#section Scripts{
<script>
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myField tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
$("[name=submitBtn]").click(function () {
event.preventDefault();
var obj = {
myUser: {
Text: $($(this).parent().siblings()[0]).text(),
Value: $($(this).parent().siblings()[1]).val()
},
eventId: $("#Invitation_FkEvent").val()
};
$.ajax({
url: $("#eventMemberForm").attr("data-ajax-url"),
method: 'post',
data: obj,
})
});
});
completed = () => {
alert("User invited");
};
</script>
}
<h1>Index</h1>
<button data-toggle="modal" data-target="#myModal" class="btn btn-primary">Submit</button>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Select user</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form id="eventMemberForm" method="post" class="col-sm-6 custom-close" data-ajax="true" data-ajax-method="post" data-ajax-complete="completed" data-ajax-url="#Url.Action("SendInvitation", "Sports")">
<input type="hidden" asp-for="Invitation.FkEvent" value="#Model.Event.EventId" />
<input type="hidden" asp-for="Invitation.EventInvitationId" />
<div class="modal-body">
<input class="form-control p-2 mb-2" id="myInput" type="text" placeholder="Search..">
<h4 class="align-content-center">Users</h4>
<div class="form-group">
<table class="w-100">
<tbody id="myField">
#foreach (var item in Model.Users)
{
<tr>
<td class="d-flex">
<div id="textValue"> #Html.DisplayFor(modelItem => item.Text) </div>
<input type="hidden" asp-for="Invitation.FkUser" value="#item.Value" />
<div class="ml-auto">
<input id="btnSave" type="submit" value="Invite" class="btn btn-success" name="submitBtn"/>
</div>
</td>
</tr>
++i;
}
</tbody>
</table>
</div>
</div>
</form>
</div>
</div>
</div>
Controller:
public IActionResult SendInvitation(User myUser, string eventId)
{
//do what you want
return View();
}

In HTML ng-value doesn't update according to the controller updated.bt at the same time expression is updated according to the controller

In HTML ng-value="itemdetails[0].Title" doesn't update according to the controller update.bt at the same time {{itemdetails[0].Title}} this expression is updated.I cannot understand what is the problem.
HTML
<div id="lineitemmodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<div class="modal-body">
<form>
<div class="form-group">
<label >Title</label>
<input type="text" ng-model="item.Title" class="form-control" ng-value="itemdetails[0].Title" placeholder="Title">
{{itemdetails[0].Title}}
</div>
<div class="form-group">
<label >SKU</label>
<input type="text" ng-model="item.SKU" class="form-control" ng-value="itemdetails[0].SKU" placeholder="SKU">
{{itemdetails[0].SKU}}
</div>
<div class="form-group">
<label >Description</label>
<input type="textarea" ng-model="item.Description" class="form-control" ng-value="itemdetails[0].Description" placeholder="Description">
</div>
<div class="form-group">
<label >Unit type</label>
<input type="text" ng-model="item.UnitType" class="form-control" ng-value="itemdetails[0].UnitType" placeholder="Unit type">
</div>
<div class="form-group">
<label >Unit price</label>
<input type="text" ng-model="item.Unitprice" class="form-control" ng-value="itemdetails[0].Unitprice" placeholder="Unit price">
</div>
<button type="submit" class="btn btn-success" style="margin-right: 75%" ng-click="saveitem(item)" data-dismiss="modal">Save</button>
<button type="submit" class="btn btn-danger" data-dismiss="modal">Delete</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Controller
app.angular.controller('lineItemController', function ($scope, rest, $window) {
$scope.lineitems = [];
$scope.itemdetails = [];
var currentitem;
$scope.addnewitem = function () {
$scope.lineitems.push({Title:'Title',SKU:'SKU',Description:'Description',UnitType:'Unit type',UnitPrice:'Unit price'});
};
$scope.getitems = function () {
rest.get('lineitem').then(function (results) {
$scope.lineitems = [];
$scope.itemdetails = [];
$scope.lineitems = results;
console.log(results);
});
};
$scope.getitems();
$scope.showitem = function (item) {
$scope.itemdetails.push(item);
console.log($scope.itemdetails);
$("#lineitemmodal").modal('show');
};
$scope.saveitem = function (newitem) {
console.log($scope.itemdetails[0]);
//item.ID = $scope.itemdetails.ID;
$scope.itemdetails[0].Title = newitem.Title;
$scope.itemdetails[0].SKU = newitem.SKU;
$scope.itemdetails[0].Description = newitem.Description;
$scope.itemdetails[0].UnitType = newitem.UnitType;
$scope.itemdetails[0].Unitprice = newitem.Unitprice;
rest.post('lineitem', {
LineItem: $scope.itemdetails[0]
}).then(function (results) {
console.log(results);
$scope.getitems();
});
};
});

Angular UI Modal - ModalInstance is undefined if success trigger is inside the form tag

I have a simple modal, which contains a form in it. The 'Ok' button should handle success and close the modal whereas the cancel button should just dismiss the modal. If I put the 'Ok' button inside the form tag, the modal instance is shown as undefined in the handler. I need to put the button inside the form for 2 reasons: Design perspective and for ng-submit to work. What could be the issue? Here is the very basic code:
//Modal:
<div class="modal-header">
<h3 class="modal-title">My modal</h3>
</div>
<div class="modal-body">
<form name="modalForm" id="modal-form" class="form-horizontal" role="form" ng-submit="modalOk()" novalidate>
<div class="form-group">
<label class="col-xs-2 control-label">Sample</label>
<div class="col-xs-8" ng-class="{'has-error': modalForm.command.$error.required}">
<input name="command" class="form-control" ng-model="formData.command" maxlength="65" ng-trim="false" required>
</div>
<div class="col-xs-2">
<!-- Modal undefined -- >
<button id="modal-ok" class="btn btn-primary" ng-click="modalOk()" ng-disabled="modalForm.$invalid">Run</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<!-- Works here-->
<button id="modal-ok" class="btn btn-primary" ng-click="modalOk()" ng-disabled="modalForm.$invalid">Run</button>
<button class="btn btn-primary site-btn-form" ng-click="modalCancel()">Close</button>
</div>
//Controller code
//.....
$scope.myModal = {};
$scope.launchModal = function() {
//Create a modal for saving the filter
$scope.myModal = $modal.open({
templateUrl : 'views/dialogs/myModal.html',
scope : $scope,
backdrop : 'static'
});
//Save
$scope.modalOk = function() {
//myModal undefined if called from inside the form
$scope.myModal.close();
};
//Cancel the operation
$scope.modalCancel = function() {
$scope.myModal.dismiss();
};
//Handle the modal promise
$scope.myModal.result.then(function() {
console.log('Ok');
}, function() {
console.log('Cancel');
})['finally'](function(){
$scope.myModal = undefined; // Something I tried!
});
};
Any help is appreciated!

You are getting undefined because the modelOk() function is running twice because its also called on ng-submit:
<form name="modalForm" id="modal-form" class="form-horizontal" role="form" ng-submit="modalOk()" novalidate>
You can test this by putting a console.log inside your modalOk() function before the close call.
var app = angular.module('app', ['ui.bootstrap']);
app.controller('myController', function($scope, $modal) {
$scope.myModal = {};
$scope.launchModal = function(num) {
//Create a modal for saving the filter
$scope.myModal = $modal.open({
templateUrl: 'm' + num + '.html',
scope: $scope,
backdrop: 'static'
});
//Save
$scope.modalOk = function() {
console.log("modalOk called");
//myModal undefined if called from inside the form
$scope.myModal.close();
};
//Cancel the operation
$scope.modalCancel = function() {
$scope.myModal.dismiss();
};
//Handle the modal promise
$scope.myModal.result.then(function() {
console.log('Ok');
}, function() {
console.log('Cancel');
})['finally'](function() {
$scope.myModal = undefined; // Something I tried!
});
};
});
<html ng-app='app'>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.min.js"></script>
</head>
<body>
<div ng-controller='myController'>
<button ng-click="launchModal(1)">modal1</button>
<button ng-click="launchModal(2)">modal2</button>
</div>
</body>
<script type="text/ng-template" id="m1.html">
<div class="modal-header">
<h3 class="modal-title">My modal</h3>
</div>
<div class="modal-body">
<form name="modalForm" id="modal-form" class="form-horizontal" ng-submit="modalOk()" role="form" novalidate>
<div class="form-group">
<label class="col-xs-2 control-label">Sample</label>
<div class="col-xs-8" ng-class="{'has-error': modalForm.command.$error.required}">
<input name="command" class="form-control" ng-model="formData.command" maxlength="65" ng-trim="false" required>
</div>
<div class="col-xs-2">
<button id="modal-ok" class="btn btn-primary" ng-click="modalOk()" ng-disabled="modalForm.$invalid">Run</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary site-btn-form" ng-click="modalCancel()">Close</button>
</div>
</script>
<script type="text/ng-template" id="m2.html">
<div class="modal-header">
<h3 class="modal-title">My modal</h3>
</div>
<div class="modal-body">
<form name="modalForm" id="modal-form" class="form-horizontal" role="form" novalidate>
<div class="form-group">
<label class="col-xs-2 control-label">Sample</label>
<div class="col-xs-8" ng-class="{'has-error': modalForm.command.$error.required}">
<input name="command" class="form-control" ng-model="formData.command" maxlength="65" ng-trim="false" required>
</div>
<div class="col-xs-2">
<button id="modal-ok" class="btn btn-primary" ng-click="modalOk()" ng-disabled="modalForm.$invalid">Run</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary site-btn-form" ng-click="modalCancel()">Close</button>
</div>
</script>
</html>