javascript - Creating popup window with form content and then show output in parent page and send to database -
i have table , in of it's column want user when click on button inside column pop window appear have checkboxes , after user checked checkbox appear output in same column have button post these values of selected checkboxes , user name database (php). i'm beginner , wish me.
help.html code :
<html> <head> <script language="javascript"> mypopup = ''; function openpopup(url) { mypopup = window.open(url,'popupwindow','width=640,height=480'); if (!mypopup.opener) mypopup.opener = self; } </script> </script> </head> <body> <table border="1"> <tr> <th> user name </th> <th>product selected</th> </tr> <tr> <td> <input type="text"/></td> <td> <button onclick="openpopup('f.html')">select</button></td> </body> </html> and f.html code:
<html> <head> </head> <body> <form name="popupform"> <input type="checkbox" >cell phone</br> <input type="checkbox" >tv</br> <input type="checkbox" >book</br> <input type="button" value="submit"> </form> </body>
with angularjs this:
- get data server ajax request. in demo i've used static data reduce complexity.
- create ng-repeat create table
- add selected data stored in array table cell.
- make list clickable adding ng-click opens bootstrap modal table cell or wrap selected data in button.
- in modal create form ng-repeat selected products. testing if current item clicked can done
array.indexof(item) !== -1returns true if item in array. - with every click checkboxes update product array.
- after ok button click, close modal , post updated data server ajax request. (a check if data have changed good.)
you with-out angularjs think there have lot more code behaviour.
please find demo below (it not working here because seems bootstrap.ui uses cookies not allowed @ so) , here @ jsfiddle. check @ jsfiddle. there works.
(i'm pretty new javascript , angularjs, code not perfect, works.)
there somethings improved e.g. work services ajax requests.
there 1 bug in script: cancel click not working expected. data changed cancel click. can fix working copy of scope data or restore original data if cancel clicked.
var app = angular.module('myapp', ['ui.bootstrap']); app.controller('maincontroller', function($scope, $modal, $log) { $scope.products = ['coffee', 'beer', 'wine', 'tea', 'milk']; // userdata later server $http.get('/phpscript').success(...) // dummy userdata here because no backend available $scope.userdata = [ { name: 'john doe', selectedproducts: [ 'coffee', 'beer', 'wine'] }, { name: 'jane doe', selectedproducts: [ 'coffee', 'tea'] } ]; $scope.changeproducts = function(userdata) { //$scope.items = ['item1', 'item2', 'item3']; var modalinstance = $modal.open({ templateurl: 'mymodalcontent.html', controller: 'modalinstancectrl', //size: size, resolve: { user: function() { return userdata; }, selectedproducts: function() { return userdata.selectedproducts; }, products: function () { //console.log($scope.selectedproducts); return $scope.products; // available products } } }); modalinstance.result.then(function (selecteditems) { //products = selecteditems; }, function () { $log.info('modal dismissed at: ' + new date()); }); }; }); app.controller('modalinstancectrl', function ($scope, $http, $modalinstance, products, selectedproducts, user) { //console.log('user', user); $scope.products = products; $scope.selected = selectedproducts; $scope.chkchange = function(item) { console.log(item); var index = $scope.selected.indexof(item); if (index > -1) { $scope.selected.splice(index, 1); } else { // not selected --> have add $scope.selected.push(item); } console.log($scope.selected); }; //console.log(selectedproducts); $scope.ok = function () { // prepare sending sever // --> check here if data have changed or not (not implemented yet) console.log('new selection', $scope.selected); var data = $.param({ json: json.stringify({ user: user.name, products: $scope.selected }) }); $http.post('/echo/json/', data) .success(function(data, status) { console.log('posted following data:', data); }); $modalinstance.close();//); $scope.selected.item); }; $scope.cancel = function () { $modalinstance.dismiss('cancel'); }; }); //custom filter display selected products. app.filter('array', function() { return function(input) { //console.log(input); return input.join(', '); }; });body { padding: 5px; }<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script> <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script> <link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> <div ng-app="myapp"> <div ng-controller="maincontroller"> <script type="text/ng-template" id="mymodalcontent.html"> <!-- template modal --> <div class="modal-header"> <h3 class="modal-title">choose products!</h3> </div> <div class="modal-body"> <form> <div class="checkbox" ng-repeat="item in products"> <label> <input type="checkbox" ng-click="chkchange(item)" ng-checked="selected.indexof(item) !== -1"/> {{item}} </label> </div> </form> </div> <div class="modal-footer"> <button class="btn btn-primary" ng-click="ok()">ok</button> <button class="btn btn-warning" ng-click="cancel()">cancel</button> </div> </script> <table class="table"> <tr> <th>user name</th> <th>products selected</th> </tr> <tr ng-repeat="user in userdata"> <td>{{user.name}}</td> <td><button ng-click="changeproducts(user)">{{( user.selectedproducts | array ) || 'nothing selected!' }}</button></td> </tr> </table> </div> </div>
Comments
Post a Comment