We Keep Coding

How to charge data in a summernote with meteor JS?

Im using meteor JS and try to implement a summernote.
The problem is, when i try to open a summernote with my data, it work just sometimes.
when i charge the page for the first time, nothing appears in the summernote, but if i change something in my code and save it, the content will appear in the summernote.
please, help me :'(
<template name="consigneModif">
<div class="container">
<div class = "col text-center">
<h1>Modification de {{{this.Name}}}</h1>
</div>
<form class="formConsigne">
<div class="form-group">
<label for="Description"><h4>Nom :</h4></label>
<textarea class="summernote" id="Name" name="Name">{{{this.Name}}}</textarea>
</div>
<div class="form-group">
<label for="Description"><h4>Description :</h4></label>
<textarea class="summernote" id="Description" name="Description" rows="3">{{{this.Description}}}</textarea>
</div>
<div class="form-group">
<label for="Condition"><h4>Condition d'application de la consigne : </h4></label>
<textarea class="summernote" id="Condition" name = "Condition" rows="3">{{{this.Condition}}}</textarea>
</div>
<div class="form-group">
<label for="Mode"><h4>Mode opératoire :</h4></label>
<textarea class="summernote" id="Mode" name ="Mode" rows="3">{{{this.Mode}}}</textarea>
</div>
<div class="form-group">
<label for="Date"><p>Date effective :</p></label>
<input type="Date" id="Date" name = Date>
</div>
<div class="form-group">
<label for="DateFin"><p>Date de fin :</p></label>
<input type="Date" id="DateFin" name = DateFin>
</div>
<div>
<button type="submit" class ="btn btn-success" id="AddConsignButton">Modifier</button>
</div>
</form>
</div>
{{>footerNavbar}}
<script>
$('.summernote').summernote('code');
</script>
</template>

I think the issue is with the script tag you are using to activate the summernote. It should work if you use the onRender method of the template instead.
This may work:
Template.consigneModif.onRendered(function () {
this.$('.summernote').summernote('code');
});

Why am I getting null values when submitting a form after editing some values with JS?

