I have used ng-include as shown below.But it is very slow.In other words it shows tab's heading without the content of it.Later it loads the content.Which is really BAD.But if I use all the content on the same page then there is no delay.So how can I speed this ? Do you know any trick or method to do that ? Thanks.
Parent page :
<uib-tab heading="#L("PropertyInformation")">
<div ng-include="'~/App/tenant/views/propertymanagement/createPropertyForm.cshtml'"></div>
</uib-tab>
Template : createPropertyForm.cshtml
<form name="createPropertyForm" role="form" novalidate class="form-validation">
<div class="row">
<div class="col-xs-4">
<div class="form-group form-md-line-input form-md-floating-label no-hint">
<input class="form-control" type="text" name="StreetNumber" ng-model="vm.property.address.streetNumber" ng-class="{'edited':vm.property.address.streetNumber}" required maxlength="#Address.MaxLength">
<label>#L("StreetNumber")</label>
</div>
</div>
<div class="col-xs-4">
<div class="form-group form-md-line-input form-md-floating-label no-hint">
<input class="form-control" type="text" name="StreetName" ng-model="vm.property.address.streetName" ng-class="{'edited':vm.property.address.streetName}" required maxlength="#Address.MaxLength">
<label>#L("StreetName")</label>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">#L("City")</label>
<select ng-model="vm.property.address.cityId" class="form-control" ng-options="a.id as a.name + ' | '+ a.zipCode for a in vm.cities" required>
<option value="" disabled="">-- Select a City --</option>
</select>
</div>
</div>
</div>
// having lot more elements
When I use above as shown below,then no delays.But I would like to separate those html content to separate template.That is why I have tried above.
All in the same page :
<uib-tab heading="#L("PropertyInformation")">
<div ng-include="'createPropertyForm.html'"></div>
</uib-tab>
<script type="text/ng-template" id="createPropertyForm.html">
<form name="createPropertyForm" role="form" novalidate class="form-validation">
<div class="row">
<div class="col-xs-4">
<div class="form-group form-md-line-input form-md-floating-label no-hint">
<input class="form-control" type="text" name="StreetNumber" ng-model="vm.property.address.streetNumber" ng-class="{'edited':vm.property.address.streetNumber}" required maxlength="#Address.MaxLength">
<label>#L("StreetNumber")</label>
</div>
</div>
<div class="col-xs-4">
<div class="form-group form-md-line-input form-md-floating-label no-hint">
<input class="form-control" type="text" name="StreetName" ng-model="vm.property.address.streetName" ng-class="{'edited':vm.property.address.streetName}" required maxlength="#Address.MaxLength">
<label>#L("StreetName")</label>
</div>
</div>
<div class="col-xs-4">
<div class="form-group">
<label class="control-label">#L("City")</label>
<select ng-model="vm.property.address.cityId" class="form-control" ng-options="a.id as a.name + ' | '+ a.zipCode for a in vm.cities" required>
<option value="" disabled="">-- Select a City --</option>
</select>
</div>
</div>
</div>
</form>
</script>
Here is the solution.You can use $templateCache service.
app.js
appModule.run(["$templateCache", "$http", function ($templateCache, $http) {
$http.get('~/App/tenant/views/propertymanagement/tabs/createPropertyForm.cshtml', { cache: $templateCache });
}]);
cshtml page
<div ng-include="'~/App/tenant/views/propertymanagement/tabs/createPropertyForm.cshtml'"></div>
I would recommend using the template cache generator like grunt-html2js
But according angularjs documentation you can cache a template nesting the content as:
<script type="text/ng-template" id="templateId.html">
<p>This is the content of the template</p>
</script>
And then normally include the template:
<div ng-include=" 'templateId.html' "></div>
Related
I would remove required tag from fields are in hidden tabs when I click on tab using Javascript. The fields with required tag, since they are not used, block the submit form, preventing insertion into the database. This is my code:
<ul class="nav nav-tabs nav-justified">
<li class="active">Cliente</li>
<li>Azienda</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="cliente">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="nome">Nome*</label>
<input class="form-control" name="nome" id="nome" required="true" autocomplete="off" value="">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label for="sesso">Sesso*</label>
<select class="form-control chosen chzn-done" name="sesso" id="sesso" required="true" style="display: none;">
<option value="" selected="\"selected\""></option>
<option value="M">M</option>
<option value="F">F</option>
</select>
</div>
</div>
</div>
</div>
<div class="tab-pane" id="azienda">
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="ragione_sociale">Ragione sociale*</label>
<input class="form-control " name="ragione_sociale" id="ragione_sociale" required="true" autocomplete="off" value="">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="desc_attivita">Descrizione attività dell'azienda*</label>
<textarea class="form-control " name="desc_attivita" id="desc_attivita" required="true"></textarea></ul>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label for="citta">Città*</label>
<input class="form-control " name="citta" id="citta" required="true" value="" autocomplete="off">
</div>
</div>
</div>
First find all the select elements, then loop through them, if they are rendered as display: none then change the required attribute to false.
document.querySelectorAll('select').forEach((elem) => {
if (window.getComputedStyle(elem).display === 'none') {
elem.required = false;
}
});
If you know the id's or classes of the elements that will be display none, then you can just use those instead of using the loop.
I have a problem with TinyMCE, it looks like in the picture:
enter image description here
my HTML is:
<form action="#" method="post" id="create-product">
<div class="row">
<div class="col-4">
<label for="#product-name">Product name</label>
</div>
<div class="col-8">
<input type="text" name="product-name" class="form-control" id="product-name" placeholder="Product name" required>
</div>
<div class="col-4">
<label for="#product-category">Product category</label>
</div>
<div class="col-8">
<select name="product-category" class="selectpicker form-control" id="product-category" required>
<option value="null">--none--</option>
</select>
</div>
<div class="col-4">
<label for="#product-description">Product description</label>
</div>
<div class="col-8">
<textarea name="product-description" id="product-description"></textarea>
</div>
<div class="col-12">
<button type="submit" class="btn btn-success create-product-btn w-25 m-auto"><i class="far fa-save"></i>Save</button>
</div>
</div>
</form>
But if I remove tag, it will fix the issue whitout knowing the reason.
I'm Using Tinymce 4.7.13 and bootstrap 4,
Thanks.
It was this style who caused the problem:
.col-4 ,.col-8{
display:flex;
align-item:center
}
I want to seriliaze json like this in my form fields:
{FinalResult: [{"id":1,"organizationNameGE":"პსდა2","organizatio…":"02-16-2018","$$hashKey":"0Q0","priority":"1"}]"}
and for this reason i use this code:
<script cam-script type="text/form-script">
camForm.on('form-loaded', function() {
// tell the form SDK to fetch the variable named 'document'
camForm.variableManager.fetchVariable('selectedDocuments');
});
camForm.on('variables-fetched', function() {
// work with the variable (bind it to the current AngularJS $scope)
$scope.selectedDocuments =ConvertToJsonArray(camForm.variableManager.variableValue('selectedDocuments'));
});
function ConvertToJsonArray(arr){
var jsonArray=arr.FinalResult;
return jsonArray;
}
</script>
<div class="container" ng-repeat="item in selectedDocuments track by $index">
<div class="control-group" >
<label for="id" class="control-label">საიდენტიფიკაციო კოდი</label>
<div class="controls">
<input id="id" class="form-control" type="number" ng-model="item.id" required readonly/>
</div>
</div>
<div class="control-group" >
<label for="cardNumber" class="control-label">ბარათის ნომერი</label>
<div class="controls">
<input id="cardNumber" class="form-control" type="text" ng-model="item.cardNumber" required />
</div>
</div>
<div class="control-group" >
<label for="organizationNameGE" class="control-label">კომპანიის სახელი ქართულად</label>
<div class="controls">
<input id="organizationNameGE" class="form-control" type="text" ng-model="item.organizationNameGE" required />
</div>
</div>
<div class="control-group" >
<label for="organizationNameEN" class="control-label">კომპანიის სახელი ლათინურად</label>
<div class="controls">
<input id="organizationNameEN" class="form-control" type="text" ng-model="item.organizationNameEN" required />
</div>
</div>
<div class="control-group" >
<label for="Approved" class="control-label">Approved</label>
<input type="checkbox"
class="form-control"
cam-variable-name="Approved"
cam-variable-type="Boolean"/>
</div>
<div class="form-group">
<label for="refusalComment" class="control-label">კომენტარი უარზე</label>
<input type="text"
class="form-control"
cam-variable-type="String"
cam-variable-name="refusalComment"
name="კკომენტარი უარზედ"/>
</div>
</div>
But this doesn't doesn't seem to be enough, what should i change to display this json data into my form? should i use ng-for instead of ng-repeat?
(p.s there is no any internal errors in console)
It looks you are taking data in the array FinalResult.
Iam not sure why you used selectedDocuments .
<div class="container" ng-repeat="item in selectedDocuments track by $index">
Use this isntead of selectedDocuments
<div class="container" ng-repeat="item in FinalResult track by $index">
Please let me know if it helps.
I have the following form:
<form name="ff" ng-submit="formSubmit(ff)" role="form" class="form-horizontal" id="form-{{context.identifier}}" novalidate>
<div class="col-xs-12 box-shadow">
<div class="col-xs-6" style="margin-top: 1em;">
<input type='hidden' name='nodeIdentifier' value='{{context.currentStep.identifier}}' />
<input type='hidden' name='contextIdentifier' value='{{context.identifier}}' />
<div class="form-group">
<label class="control-label col-xs-4" for="requestor_name">Approve:</label>
<div class="col-xs-8">
<select name="form.field.decision">
<option value="Approved">Approved</option>
<option value="Denied">Denied</option>
</select>
</div>
</div>
<div class="form-group">
<label class="control-label col-xs-4" for="form.field.reason">
Reason:</label>
<div class="col-xs-8">
<input class="form-control" type="text" name="reason" required minlength='4' maxlength='255'/>
</div>
<div ng-messages="ff.reason.$error" role="alert">
<div ng-message="required">You did not enter a reason</div>
<div ng-message="minlength, maxlength">
Your reason must be between 4 and 255 characters long
</div>
</div>
</div>
<div class="form-group">
<input type="submit" name="submit" value="submit" />
</div>
</div>
</div>
</form>
Here is the code to log what gets submitted in formSubmit(data):
console.log("Data");
console.log(data);
My form is always showing valid. Why is the angular validation not working? I have included the nagular messages too.
You got no ng-model bound to your input fields. Looks like ngMessages needs those.
EDIT: found a comment on a tutorial, because I wasn't 100% sure:
tutorial comment:
fyi that not including the ng-model attribute on validated fields will
break the form validation
I am trying to get the selected value from the dropdown.
I am creating the controls dynamically. I am not using ID attribute to avoid the problem of having multiple controls with the same ID/ duplicate IDs.
Here is how I am able to get the values of the textbox controls
$('.btn-success').off('click').on('click', function (e) {
e.preventDefault();
var row = $(this).closest(".row");
var lnameval = row.find("input[name='ContactLastName']").val();
});
Is it possible to get the selected value of the dropdown using the name attribute.
something like : var titleVal = row.find("input[name='ContactTitle']").val();
HTML :
<form id="formAddContact" role="form" class="form-horizontal">
<div class="modal-body">
<div id="errorMessageContainer2" class="alert alert-danger" role="alert" style="display:none;">
<ul id="messageBox2" class="list-unstyled"></ul>
</div>
#foreach (string cInfo in Model.emailList)
{
<div class="row" id="#cInfo.Replace("#","")" style="display: none;">
<div class="col-md-6">
<div class="form-group">
<div class="col-md-3 control-label">
<label>Title:</label>
</div>
<div class="col-md-3">
<select class="form-control ToCapture" name="ContactTitle">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Ms">Ms</option>
<option value="Miss">Miss</option>
<option value="Dr">Dr</option>
</select>
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lblfname">First Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactFirstName" type="text" value="">
</div>
</div>
<div class="form-group">
<div class="col-md-3 control-label">
<label id="lbllname">Last Name:</label>
</div>
<div class="col-md-3">
<input maxlength="50" name="ContactLastName" type="text" value="">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<input type="button" value="Add Contact" class="btn btn-success">
<input type="button" value="Cancel" class="btn btn-default">
</div>
<br/>
}
<hr />
</div>
</form>
Just a little change needed :
row.find("select[name='ContactTitle']").val();
It's not an input.