mysql - How to add data dynamically in a json -
i have form write data , send via ajax 'post' mysql. in same page i've ajax it's 'get', retrieve data , put on table. question is: i've add dynamically data in table when submit form, without have reload page. possible? if yes how? much, here code (without 2 php files -too short lol- if need can post it)
<!doctype html> <html ng-app> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <title>hey boss</title> <!-- bootstrap --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- html5 shim , respond.js ie8 support of html5 elements , media queries --> <!-- warning: respond.js doesn't work if view page via file:// --> <!--[if lt ie 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> <style> body { padding-top: 70px; } </style> </head> <body> <!--<h2 align="center">heyboss team<br><small>tabella tempi</small></h2>--> <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> <div class="container-fluid"> <!-- brand , toggle grouped better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">heybossteam</a> </div> <!-- collect nav links, forms, , other content toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"> <a href="/index.html">home<span class="sr-only">(current)</span></a> </li> <li><a href="#tempi">tempi</a></li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" ng-model="cerca" placeholder="cerca.."> </div> <button type="submit" class="btn btn-default">cerca</button> </form> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container-fluid" ng-controller="hb2controller"> <br> <form name="addtimez" method="post"> <div class="row text-center" align="center"> <div class="col-xs-12 col-md-2"> <label for="lab1">gioco</label> <select id="lab1" class="form-control" name="gioco" ng-model="newtime.gioco"> <option value="assetto corsa" selected>assetto corsa</option> <option value="rfactor">rfactor</option> </select> </div> <div class="col-xs-12 col-md-3"> <label for="lab2">pista</label> <input id="lab2" type="text" class="form-control" ng-model="newtime.pista" name="pista" placeholder="pista"> </div> <div class="col-xs-12 col-md-3"> <label for="lab3">auto</label> <input id="lab3" type="text" class="form-control" ng-model="newtime.auto" name="auto" placeholder="auto"> </div> <div class="col-xs-12 col-md-2"> <label for="lab4">nome</label> <input id="lab4" type="text" class="form-control" ng-model="newtime.nome" name="nome" placeholder="nome pilota"> </div> <div class="col-xs-12 col-md-2"> <label for="lab5">tempo</label> <input id="lab5" type="text" class="form-control" ng-model="newtime.tempi" name="tempi" placeholder="tempo"> </div> </div> <br> <div class="row"> <div class="col-md-12 col-lg-12" align="center"> <button data-ng-click="addnewtime()" class="btn btn-primary btn-block" name="add">aggiungi tempo</button> </div> </div> <br> <div align="center" class="bg-success" ng-show="subsuccess"><h3 class="text-primary">aggiunto!</h3></div> </div> <br> <a name="tempi"> </a> <div ng-controller="hbcontroller"> <table class="table table-bordered table-striped"> <thead> <tr class="text-primary"> <th>gioco</th> <th>pista</th> <th>auto</th> <th>nome</th> <th>tempi</th> </tr> </thead> <tbody> <tr ng-repeat="x in datas | orderby: 'gioco' | filter:cerca"> <td>{{x.gioco}}</td> <td>{{x.pista}}</td> <td>{{x.auto}}</td> <td>{{x.nome}}</td> <td>{{x.tempi}}</td> </tr> </tbody> </table> </div> <script> function hbcontroller($scope,$http) { var site = "http://heyboss.altervista.org"; var page = "/mysqllulz.php"; $http.get(site + page).success(function(response) {$scope.datas = response;}); } function hb2controller($scope,$http) { $scope.addnewtime = function(add){ $http.post("mysqllulz2.php",{'gioco': $scope.newtime.gioco, 'pista': $scope.newtime.pista, 'auto': $scope.newtime.auto, 'nome': $scope.newtime.nome, 'tempi': $scope.newtime.tempi}) .success(function(data, status, headers, config){ $scope.subsuccess = true; console.log("fatto :)"); }); }; } </script> <!-- jquery (necessary bootstrap's javascript plugins) --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- include compiled plugins (below), or include individual files needed --> <script src="js/bootstrap.min.js"></script> </body> </html>
$scope.input= input data; $http.post(json file path, $scope.input);
Comments
Post a Comment