I have a form with some inputs that are filled from the result of an AJAX request. When I submit the form I get only null on the back-end. I tried to submit the values without editing it and it works
this is my java script code
editPayment = function() {
if ($('#entrytransId').val() != '') {
if ($('#entryReceiptTypesselect').val() == "1") {
$.ajax({
type: "GET",
url: "#Url.Action("GetInvoiceNumber", "Payment")",
data: {transId: $('#entrytransId').val()},
success: function(response) {
if (response.invNo == 0) {
window.location.reload();
} else {
$('#reciptNo').val(response.invNo);
$('#enteryAmt').val(response.Amt);
$('#entrytransId').attr("disabled", "true");
$('#enteryhide').show(500);
}
},
error: function(reponse) {
window.location.reload();
}
});
}
}
This is Exactly My HTML Form with inputs I have tried more times and its failures
but when I deleted the javascript function and fill the data manually its works
<form action="/Payment/EditPayment" id="MF" method="post">
<div class="row">
<div class="col-md-2">
<label class="form-control">Receipt Type</label>
</div>
<div class="col-md-8">
<select class="form-control" id="entryReceiptTypesselect"
name="entryReceiptTypes" required="true"><option value="">-Choose</option>
<option value="1">MoF</option>
<option value="2">Zakah</option>
<option value="3">Tax</option>
<option value="4">Other Taxs</option>
<option value="5">M & S</option>
</select>
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">Trans Id</label>
</div>
<div class="col-md-3">
<input required="" type="number" class="form-control" id="entrytransId" name="entrytransId">
</div>
<div class="col-md-2" hidden="" id="btnHidden">
<button type="button" class="btn btn-primary legitRipple" onclick="editPayment()">check</button>
</div>
</div>
<div class="row">
<div class="row">
<div class="col-md-2">
<label class="form-control" id="lblinvoice">reciptNo</label>
</div>
<div class="col-md-4">
<input required="" type="number" name="reciptNo" class="form-control" id="reciptNo">
</div>
</div>
<div class="row" hidden="" id="enteryhide">
<div class="col-md-2">
<label class="form-control">enteryAmt</label>
</div>
<div class="col-md-4">
<input required="" type="number" value="0" name="enteryAmt" class="form-control" id="enteryAmt">
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">E15 userName</label>
</div>
<div class="col-md-8">
<input required="" type="text" class="form-control" id="userName" name="userName">
</div>
</div>
<div class="row">
<div class="col-md-2">
<label class="form-control">password</label>
</div>
<div class="col-md-8">
<input required="" type="password" class="form-control" id="password" name="password">
</div>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="row">
<div class="col-md-4 col-md-offset-4">
<input type="submit" value="submit" class="btn btn-block btn-success legitRipple" id="enterysubmit">
</div>
</div>
</form>

The issue is not with setting the values via javascript/jquery, but specifically with setting the inputs to disabled.
$('#entrytransId').attr("disabled", "true");
when an input is set to disabled, it is not included (it is excluded) from the form's POST, so will appear as null in the server-side code.
You can:
- not set them to disabled (will affect your UX)
- enable them just before POST (icky)
- use hidden fields
MVC does this for checkboxes, so you can copy that idea here:
<input type='text' name='entryid' />
<input type='hidden' name='entryid' />
POST uses the input's name field, not its id, so it's ok to have multiple inputs with the same name.
POST will then use the first input that is not disabled (so don't put the hidden one first...)
Then just update the jquery to apply the value to both inputs (if you also want it shown in the UI) rather than by id, eg:
$("name[entryid]").each(function() { $(this).val(newvalue); });
(other ways to set this may be better, not checked if .val() will apply to all, likely only applies to the first)

The proplem was on $('#entrytransId').attr("disabled", "true");
i have another function onselectChange() is disabled all inputs , i tried $('#entrytransId').attr("disabled", "true"); and its works well

How to retrieve value from <select> and put it in hidden JSTL

i have a rather dumb issue but still, can not figure the way around it...The concept is to have a select value which prompts the user to select a subject. Upon selection i need to store that subject id in every form that i am using below in so i can retrieve that subject, and i dont want to use different select for every single form that i need. here is the code below:
<div class="input-field col s12">
<select>
<c:forEach var="subjectItem" items="${subjectList }">
<option value="${subjectItem.id }">${subjectItem.subjectName }</option>
</c:forEach>
</select> <label>For subject</label>
</div>
......
.....
<form method="POST" action="subject-add-school-deadline"
id="deadlineSchoolForm">
----! Here is should retrieve that data from select !-------
<div class="row">
<div class="input-field col s6">
<input id="schoolD_title" type="text" class="validate"
name="title""> <label
for="schoolD_title">Title</label>
</div>
</div>
<div class="row">
<div class="input-field col s12 l12 ">
<textarea id="schoolD_desc" name="description"
class="materialize-textarea validate" form="deadlineSchoolForm"></textarea>
<label for="schoolD_desc">Description</label>
</div>
</div>
<div class="row">
<label class="col s2">Deadline date</label> <input type="date"
class="datepicker col s4" name="date">
</div>
<div class="row right-align">
<button class="waves-effect waves-teal btn-flat" type="submit"
name="action" >
Add <i class="material-icons right">input</i>
</button>
</div>
</form>
----MORE FORMS BELOW ------
.....
.....
Note that i do not need something like
<select form="form1>
because i need that select value for multiple forms. Any help would be greatly appreciated. Thanks!!

I used jQuery to set the value in all inputs named title. Would this solve your problem?
JS Fiddle
The important part:
<script type="application/javascript">
$("select#foo").change(function() {
$("input[name='title']").val($("select#foo").val());
});
</script>

How to check validation on fields , selected values can not be same?

I have to check validation on two fields with ng-change. The selected values cannot be same so i have implemented below logic but this function is not even being called. Its been hours and i cannot figure out what i am doing wrong. Please check if logic is being implemented correctly.
So far tried code....
main.html
<div class="panel-body">
<form name="addAttesForm" id="addAttesForm" novalidate k-validate-on-blur="false">
<div class="row">
<div class="form-group col-md-6">
<label for="roleType" class="col-md-4">Role Type:</label>
<div class="col-md-8">
<select
kendo-drop-down-list
data-text-field="'text'"
data-value-field="'id'" name="roleType"
k-option-label="'Select'"
k-data-source="roleTypeDataSource"
ng-model="attestorDTO.riskAssessmentRoleTypeKey"
id="roleType">
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="attestorWorker" class="col-md-4">Attestor:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="attestorWorker" required
ng-model="attestorDTO.attestorWorker" name="attestorWorker"
ng-change="validateProxy('attestorWorker','proxyWorker')"
ng-model-options="{updateOn: 'blur'}"
ng-click="openAttestorSearch()" readonly="readonly"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="proxyWorker" class="col-md-4">Proxy :</label>
<div class="col-md-8">
<input type="text" class="form-control" id="proxyWorker" required
ng-model="attestorDTO.proxyWorker" name="proxyWorker"
ng-model-options="{updateOn: 'blur'}"
ng-click="openProxySearch()" ng-disabled="!attestorDTO.attestorWorker" ng-change="validateProxy('attestorWorker','proxyWorker')" readonly="readonly"/>
<p class="text-danger" ng-show="addAttesForm.proxyWorker.$error.dateRange">Attestor and Proxy can not be same</p>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<button class="btn btn-primary pull-right" type="button" ng-disabled="addAttesForm.$invalid" ng-click="saveAttestor()">Add attestor</button>
</div>
</div>
</form>
</div>
main.js
$scope.validateProxy = function(startField, endField) {
console.log("calling validation...");
var isValid = ($scope.attestorDTO[startField]) <= ($scope.attestorDTO[endField]);
$scope.addAttesForm[endField].$setValidity('dateRange',isValid);
$scope.addAttesForm.$setValidity('dateRange',isValid);
};

Remove the readonly attribute. ng-change will not fire on the readonly input elements and the model should be changed via the UI not by the javascript code.
Try like this:
<input type="text" class="form-control" id="attestorWorker" required
ng-model="attestorDTO.attestorWorker" name="attestorWorker"
ng-change="validateProxy('attestorWorker','proxyWorker')"
ng-model-options="{updateOn: 'blur'}"
ng-click="openAttestorSearch()" />
<input type="text" class="form-control" id="proxyWorker" required
ng-model="attestorDTO.proxyWorker" name="proxyWorker"
ng-model-options="{updateOn: 'blur'}"
ng-click="openProxySearch()" ng-disabled="!attestorDTO.attestorWorker" ng-change="validateProxy('attestorWorker','proxyWorker')" />

AngularJS Expression Won't Evaluate in Value Field of Input

What seems like a simple thing in AngularJS is not working for me and I was hoping you all could be of assistance. Specifically, I am trying to enter the result of an AngularJS expression in another input's "value" attribute. I have set the ng-model's and am calling those correctly, just can't figure out why it won't evaluate. I have tried doing the same expression below the input, and it evaluates, so I believe it's something to do with being in the value attribute which is causing the issue.The code I have currently is:
<div class="row-fluid">
<div class="span4">
<label for="employeeID">Employee ID</label>
<input type="text" class="input-block-level" id="employeeID" for="employeeID" placeholder="ANS1235482" ng-model="createNewUser.EmployeeId">
</div>
<div class="span4">
<label>First Name</label>
<input type="text" class="input-block-level" placeholder="Johnathan" ng-model="createNewUser.FirstName">
</div>
<div class="span4">
<label>Last Name</label>
<input type="text" class="input-block-level" placeholder="Smith" ng-model="createNewUser.LastName">
</div>
</div>
<div class="row-fluid">
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level" placeholder="JohnathanSmith" value="createNewUser.LastName" >
</div>
<div class="span4">
<label>Password</label>
<input type="password" class="input-block-level" placeholder="***************">
</div>
<div class="span4">
<label>Role</label>
<select class="input-block-level">
<option value="user">User</option>
<option value="admin">Administrator</option>
</select>
</div>
</div>
Ideally, I would like to figure out how to get a username of the first letter of the first name and the full last name to auto-populate using data-binding, but at this point I haven't even been able to get just the standard first name + last name to work.
Any help you could offer would be greatly appreciated.
Thank you!

<input type="text" class="input-block-level" placeholder="JohnathanSmith" ng-value="un" >
Use ng-change directive.
var app = angular.module("app", []);
app.controller("myCtrl", ["$scope", function ($scope){
$scope.fn = "";
$scope.ln = "";
$scope.changed = function () {
$scope.un = $scope.fn[0] + $scope.ln;
};
}]);
DEMO

please use ng-value instead value
here demo: http://jsbin.com/zamih/1/edit
<body ng-app="app">
<div ng-controller="firstCtrl">
<div class="row-fluid">
<div class="span4">
<label for="employeeID">Employee ID</label>
<input type="text" class="input-block-level" id="employeeID" for="employeeID" placeholder="ANS1235482" ng-model="createNewUser.EmployeeId">
</div>
<div class="span4">
<label>First Name</label>
<input type="text" class="input-block-level" placeholder="Johnathan" ng-model="createNewUser.FirstName">
</div>
<div class="span4">
<label>Last Name</label>
<input type="text" class="input-block-level" placeholder="Smith" ng-model="createNewUser.LastName">
</div>
</div>
<div class="row-fluid">
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level" placeholder="JohnathanSmith" ng-value="createNewUser.LastName" >
</div>
<div class="span4">
<label>Password</label>
<input type="password" class="input-block-level" placeholder="***************">
</div>
<div class="span4">
<label>Role</label>
<select class="input-block-level">
<option value="user">User</option>
<option value="admin">Administrator</option>
</select>
</div>
</div>
</div>
</body>

Change this line:
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level"
placeholder="JohnathanSmith" value="createNewUser.LastName" >
</div>
To this instead:
<div class="span4">
<label for="username">Username</label>
<input type="text" class="input-block-level"
placeholder="JohnathanSmith" value="{{createNewUser.LastName}}" >
</div>
Your issue is that you are not evaluating createNewUser.LastName as an angular binding, but instead just assigning the text "createNewUser.LastName" to the value attribute. To fix this, put the createNewUser.LastName variable in double curly braces {{...}}.
Hope this helps!

If you have tried any/all of these above mentioned methods and still not able to fix your problem, it could be that your updated files are not loaded to Chrome.
That's what happened to me.
There are two ways to make sure that your js files are up to date on the browser,
1) Hold shift while clicking the reload button of your browser
2) Hard reload your page
* Open Developer Tools by either pressing F12 or ... -> More Tools -> Developer Tools
* Right-click the reload button of your browser and click "Empty Cache and Hard Reload"