This code runs on a SharePoint Web Part page in a Script Editor web part. It makes an AJAX call to get list items from SharePoint, and then it should be populating the form with those items. However, nothing is happening.
<link data-require="bootstrap-css#*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />
<h2>Questionnaire:</h2>
<br />
<div ng-app="App">
<div ng-controller="spListCtrl">
<table width="100%" cellpadding="10" cellspacing="2" class="employee-table">
<tr ng-repeat="control in Controls">
<td>{{control.Title}}</td>
<td>
<input type="radio" name="{{control.Id}}" value="Yes">Yes
<input type="radio" name="{{control.Id}}" value="No">No
</td>
<td>
<textarea id="{{control.Id}}Comment"></textarea>
</td>
</tr>
</table>
</div>
</div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
<script>
function getDataWithCaml(listName, caml) {
var endpoint = "https://myteamsite.sharepoint.com/_api/web/lists/GetByTitle('" + listName + "')/GetItems(query=#v1)?#v1={\"ViewXml\":\"'" + caml + "'\"}";
return jQuery.ajax({
url: endpoint,
method: "POST",
headers: {
"X-RequestDigest": $("#__REQUESTDIGEST").val(),
"Accept": "application/json;odata=verbose",
"Content-Type": "application/json;odata=verbose"
}
});
}
var App = angular.module('App', ['ngRoute'])
.controller('spListCtrl', function ($scope, $http) {
var caml = "<View><Query><Where><Contains><FieldRef Name='Title' /><Value Type='Text'>C-04</Value></Contains></Where></Query></View>";
var jsonData = getDataWithCaml("Controls", caml);
jsonData.success(function (data) {
alert('success');
$scope.Controls = data.d.results;
});
});
</script>
Since you are updating scope outside the context of Angular execution, you need to wrap the assignment in $scope.$apply, such as
$scope.$apply(function() {
$scope.Controls = data.d.results;
});
Related
Unable to Perform Post method on my JSON File
My JSON File is
[{
"name": "Help",
"description": "Deletion not allowed for products!?",
"price": 100000.0 }]
<html>
<head>
<title>Product Management</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/default.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"</script>
<script src="js/bootstrap.min.js"></script>
Function for Getting the Values
<script>
$(document).ready(function() {
$(window).load(function() {
$.ajax({
type: 'GET',
url: 'test.json',
dataType: 'json',
success: function(data) {
$.each(data, function(index, element) {
$("#abc").append($('<li>', {
text: element.name
}))
});
}
});
});
});
</script>
Function for Posting the Values in the JSON file
<script>
function sumbitForm(){
var x=document.getElementById("#name");
var y=document.getElementById("#description");
var z=document.getElementById("#price");
var Product={"name":x, "description":y, "price":z };
$.ajax({
url: "test.json",
type: "POST",
contentType: "application/json",
data: JSON.stringify(Product)
});
}
</script>
</head>
<body>
<div>
<ol id="abc">
</ol>
</div>
<div class="container">
Input Form for posting the Data
<form name="PForm" action="" method="POST">
<div class="form-group">
<label>Name:</label>
<input type="text" class="form-control" id="name" placeholder="Product Name">
</div>
<div class="form-group">
<label>Description:</label>
<textarea class="form-control" id="description" placeholder="Descrpition" rows="8"></textarea>
</div>
<div class="form-group">
<label>Price:</label>
<input type="text" class="form-control" id="price" placeholder="Price">
</div>
<button type="submit" class="btn btn-primary Right" onClick="submitForm()">Submit</button>
</form>
</div>
</body>
</html>
You need to get the value of the elements, like
var x=document.getElementById("#name").value;
Else you would send the DOM elements (which, converted to a string, would only be 'object')
<script>
var app = angular.module("myApp", []);
app.controller("myCntrl", function ($scope, $http) {
$scope.studentorder = "StudetnID";
$scope.studetnName = ""; //ng-model="studetnName"
//display rows as colums function scope to do
$scope.newrow = function (the_index) {
//------------here is where my problem is-------------------------------
var b = the_index.toString();
var a = parseInt(b, 10);
if(a==2)
document.getElementsByClassName("div-table-col")[a].setAttribute("class", "div-table-row");
};
$scope.Save = function () {
var httpreq = {
method: 'POST',
url: 'Default.aspx/Save',
headers: {
'Content-Type': 'application/json; charset=utf-8',
'dataType': 'json'
},
data: { StudentName: $scope.studetnName }
}
$http(httpreq).success(function (response) {
$scope.fillList();
alert("Saved successfully.");
})
};
$scope.Delete = function (SID) {
if (confirm("Are you sure want to delete?")) {
var httpreq = {
method: 'POST',
url: 'Default.aspx/DeleteThisIsInsideCSharpAndItsAMethod',
headers: {
'Content-Type': 'application/json; charset=utf-8',
'dataType': 'json'
},
data: { StudentID: SID }
}
$http(httpreq).success(function (response) {
$scope.fillList();
alert("Deleted successfully.");
})
}
};
$scope.fillList = function () {
$scope.studetnName = "";
var httpreq = {
method: 'POST',
url: 'Default.aspx/GetList',
headers: {
'Content-Type': 'application/json; charset=utf-8',
'dataType': 'json'
},
data: {}
}
$http(httpreq).success(function (response) {
$scope.StudentList = response.d;
})
};
$scope.fillList();
});
</script>
<%# Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" type="text/css" href="AlternatingRows.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div ng-app="myApp" ng-controller="myCntrl">
<table>
<tr>
<td>
Student Name :
</td>
<td>
<input type="text" id="txtStudentName" ng-model="studetnName" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="Save" ng-click="Save()" />
</td>
</tr>
</table>
<br />
<h1>DETAILS</h1>
<br />
<div>
<div class="div-table-col"
ng-repeat="student in StudentList | orderBy : studentorder"
ng-if="$index % 2 == 0"
ng-init="newrow($index)"
>
<!--id number-->
<div ng-bind="student.StudentID" class="div-table-col">
id number
</div>
<!--image-->
<div>
<img ng-src="{{student.StudentName}}" class="div-table-col">
</div>
<!--delete-->
<div class="div-table-col">
Delete
</div>
</div> <!--div id column-->
</div> <!--ImagesContainer-->
<!--scripting functions-->
</form>
</body>
</html>
Im passing $index and its working fine it starts from 0 and goes up to 3 so I know I am passing the numbers properly. The index is not being. so far I have tried the following:
var a =
1.parseInt(the_index,10)
2.parseInt(the_index.toString(),10)
3.parseInt(the_index)
4.Number(the_index)
document.getElementsByClassName("div-table-col")[a]....
but that a is not being recognized as any number and by default its 0.
BTW, you do know there's $even and $odd inside ngRepeat? So instead of doing:
<div class="div-table-col"
ng-repeat="student in StudentList | orderBy : studentorder"
ng-if="$index % 2 == 0"
ng-init="newrow($index)"
>
You can do
<div class="div-table-col"
ng-repeat="student in StudentList | orderBy : studentorder"
ng-if="$even"
ng-class="{'div-table-row': $even}"
>
Because if I understand your code correctly, you're showing even rows and adding .div-table-row class to them.
You also have ng-class-odd="expression" and ng-class-even="expression" to use inside ngRepeat to set class based on the element position.
https://code.angularjs.org/1.5.0/docs/api/ng/directive/ngClassEven
https://code.angularjs.org/1.5.0/docs/api/ng/directive/ngClassOdd
FYI - Accessing the DOM from the controller is a bad practice to have. You should use a directive, or one of the build-in angularjs directives.
I am facing difficulty in creating grid view for my table whose data is coming from database as a response in JSON format. Both UI and Javascript code are in same file. I have installed ng-grid using npm package at root path of application.
Index.html
<script src="node_modules/angular-ui-grid/ui.grid.min.js"></script>
<script src="ng-grid-2.0.11.min.js"></script>
<table style="width:50%" class="table table-bordered">
<thead>
<tr>
<th>Select</th>
<th>FR_ID</th>
<th>FR_Client</th>
<th>FR_Source</th>
<th>FR_Destination</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="search in searches">
<td><input type="checkbox" /></td>
<td>{{search.id}}</td>
<td>{{search.client}}</td>
<td>{{search.source}}</td>
<td>{{search.destination}}</td>
</tr>
</tbody>
</table>
<div class="small-12 columns">
<div class="submitButton" id="submitButton" ng-app="searchapp">
<div style="visibility:hidden;">{{y=name}}</div>
<input type="submit" value="Search" ng-click="seachRecords(y)" style="font-size:20px" />
</div>
</div>
</div>
Angular:
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl', function ($scope, $http){
$scope.seachRecords = function (y) {
var httpRequest = $http({
method: 'GET',
url: '/user/search?seachString='+y,
}).then(function (response, status) {
var responsetest = JSON.stringify(response.data);
$scope.searches = response.data;
}, function myError(data, status) {
$scope.searches = data;
});
}
});
</script>
I am able to create below table as shown in the image attached but I am trying to get Grid view and not able to form it, please suggest changes required for this.
JSON data should be usable with grid view as follows
<div data-ng-grid="searches"></div>
NOTE: 'responsetest' variable appears to be unused.
The response could be attached to 'searches' directly. Grid view expects a 'data' property to access searches data.
Angular
$scope.searches = JSON.stringify(response);
Try this?
HTML:
<script src="node_modules/angular-ui-grid/ui.grid.min.js"></script>
<script src="ng-grid-2.0.11.min.js"></script>
<div ng-grid="searches"></div>
<div class="small-12 columns">
<div class="submitButton" id="submitButton" ng-app="searchapp">
<div style="visibility:hidden;">{{y=name}}</div>
<input type="submit" value="Search" ng-click="seachRecords(y)" style="font-size:20px" />
</div>
</div>
JS:
<script>
var app = angular.module('myApp',[]);
app.controller('myCtrl', function ($scope, $http){
$scope.seachRecords = function (y) {
var httpRequest = $http({
method: 'GET',
url: '/user/search?seachString='+y,
}).then(function (response, status) {
var responsetest = JSON.stringify(response.data);
$scope.searches = {
data: response.data
}
});
}
});
</script>
Following ng-grid implementation:
http://angular-ui.github.io/ui-grid/
Im new to angular js i want to post a url to server
this is my code
Index.html
<html ng-app="signupApp">
<head>
<title>ServicePrice Signup</title>
<link rel="stylesheet" href="css/animations.css" />
<link rel="stylesheet" href="css/login.css" />
<link rel="stylesheet" href="css/foundation.min.css" />
</head>
<body>
<div class="centerwrap">
<div class="Signup" ng-controller="SignupController">
<!-- <form action="signin()"> -->
<h2>Signup</h2>
<label for="email">Email</label>
<input type="email" ng-model="email">
<label for="password">Password</label>
<input type="password" ng-model="password">
<input type="submit" class="button" ng-click="signup()">
</div>
<!-- </form> -->
</div>
<script type="text/javascript" src="angular/angular.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</body>
</html>
controller.js
var signupApp = angular.module('signupApp', [])
var site = "http://devhosting.wiredelta.in:9009";
signupApp.controller('SignupController', function($scope, $http) {
$scope.signup = function() {
var data = {
email: $scope.email,
password: $scope.password
};
$http({
url: site + '/company/signup',
method: "POST",
data: data,
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).success(function(data) {
console.log(data);
}).error(function(res) {
console.log(res);
});
}
});
how can clear this error and get response from server
both email and password reaches server but is says "bad request" all the time
error in console
POST http: //devhosting.wiredelta.in:9009/company/signup 400 (Bad Request)
controller.js: 24 Object {
error: Object
}
error: Objectmessage: "Data is not valid"
type: "BadRequestError"
__proto__: Object__proto__: Object
Unfortunately, Angular does not automatically encode the parameters in a formpost, like in jQuery.
You have to do this yourself, just like you have to add the header 'Content-Type': 'application/x-www-form-urlencoded' yourself, like you already did.
If you include jQuery you can do it like this: $.param(data)
I finaly found it as yang li told we need to convert data , so i used this
transformRequest: function(obj) {
var str = [];
for (var p in obj)
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
return str.join("&");
}
I have created a form to upload two files - questionpaper and the key. But the Ajax request is not working in an intended manner. I have been trying and trying but unable to figure out the bug. Please help.
Here is my form.
<form name="facform" id="facform" data-abide="ajax" enctype="multipart/form-data">
<fieldset>
<legend> All fields are required </legend>
<div class="row">
<div class="large-3 medium-3 columns">
<label> <b> Upload Question Paper </b> </label>
<input type="file" id="qfile" name="qfile" tabindex="7" required>
</div>
<div class="large-3 medium-3 columns end">
<label><b> Upload Key </b></label>
<input type="file" id="kfile" name="kfile" tabindex="8" required>
</div>
</div>
</fieldset>
<div class="row">
<div class="large-6 medium-6 columns">
<label><img id="loadingimg" src="http://dev.cloudcell.co.uk/bin/loading.gif"/></label>
<input id="form-submit" type="submit" class="button tiny" value="Submit" />
</div>
</div>
</form>
Here goes the javascript part.
<script>
//-----------------------//
$('#facform').on('valid.fndtn.abide', function() {
var fileInput = document.getElementById('facform');
var file = fileInput.files[0];
var formData = new FormData();
formData.append('qfile', file);
formData.append('kfile', file);
var form_url = 'getfiles.php';
$("#form-submit").hide();
$("#loadingimg").show();
$.ajax({
url: form_url,
type: 'POST',
data: formdata,
processData: false,
cache: false,
success: function(returnhtml){
$("#loadingimg").hide();
$("#facform").hide();
$("#smsg").html(returnhtml);
$("#facform")[0].reset();
}
//-----------------------//
});
});
</script>
to upload files using Ajax or jQuery , you need to use hidden iframe
this is full example for ajaxfileupload.js class allow you to use upload form .
or you could create simple function to submit your form into hidden iframe then get the iframe body html or text using jQuery as response .
<html>
<head>
<link href="http://www.phpletter.com/css/general.css" rel="stylesheet" type="text/css" media="screen">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://www.phpletter.com/contents/ajaxfileupload/ajaxfileupload.js"></script>
<script type="text/javascript">
function ajaxFileUpload()
{
$.ajaxFileUpload
(
{
//YOUR URL TO RECEIVE THE FILE
url: 'http://localhost/testing/postfile.php',
secureuri:false,
fileElementId:'fileToUpload',
dataType: 'json',
success: function (data, status)
{
if(typeof(data.error) != 'undefined')
{
if(data.error != '')
{
alert(data.error);
}else
{
alert(data.msg);
}
}
},
error: function (data, status, e)
{
alert(data.error);
alert(e);
}
}
)
return false;
}
</script>
</head>
<body>
<form name="form" action="" method="POST" enctype="multipart/form-data">
<table cellpadding="0" cellspacing="0" class="tableForm">
<thead>
<tr>
<th>Ajax File Upload</th>
</tr>
</thead>
<tbody>
<tr>
<td><input id="fileToUpload" type="file" size="45" name="fileToUpload" class="input"></td>
</tr>
<tr>
<td>Please select a file and click Upload button</td>
</tr>
</tbody>
<tfoot>
<tr>
<td><button class="button" id="buttonUpload" onclick="return ajaxFileUpload();">Upload</button></td>
</tr>
</tfoot>
</table>
</form>
</body>
</html>