angularjs - Input fields inside Angular-Ui Tabs are not POSTing to DB -
i have angular modal has angular-ui tabs. input fields outside tabs post fine, input fields inside tabs not. use same modal put , modal updates db new data. scope issue?
<fieldset> <div class="col-xs-12"> @*<label style="">hide: </label> <input style="" ng-model="currentitem.jobhidden" type="checkbox">*@ <div class="inline-fields"> <h4 style="margin-left:24px">job info customer info</h4> <label style="margin-left:23px">number:</label> <input style="width:100px" ng-model="jobnumber" type="text"> <label style="margin-left:115px">customer:</label> <input style="width:150px" type="text" ng-model="customername" typeahead="customer.customername customer in customerarray | filter:$viewvalue" placeholder="enter customer" typeahead-on-select="selectnewcustomer($item)"> </div> <div class="inline-fields"> <label style="margin-left:33px">status:</label> <select style="width: 100px" ng-model="jobstatus"> <option disabled>select</option> <option value="active">active</option> <option value="inactive">inactive</option> <option value="complete">complete</option> </select> <label style="margin-left:125px">address:</label> <input style="width:200px" ng-model="customeraddress" type="text"> </div> <div class="inline-fields"> <label style="margin-left:38px">name:</label> <input style="width:150px" ng-model="jobname" type="text"> <label style="margin-left:104px">city:</label> <input style="width: 66px" ng-model="customercity" type="text"> <label>st:</label> <input style="width: 30px" ng-model="customerstate" type="text"> <label>zip:</label> <input style="width: 44px" ng-model="customerzipcode" type="text"> </div> <div class="inline-fields"> <label style="margin-left:20px">address:</label> <input style="width:185px" ng-model="jobaddress" type="text"> <label style="margin-left:78px">ph:</label> <input style="width: 100px; " ng-model="customerphonenumber" type="text"> <label style="margin-left:0px">fax:</label> <input style="width: 89px" ng-model="customerfaxnumber" type="text"> </div> <div class="inline-fields"> <label style="margin-left:49px">city:</label> <input style="width:66px" ng-model="jobcity" type="text"> <label>st:</label> <input style="width:30px" ng-model="jobstate" type="text"> <label>zip:</label> <input style="width:44px" ng-model="jobzipcode" type="text"> </div> <div class="inline-fields"> <label style="margin-left:58px">ph:</label> <input style="width:100px" ng-model="jobphonenumber" type="text"> <label>fax:</label> <input style="width:89px" ng-model="jobfaxnumber" type="text"> </div> <div class="inline-fields"> <label style="margin-left:55px">pm:</label> <select style="width:138px" ng-options="employee.employeefirstname + ' ' + employee.employeelastname employee.employeefirstname + ' ' + employee.employeelastname employee in employeearray | filter:{employeeispm : true}" ng-model="jobtespm"> <option value="" disabled>select</option> </select> </div> </div> </fieldset><br /> <!--cover content--> <tabset> <tab heading="contract"> <div class="col-xs-12" style="margin-top:10px"> <div class="inline-fields"> <label style="margin-left:13px">original contract:</label> <input style="width:115px" ng-model="joboriginalcontract" type="text" format="number"> <label style="margin-left:57px">geo area:</label> <select style="width: 115px" ng-model="jobgeoarea"> <option disabled>select</option> <option value="jobgeoarea-1">jobgeoarea-1</option> <option value="jobgeoarea-2">jobgeoarea-2</option> </select> </div> <div class="inline-fields"> <label style="margin-left:69px">total co:</label> <input style="width:115px" ng-model="jobtotalco" type="text" format="number"> <label style="margin-left:82px">job class:</label> <select style="width: 115px; " ng-model="jobclass"> <option disabled>select</option> <option value="jobclass-1">jobclass-1</option> <option value="jobclass-2">jobclass-2</option> </select> </div> <div class="inline-fields"> <label style="margin-left:11px">revised contract:</label> <input style="width:115px" ng-model="jobrevisedcontract" type="text" format="number"> <label style="margin-left:55px">min wage:</label> <select style="width:90px" ng-model="jobminwage"> <option disabled>select</option> <option value="1000">$1000</option> <option value="2000">$2000</option> </select> <label style="margin-left:0px">job type:</label> <select style="width: 90px" ng-model="jobtype"> <option disabled>select</option> <option value="jobtype-1">jobtype</option> <option value="jobtype-2">jobtype</option> </select> </div> <div class="inline-fields"> <label style="margin-left:59px">retainage:</label> <select style="width:115px" ng-model="jobretainage"> <option disabled>select</option> <option value="jobretainage-1">jobretainage-1</option> <option value="jobretainage-2">jobretainage-2</option> <option value="jobretainage-3">jobretainage-3</option> </select> <label style="margin-left:42px">tax exempt:</label> <select style="width: 115px" ng-model="jobtaxexempt"> <option disabled>select</option> <option value="true">true</option> <option value="false">false</option> </select> </div> <div class="inline-fields"> <label style="margin-left:21px">original budget:</label> <input style="width:115px" ng-model="joboriginalbudget" type="text" format="number"> <label style="margin-left:39px">ins program:</label> <select style="width: 115px" ng-model="jobinsprogram"> <option disabled>select</option> <option value="jobinsprogram-1">jobinsprogram-1</option> <option value="jobinsprogram-2">jobinsprogram-2</option> <option value="jobinsprogram-3">jobinsprogram-3</option> </select> </div> </div><!--end col-xs-12--> </tab><!--end contract tab--> <tab heading="contacts">contacts go here</tab> <tab heading="document distribution">document distribution go here</tab> </tabset><!--end tab content--> <div class="col-xs-12"> <input style="margin-left:345px;width:70px;margin-right:20px;margin-top:25px" ng-click="printnewjobmodal(currentitem)" type="button" value="print" go-click="#" /> <input style="margin-right: 20px; width: 70px; margin-top: 25px" type="submit" value="save" go-click="#" /> <input style="width: 70px; margin-top: 25px" type="button" data-dismiss="modal" value="exit" go-click="#" /> </div> //new job modal $scope.newjobmodal = function () { $ekathuwa.modal({ id: "newjobmodal", contentstyle: "width:800px;heigth:400px", scope: $scope, templateurl: "modalnewjob" }); } //post new job $scope.submitjob = function () { var data = { jobid: $scope.jobid, jobnumber: $scope.jobnumber, jobname: $scope.jobname, jobdescription: $scope.jobdescription, joboriginalcontract: $scope.joboriginalcontract, jobbillingdate: $scope.jobbillingdate, jobtotalco: $scope.jobtotalco, jobrevisedcontract: $scope.jobrevisedcontract, joboriginalbudget: $scope.joboriginalbudget, jobbillingform: $scope.jobbillingform, jobtespm: $scope.jobtespm, jobtessuperintendent: $scope.jobtessuperintendent, jobstatus: $scope.jobstatus, jobmoreshit: $scope.jobmoreshit, jobhidden: $scope.jobhidden, jobtaxexempt: $scope.jobtaxexempt, jobcertpayroll: $scope.jobcertpayroll, jobcost: $scope.jobcost, jobremainingbudget: $scope.jobremainingbudget, jobprofit: $scope.jobprofit, jobpercentage: $scope.jobpercentage, jobtotalbilled: $scope.jobtotalbilled, jobbalancetobill: $scope.jobbalancetobill, jobbalancedue: $scope.jobbalancedue, jobaddress: $scope.jobaddress, jobcity: $scope.jobcity, jobstate: $scope.jobstate, jobzipcode: $scope.jobzipcode, jobcounty: $scope.jobcounty, jobphonenumber: $scope.jobphonenumber, jobfaxnumber: $scope.jobfaxnumber, jobgeoarea: $scope.jobgeoarea, jobclass: $scope.jobclass, jobtype: $scope.jobtype, jobminwage: $scope.jobminwage, jobinsprogram: $scope.jobinsprogram, customername: $scope.customername, customerphonenumber: $scope.customerphonenumber, customerfaxnumber: $scope.customerfaxnumber, customeraddress: $scope.customeraddress, customercity: $scope.customercity, customerstate: $scope.customerstate, customerzipcode: $scope.customerzipcode, customerwebsite: $scope.customerwebsite, customerothershit: $scope.customerothershit, customerhidden: $scope.customerhidden, customerpm: $scope.customerpm, customeradmin: $scope.customeradmin, customeraccountant: $scope.customeraccountant, customersuperintendent: $scope.customersuperintendent } $http.post('/api/apijob/postnewjob', data).success(function (data, status, headers) { console.log(data); window.top.location.reload(); }); updated controller
//post new job $scope.submitjob = function () { var data = { jobid: $scope.jobid, jobnumber: $scope.jobnumber, jobname: $scope.jobname, jobdescription: $scope.jobdescription, joboriginalcontract: $scope.joboriginalcontract.value, jobbillingdate: $scope.jobbillingdate, jobtotalco: $scope.jobtotalco.value, jobrevisedcontract: $scope.jobrevisedcontract.value, joboriginalbudget: $scope.joboriginalbudget.value, jobbillingform: $scope.jobbillingform, jobtespm: $scope.jobtespm, jobtessuperintendent: $scope.jobtessuperintendent, jobstatus: $scope.jobstatus, jobmoreshit: $scope.jobmoreshit, jobhidden: $scope.jobhidden, jobtaxexempt: $scope.jobtaxexempt.value, jobcertpayroll: $scope.jobcertpayroll, jobcost: $scope.jobcost, jobremainingbudget: $scope.jobremainingbudget, jobprofit: $scope.jobprofit, jobpercentage: $scope.jobpercentage, jobtotalbilled: $scope.jobtotalbilled, jobbalancetobill: $scope.jobbalancetobill, jobbalancedue: $scope.jobbalancedue, jobaddress: $scope.jobaddress, jobcity: $scope.jobcity, jobstate: $scope.jobstate, jobzipcode: $scope.jobzipcode, jobcounty: $scope.jobcounty, jobphonenumber: $scope.jobphonenumber, jobfaxnumber: $scope.jobfaxnumber, jobgeoarea: $scope.jobgeoarea.value, jobclass: $scope.jobclass.value, jobtype: $scope.jobtype.value, jobminwage: $scope.jobminwage.value, jobinsprogram: $scope.jobinsprogram.value, customername: $scope.customername, customerphonenumber: $scope.customerphonenumber, customerfaxnumber: $scope.customerfaxnumber, customeraddress: $scope.customeraddress, customercity: $scope.customercity, customerstate: $scope.customerstate, customerzipcode: $scope.customerzipcode, customerwebsite: $scope.customerwebsite, customerothershit: $scope.customerothershit, customerhidden: $scope.customerhidden, customerpm: $scope.customerpm, customeradmin: $scope.customeradmin, customeraccountant: $scope.customeraccountant, customersuperintendent: $scope.customersuperintendent } $http.post('/api/apijob/postnewjob', data).success(function (data, status, headers) { console.log(data); window.top.location.reload(); }); }; updated view
<tab heading="contract"> <div class="col-xs-12" style="margin-top:10px"> <div class="inline-fields"> <label style="margin-left:13px">original contract:</label> <input style="width:115px" ng-model="joboriginalcontract.value" type="text" format="number"> <label style="margin-left:57px">geo area:</label> <select style="width: 115px" ng-model="jobgeoarea.value"> <option disabled>select</option> <option value="jobgeoarea-1">jobgeoarea-1</option> <option value="jobgeoarea-2">jobgeoarea-2</option> </select> </div> <div class="inline-fields"> <label style="margin-left:69px">total co:</label> <input style="width:115px" ng-model="jobtotalco.value" type="text" format="number"> <label style="margin-left:82px">job class:</label> <select style="width: 115px; " ng-model="jobclass.value"> <option disabled>select</option> <option value="jobclass-1">jobclass-1</option> <option value="jobclass-2">jobclass-2</option> </select> </div> <div class="inline-fields"> <label style="margin-left:11px">revised contract:</label> <input style="width:115px" ng-model="jobrevisedcontract.value" type="text" format="number"> <label style="margin-left:55px">min wage:</label> <select style="width:90px" ng-model="jobminwage.value"> <option disabled>select</option> <option value="1000">$1000</option> <option value="2000">$2000</option> </select> <label style="margin-left:0px">job type:</label> <select style="width: 90px" ng-model="jobtype.value"> <option disabled>select</option> <option value="jobtype-1">jobtype</option> <option value="jobtype-2">jobtype</option> </select> </div> <div class="inline-fields"> <label style="margin-left:59px">retainage:</label> <select style="width:115px" ng-model="jobretainage.value"> <option disabled>select</option> <option value="jobretainage-1">jobretainage-1</option> <option value="jobretainage-2">jobretainage-2</option> <option value="jobretainage-3">jobretainage-3</option> </select> <label style="margin-left:42px">tax exempt:</label> <select style="width: 115px" ng-model="jobtaxexempt.value"> <option disabled>select</option> <option value="true">true</option> <option value="false">false</option> </select> </div> <div class="inline-fields"> <label style="margin-left:21px">original budget:</label> <input style="width:115px" ng-model="joboriginalbudget.value" type="text" format="number"> <label style="margin-left:39px">ins program:</label> <select style="width: 115px" ng-model="jobinsprogram.value"> <option disabled>select</option> <option value="jobinsprogram-1">jobinsprogram-1</option> <option value="jobinsprogram-2">jobinsprogram-2</option> <option value="jobinsprogram-3">jobinsprogram-3</option> </select> </div> </div><!--end col-xs-12--> </tab><!--end contract tab--> };
Comments
Post a Comment