Develop Reference

Javascript function defined in the head is not working

<script>
$(document).ready(function() {
$('#submitButton').submit(function(event) {
event.preventDefault();
$.post('http://sentiment.vivekn.com/api/text/',
$('#myForm').serializeArray(),
function(data, status) {
var json = JSON.parse(data);
$('text').html(document.getElementById('message').innerHTML);
$('sentiment').html(json.result.sentiment);
$('confidence').html(json.result.confidence);
console.log(json.result.sentiment);
console.log(status+"\n");
});
});
});
</script>
<section class="container content-section">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<form id="myForm" method=POST action="http://sentiment.vivekn.com/api/text/">
<p>Enter your sentences:</p>
<textarea rows="5" type=text name="txt" class="form-control" placeholder="Sentences to detect" id="message" required data-validation-required-message="Please enter a message."></textarea>
<br>
<button class="btn btn-primary align-right" type="submit" id="submitButton">Submit</button>
</form>
</div>
</div>
This part should work when the page is loaded, but it doesn't response at all.
EDIT: The script does not execute at all, what we get instead is a GET request to the url: ...index.html/?txt=[inputfrommyform] and nothing changes on the page, instead of the page even hitting the target POST request server.
Just updated according to the comments. Thank you!
The error we get from Chrome Inspect is still
Uncaught ReferenceError: $ is not defined

Four issues:
You need to listen to the submit event of #myForm instead of #submitButton which doesn't emit such an event.
Your post callback receives an already parsed JSON object, parsing again fails as a string is expected but an object given.
You need to prevent the default action on form submit by returning false from your submit event handler.
You need to include jQuery before your script.
Fixed code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#myForm').submit(function() {
$.post('http://sentiment.vivekn.com/api/text/',
$('#myForm').serializeArray(),
function(json, status) {
$('text').html(document.getElementById('message').innerHTML);
$('sentiment').html(json.result.sentiment);
$('confidence').html(json.result.confidence);
console.log(json.result.sentiment);
console.log(status + "\n");
});
return false;
});
});
</script>
<section class="container content-section">
<div class="row">
<div class="col-lg-10 col-lg-offset-1">
<div class="row control-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<form id="myForm" method=POST action="http://sentiment.vivekn.com/api/text/">
<p>Enter your sentences:</p>
<textarea rows="5" type=text name="txt" class="form-control" placeholder="Sentences to detect" id="message" required data-validation-required-message="Please enter a message."></textarea>
<br>
<button class="btn btn-primary align-right" type="submit" id="submitButton">Submit</button>
</form>
</div>
</div>
</div>
</div>
</section>

AngularJS fire ng-change when changing a model

I have a form that looks like this:
<div class="col-xs-12 col-lg-4">
<form name="deliveryForm" ng-class="{ 'has-error': deliveryForm.$invalid && !deliveryForm.contact.$pristine }">
<div class="form-group">
<div class="btn-group">
<label class="btn btn-default" ng-model="controller.order.lines[0].forDelivery" btn-radio="true" ng-change="controller.setDeliveryDetails()">For delivery</label>
<label class="btn btn-default" ng-model="controller.order.lines[0].forDelivery" btn-radio="false" ng-change="controller.findCollectionPoints()">For collection</label>
</div>
</div>
<div class="form-group" ng-if="!controller.order.lines[0].forDelivery">
<label class="control-label">Contact</label>
<input class="form-control" type="text" name="contact" ng-model="controller.model.contact" ng-change="controller.setDeliveryDetails()" autocomplete="off" required />
<input type="hidden" name="collectionPoint" ng-model="controller.model.collectionPoint" ng-change="controller.setDeliveryDetails()" required />
</div>
<div class="form-group">
<label class="control-label">Instructions</label>
<input class="form-control" type="text" name="instructions" ng-model="controller.model.instructions" ng-change="controller.setDeliveryDetails()" autocomplete="off" />
</div>
<div class="form-group">
<button class="btn btn-default" type="button" ui-sref="saveOrder.lines">Back</button>
<a class="btn btn-primary pull-right" ng-if="deliveryForm.$valid" ui-sref="saveOrder.confirm">Continue</a>
</div>
</form>
</div>
As you can see, if my first line is not for delivery, then I show the contact input and the hidden collectionPoint input.
A bit further down I have a link that changes the collectionPoint:
What I was hoping would happen is that the hidden input would detect the change and fire the controller.setDeliveryDetails() method, but it doesn't seem to work.
Is there a way I can do this?

