Uncaught syntax error in angularjs - html

I am using below code to populate data from Parse api into table using Angularjs and bootstrap.But the Javascript in which i defined the controller is not executing. The html code is given below.
index.js
<!DOCTYPE html>
<html data-ng-app="parseApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.14/angular.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body >
<div class= "container" data-ng-controller="ParseController" >
<table class="table" >
<thead>
<tr>
<th>Email</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="temp in user">
<td>{{temp.email}}</td>
<td>{{temp.phone}}</td>
</tr>
</tbody>
</table>
</div>
<script type="text/javascript">
var parse = angular.model('parseApp',[]);
function ParseController($scope, $http)
{
$http({method : 'GET',url :'https://api.parse.com/1/classes/User',
headers: {'X-Parse-Application-Id': 'XXXXXXX',
'X-Parse-REST-API-Key':'XXXXXX',
}}).success(function(data,status) {
console.log(data);
$scope.user = data;
}).error(function(data,status)
{
}
parse.controller('ParseController',ParseController);
}
</script>
</body>
</html>

You have a syntax error
.error(function(data,status)
{
});
Also, it is angular.module, not angular.model

I think the syntax error is in the error handler:
.error(function(data,status)
{
});

Related

Why is my bootstrap not working?

Please help me! Why is bootstrap not loading the classes?
Here's my code which is just a table and a simple button, yet no classes are applied
<!DOCTYPE html>
<html>
<head>
<title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</title>
</head>
<body>
<table class="table" id="table">
<thead>
<tr>
<th>Order ID</th>
<th>TX ID CxPay</th>
<th>TX ID IY</th>
<th>Amount</th>
<th>Class</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
</tr>
</tbody>
</table>
<button class="btn btn-success">asasa</button>
<script>
$(document).ready(function() {
$('#table').DataTable();
} );
</script>
</body>
</html>
Neither bootstrap nor datatables is working. What am I missing here?
Any help is appreciated!
You are importing the script inside <title> that's not correct. In <title> only text is allowed describing your page's title. Place your <script> and <link> above the </head>
All your included files are in your <title>.
You have to write :
<head>
<title>My Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>

Date picker not coming inside of ng repeat in AngularJS

Am binding islamic date as date picker to text box , but when writing that inside of ng repeat its not working
my code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="Scripts/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.plus.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.plugin.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.picker.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.islamic.min.js"></script>
<link href="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/css/jquery.calendars.picker.css" rel="stylesheet" />
</head>
<body>
<div ng-app="myApp" ng-controller="AppCtrl">
<table>
<tr ng-repeat="r in rvm">
<td>
<input type="text" id="txtHijriDate" ng-model="r.Date" />
</td>
</tr>
</table>
</div>
</body>
</html>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', function ($scope) {
$scope.rvm = [];
$('#txtHijriDate').calendarsPicker({
calendar: $.calendars.instance('islamic'),
});
});
</script>
if i remove `ng-repeat="r in rvm" it is working but i want that date picker in ng repeat
Your code puts 1 (and only 1) calendar on the element with ID txtHijriDate
When you use ng-repeat, you create multiple elements with the same ID
You need to add
$('#txtHijriDate').calendarsPicker({
calendar: $.calendars.instance('islamic'),
});
Code in your JavaScript at every creation of element. And I’ll suggest to map “id” also to have ID dependent on your elements.
Error: Calendar binding code is executing before controls(input box) load inside ng-repeat.
Solution: Use ng-bind directive to bind calendar on controls.
See the working demo below:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.plus.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.plugin.min.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.picker.js"></script>
<script src="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/js/jquery.calendars.islamic.min.js"></script>
<link href="https://cdn.rawgit.com/kbwood/calendars/2.1.0/dist/css/jquery.calendars.picker.css" rel="stylesheet" />
</head>
<body>
<div ng-app="myApp" ng-controller="AppCtrl">
<table>
<tr ng-repeat="i in [1, 2,3,4,5] track by $index">
<td>
<input type="text" ng-
ng-bind="bindDate('calendar-control'+$index)" id="calendar-control{{$index}}"
model="rvm[1].Date" />
</td>
</tr>
</table>
</div>
</body>
</html>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('AppCtrl', function ($scope) {
$scope.rvm = [];
$scope.bindDate=function(id){
$('#'+id).calendarsPicker({
calendar: $.calendars.instance('islamic'),
});
}
});
</script>

Multiple controllers in angular

Hello some pleeeease help me with this. I am new to angular. I want to apply both controllers to my table. These two controllers are created under different modules. The module is from npm install. it is named angular-table-resize. Here is the code below. the table resize feature seems not working
Controller
var app = angular.module('myApp', ['ngTableResize']);
app.controller('AppCtrl', ['$scope',function($scope) {
$scope.resizeMode = "FixedResizer";
}]);
var app2 = angular.module('myApp2', []);
app2.controller('AppCtrl2', ['$scope','$http',function($scope,$http) {
$scope.num = -1;
$http.get('/enodeb').success(function(response){
$scope.ue = response;
});
}]);
html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<link rel="stylesheet" href="node_modules/angular-table-resize/dist/angular-table-resize.min.css">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<meta charset ="utf-8">
<meta http-equiv="X-UA-Compatible" content= "IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div ng-table="tableParams" class="container" ng-Controller="AppCtrl" style="margin-left:180px">
<h1>ERIS/BUDS Mismatches</h1>
<table resizeable mode="resizeMode" class="table draggable sortable" id="myTable">
<thead>
<tr>
<th id="colName1"><a>EnodeB</a></th>
<th id="colName2"><a>Product(BUDS)</a></th>
<th id="colName3"><a>SerialNum(BUDS)</a></th>
<th id="colName4"><a>Bams-ID(BUDS)</a></th>
<th id="colName5"><a>Product(ERIS)</a></th>
<th id="colName6"><a>SerialNum(ERIS)</a></th>
<th id="colName7"><a>Bams-ID(ERIS)</a></th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "device in ue">
<td>{{device.enodeBname}}</td>
<td>{{device.productnum_buds}}</td>
<td>{{device.serialnum_buds}}</td>
<td>{{device.bamsid_buds}}</td>
<td>{{device.productnum_eris}}</td>
<td>{{device.serialnum_eris}}</td>
<td>{{device.bamsid_eris}}</td>
</tr>
</tbody>
</table>
</div>
<script src="angular-table-resize.min.js"></script>
<script src="jquery.min.js"></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="Controller/controller.js"></script>
<script src="dragtable.js"></script>
<script src="sorttable.js"></script>
</body>
You can't declare two controllers on one html element, but what you can do is apply a one controller to a parent element and one to a child, like this:
<div ng-controller="AppCtrl">
<table ng-controller="AppCtrl2">
<!-- both AppCtrl's and AppCtrl2's scopes are available here -->
</table>
</div>
Mind that in your current code you've defined your main myApp module and then some other myApp2 module, but didn't set myApp2 as the main module's dependency. You need to do either do that:
var app = angular.module('myApp', ['ngTableResize', 'myApp2']);
or just define both controllers on the same module:
angular.module('myApp')
.controller('AppCtrl2', ['$scope','$http',function($scope,$http) {
/* ... */
});

Toggle table row based on class name in HTML

Hi I am having a piece of code. Here I am toggling my table based on the class name which I have hardcoded over here. I want to pass my class name as a variable in order to toggle it.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function alok(){
$(".b:not(:first)").toggle();
}
</script>
</head>
<body>
<table>
<tr class="b" onclick=alok()><td>qw</td></tr>
<tr class="b"><td>alok</td></tr>
<tr class="b"><td>verma</td></tr>
<tr class="c" onclick=alok()><td>qw</td></tr>
<tr class="c"><td>alok</td></tr>
<tr class="c"><td>verma</td></tr>
</table>
</body>
</html>
Thanks guys for looking into it... anyways I solved it.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
function alok(obj){
var s= $(obj).attr('class');
$("."+s+":not(:first)").toggle();
}
</script>
</head>
<body>
<table>
<tr class="b" onclick=alok(this)><td>qw</td></tr>
<tr class="b"><td>alok</td></tr>
<tr class="b"><td>verma</td></tr>
<tr class="c" onclick=alok(this)><td>qw</td></tr>
<tr class="c"><td>alok</td></tr>
<tr class="c"><td>verma</td></tr>
</table>
</body>
</html>
You should make use of jQuery here.
$(document).on('click', 'tr', function () {
var elemClass = $(this).attr('class');
$('.' + elemClass + ':not(:first)').toggle();
});
I've wrote a fiddle - check it out.
http://jsfiddle.net/Wc5km/
As you're including jQuery in your document, it'd be a shame not to make use of it. Cleaner, more readable and it gets rid of that ugly inline onclick!

how to select the "td tag" by getElementById

<script>
alert(document.getElementById('a'));
</script>
<html>
<table>
<tr>
<td id='a' class="test">test</td>
</tr>
</table>
</html>
I tried this but get the "null" as a result.
anyone can help?
Thanks~
Try this
<html>
<table>
<tr>
<td id='a' class="test">test</td>
</tr>
</table>
<script>
alert(document.getElementById('a'));
</script>
</html>
have script tag below the <td>. Null is because you are trying to have a which is not there when script gets executed.
<html>
<head>
<script>
var readyStateCheckInterval = setInterval(function() {
if (document.readyState === "complete") {
alert(document.getElementById('a'));
clearInterval(readyStateCheckInterval);
}
}, 10);
</script>
</head>
<body>
<table>
<tr>
<td id='a' class="test">test</td>
</tr>
</table>
</body>
</html>
The document.readyState is a property built into all browsers to check if the page has loaded or not.
More info about the readyState property:
Opera
Mozilla
Internet Explorer