ng-change is triggered when changes are made on an input not on the model.
What you can do is either run controller.setDeliveryDetails() on ng-click :
Or set up a watch in your controller on controller.model.collectionPoint
$scope.$watch(angular.bind(this, function () {
return this.model.collectionPoint;
}), function (newVal) {
controller.setDeliveryDetails();
});

Angular make input valid manually

I am using a bootstrap datepicker. when i click on the icon date& time automatically enters into the input. but the input remained as invalid since i did not interacted with it directly. has any one faced this problem.
here is the plnkr for that: http://plnkr.co/edit/yBmwZCCPvTOQWE6q3BW5
view
<body data-ng-controller="ReservationController as resvnCtrl">
<div class="container">
<div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-12 col-xs-12 ">
<div>
<h2 class="text-center page-heading">Make a reservation</h2>
</div>
<div>
<form role="form" name="resvnCtrl.form" data-ng-submit="resvnCtrl.submitForm(resvnCtrl.form.$valid)" novalidate>
<div class="form-group" data-ng-class="{'has-error':resvnCtrl.form.time.$invalid && (resvnCtrl.form.time.$dirty || resvnCtrl.form.$submitted) }">
<label class="control-label">Date-Time</label>
<div class='input-group date' id='datetimepicker'>
<input type="text" name="time" id="time" data-ng-model="resvnCtrl.reservation.time"
placeholder="Enter Desired Time" class="form-control" required>
<span class="input-group-addon pointer" data-date-picker>
<i class="fa fa-calendar"></i>
</span>
</div>
<div data-ng-messages="resvnCtrl.form.time.$error" data-ng-if="resvnCtrl.form.time.$dirty || resvnCtrl.form.$submitted">
<p class="help-block" data-ng-message="required">Date and Time required</p>
</div>
</div>
<div class="form-group">
<div class="col-sm-4 col-sm-offset-2">
<input type="submit" name="submit" id="submit" value="Make Reservation" class="btn btn-primary btn-block " >
</div>
</div>
</form>
</div>
</div>
</div>
</body>
controller
var app = angular.module('plunker', []);
angular.module('plunker')
.controller('ReservationController',ReservationController);
ReservationController.$inject=['$scope'];
function ReservationController($scope) {
var resvnCtrl=this;
resvnCtrl.reservation={};
resvnCtrl.confirmation={};
$('#datetimepicker').datetimepicker();
resvnCtrl.submitForm=function(isValid){
alert("valid:"+resvnCtrl.form.time.$valid);
}
}

I think you can refer to angular-strap:http://mgcrea.github.io/angular-strap/#/datepickers. when you import angular-strap.min.js, angular-strap.tpl.min.js and libs.min.css to your index.html. your app.js should be like this:
var app = angular.module('plunker', ['mgcrea.ngStrap.datepicker']);

That's the curse of usage jQuery within angular. Your models controller updates only $viewValue when plugin initialized and that does not trigger digest. Digest triggered my another action - focus in or out that is run digest.
Solution for this is watcher that will manually set $modelValue by $setViewValue() method so angular will know something happened and update validation.
And please, create separate directive for datepicker that will initialize it on element you used directive on.

Dynamic form addition/subtraction with angularjs

I am trying to get my dynamic form additions/subtractions to work correctly. The situation is that I am able to get the form block to add or remove, however, when I click the remove button it removes the most recently added block rather than the one I click on.
For example, if I add two new form blocks for a total of 3 blocks (block1, block2, block3) and I click remove on block2, instead of removing block 2 it removes block3.
I have created a plunker that demonstrates this, but it ONLY works when you launch the preview side in a separate window (otherwise the add button is inactive for some reason).
Working Example (must open in popup preview in plunker to function): plunker
<form class="form-horizontal" name="cpdForm" novalidate="" ng-submit="processForm()" ng-show="!message">
<h2>Subcontractor Performance</h2>
<hr />
<div ng-repeat="subcontractor in subcontractors">
<div class="well well-sm">Subcontractor #{{subcontractor.id}} <span id="subCounter"></span>
<button type="button" ng-click="removeSub()" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="form-group">
<div class="col-md-6">
<label for="subName">Subcontractor Name</label>
<input type="text" class="form-control" id="subName" name="subName" placeholder="Subcontractor" ng-model="formData.subName['subName'+($index+1)]" />
</div>
<div class="col-md-3">
<label for="mwbeCert">Disadvantaged Certification</label>
<select class="form-control" name="mwbeCert" ng-model="formData.mwbeCert" required="">
<option value="">Select MWBE Certification...</option>
<option ng-repeat="item in dropdownpoll['mwbecert']" value="{{item.mwbeid}}">{{item.mwbe}}</option>
</select>
</div>
<div class="col-md-3">
<label for="subAmount">Contracted Amount</label>
<div class="inner-addon left-addon">
<i class="glyphicon glyphicon-usd"></i>
<input type="text" class="form-control" id="subAmount" name="subAmount" placeholder="Contracted Amount" ng-model="formData.subAmount" />
</div>
</div>
</div>
<div class="form-group">
<div class="col-md-4">
<label for="subContactName">Contact Name</label>
<input type="text" class="form-control" id="subContactName" name="subContactName" placeholder="Contact Name" ng-model="formData.subContactName" />
</div>
<div class="col-md-4">
<label for="subContactPhone">Contact Phone</label>
<input type="text" class="form-control" id="subContactPhone" name="subContactPhone" placeholder="Contact Phone" ng-model="formData.subContactPhone" />
</div>
<div class="col-md-4">
<label for="subContactEmail">Contact Email</label>
<input type="text" class="form-control" id="subContactEmail" name="subContactEmail" placeholder="Contact Email" ng-model="formData.subContactEmail" />
</div>
</div>
<div class="form-group">
<div class="col-md-3">
<label for="subRating">Subcontractor Rating</label>
<select class="form-control" name="subRating" ng-model="formData.subRating" required="">
<option value="">Select Subcontractor Rating...</option>
<option ng-repeat="item in dropdownpoll['subrating']" value="{{item.subratingid}}">{{item.rating}}</option>
</select>
</div>
<div class="col-md-9">
<label for="subComment">Comments</label>
<input type="text" class="form-control" id="subComment" name="subComment" placeholder="Comments" ng-model="formData.subComment" />
</div>
</div>
<hr />
<button type="button" class="btn btn-info btn-sm pull-right" ng-show="showAddSub(subcontractor)" ng-click="addNewSub()">[+] Add New Sub</button>
</div>
<input type="hidden" style="display:none;" ng-model="formData.subCount" value="{{subcontractor.id}}" />
<div class="form-group">
<div class="col-sm-12">
<button class="btn btn-primary" id="submit" ng-click="submitting()" ng-disabled="buttonDisabled">{{submit}}</button>
</div>
</div>
</form>
<pre>{{formData}}</pre>

you are splicing $scope.subcontractors-1 which only behaves like it does, ie, removes the last one.
try using $event.currentTarget as a general rule, it will indicate the clicked item exactly, and don't forget to pass $event as a parameter for the remove function.
I hope this helps you

You need to pass an index to the function removeSub
I modified your fn to accept an index
$scope.removeSub = function(ind) {
var newItemNo = $scope.subcontractors.length-1;
$scope.subcontractors.splice(ind-1, 1);
};
and in your HTML you just pass the currently iterated $index
<button type="button" ng-click="removeSub($index)" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Hope this works. But be careful your formdata and subcontrators array are not in sync after this, thats a programming logic I guess you have to fix.
Happy coding
Cheers.
Joy

Not a full answer but your not telling the function in your script.js which one to remove your just telling it to chop one off the end. Try setting it up so that you pass the current subContractor id like ng-click="removeSub({{subcontractor.subContractorId}})" (not sure what your data model is) you could also reference the index but I believe that would be harder.

scope function inside controller not updating the values according to ng-models in the view

Hi i got this function in the controller that is called from the ng-view:
productApp.controller('ModalInstanceCtrl', function ($scope, $modalInstance, productFactory, prodId) {
$scope.ok = function () {
console.log($scope.model_productDescription);
$scope.$watch(['model_productBrand,model_productName,model_productDescription,model_productPrice, model_productStock'], function() {
var stock = '';
if($scope.model_productStock) {
stock = 'AVAILABLE';
}else{
stock = 'NO STOCK';
}
var productObject = {
id : prodId,
prodBrand : $scope.model_productBrand,
prodName : $scope.model_productName,
description : $scope.model_productDescription,
price : $scope.model_productPrice,
prodStock : stock
}
productFactory.updateProductById(productObject, function successCallback(data) {
// do something here in data
}, function errorCallback(data, status) {
alert(data + ' Failed with error ' + status);
});
})
};
});
This is the modal.htm body:
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="cancel()">×</button>
<h4 class="modal-title">Modify a Product</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<fieldset>
<!-- Row 1 -->
<div class="col-md-12 col-centered">
<div class="control-group">
<label class="control-label" for="prod_brand">Product Brand</label>
<input type="text" id="prod_brand" class="form-control"
ng-model="model_productBrand" required="required" value="prod.prodBrand">
</div>
<div class="control-group">
<label class="control-label" for="prod_name">Product Type</label> <input
type="text" id="prod_name" class="form-control"
ng-model="model_productName" required="required" value="prod.prodName">
</div>
<div class="control-group">
<label class="control-label" for="prod_price">Price</label>
<div class="input-group">
<span class="input-group-addon">$</span> <input type="text"
class="form-control" ng-model="model_productPrice" value="prod.price"> <span
class="input-group-addon">.00</span>
</div>
</div>
<div class="control-group">
<label class="control-label" for="prod_description">Description</label>
<textarea id="prod_description" class="form-control" ng-model="model_productDescription" cols="70" rows="3">{{prod.description}}</textarea>
</div>
<div class="control-group" style="margin-top: 10px">
<div class="input-group">
<span class="input-group-addon"> <input type="checkbox" ng-model="model_productStock">
</span>
<span class="form-control no-cursor">Stock</span>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="cancel()">Close</button>
<button type="button" class="btn btn-primary" ng-click="ok()">Edit product</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
Now, if i type in the textarea (for example), and press the ok button, it will get into this function. Now, since the textarea value has changed, shouldn't be reflected in the $scope.productDescription value? looks like it's not. I thought that whenever you make a change in the model, it would override the $scope.model_name value, should i use ng-change or any other directive for this?
Tried adding a $watch but it's not working either, any suggestion?
P.S: console.log($scope.model_productDescription); // shows the old description despite the fact i change it
Thanks.

The most probable cause of this is that your model.html is creating child scope. The changes that you do to the model property are local to child and cannot be seen in the parent due to prototypal inheritance.
What you can try is to create an object on the controller and do binding on object property.
$scope.productObject={};
Do the textarea binding to
<textarea id="prod_description" class="form-control" ng-model="productObject.productDescription" cols="70" rows="3">{{prod.description}}</textarea>
Now the changes would be reflected in productObject.productDescription property.
Also go through this wiki to understand how does scope inheritance works https://github.com/angular/angular.js/wiki/Understanding-Scopes

God... i'm going to fix it as of now by doing this:
From the view:
<button type="button" class="btn btn-primary" ng-click="ok(model_productBrand, model_productName, model_productPrice, model_productDescription, model_productStock)">Edit product</button>
From the controller passing the vars to the ok() function:
$scope.ok = function (model_productBrand, model_productName, model_productDescription, model_productPrice, model_productStock) {
Yeah... i know it looks UGLY as hell, but bleh...
Thank you, anyway i'm going to tick your answer as correct since the solution you gave me is really convenient, the only problem was that my project was kinda bad design for the solution you provided :P but is good!