Here i have created web service and given public url for getting data from the data.I have written following code in office 365 developer preview(NAPA) default.htm page.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<title>DemoApplication</title>
<link rel="stylesheet" type="text/css" href="../Content/Office.css" />
<!-- Add your CSS styles to the following file -->
<link rel="stylesheet" type="text/css" href="../Content/App.css" />
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script src="https://appsforoffice.microsoft.com/lib/1.0/hosted/office.js"></script>
<!-- Add your JavaScript to the following file -->
<script src="../Scripts/App.js"></script>
</head>
<body onload="GetData()">
<select id="CbxArea" style="width: 200px">
<option>Select Area</option>
</select>
<input type="button" value="submit" id="btnsubmit"/>
</div>
</body>
</html>
fallowing code is written in app.js file
Office.initialize = function (reason) {
};
function GetArea(){
var ddlArea = $("#CbxArea");
$.ajax({
type: "POST",
url: "http://192.168.3.252:8081/HaraveerWCF/ExcelDataService.asmx/GetAreaNames",
contentType: "application/json; charset=utf-8",
//url:"ExcelDataService.asmx/GetAreaNames",
dataType: "json",
success: function (data) {
for (i = 0; i < data.d.length; i++) {
ddlArea.append($("<option></option>").val(data.d[i].AreaName).html(data.d[i].AreaName));
}
},
failure: function (msg) {
alert(msg);
}
});
}
Where i have written wrong.Please help me out.Make sure total code is written in only online office 365 portal account.Not written in visual studio.
You have done little bit, we can say override to options html. You are placing values and the text of the each options:
for (i = 0; i < data.d.length; i++) {
ddlArea.append($("<option></option>").val(data.d[i].AreaName)
.text(data.d[i].AreaName));
}
You can achieve this with $.each():
$.each(data.d, function(i, v){
ddlArea.append("<option></option>").val(v[i].AreaName).text(v[i].AreaName);
});
With jQuery 1.4+, you could just do
for (i = 0; i < data.d.length; i++) {
ddlArea.append($('<option/>', { value : data.d[i].AreaName }).text(data.d[i].AreaName);
}
You may have run into a JavaScript cross-domain data access issue as you're trying to access a remote address from you Office 365 Preview site. If the return type of the request to the remote address is JSONP, then you may be able to override the cross-domain data access issue.
Check with your browser Developer Tools (invoke it with F12 keyboard shortcut & then look under Network tab) or Firefox Firebug if the remote server URL returns any JSONP data.
Related
Good day, I am having difficulties using PDFExtension to load PDF's directly into the viewer. I have omitted the markups extension for testing purposes. I have tried following the steps here to no avail:
https://forge.autodesk.com/blog/fast-pdf-viewingmarkup-inside-forge-viewer
https://forge.autodesk.com/en/docs/viewer/v7/reference/Extensions/PDFExtension/
instance.canvas.append(htmlViewer); Simply creates a div defined by htmlViewer
let htmlViewer = "<div id=forgeViewer></div>";
//The Viewer will be instantiated here
instance.canvas.append(htmlViewer);
let viewer, markup;
function initializeViewer(pdf) {
if (viewer) {
console.log('loading');
viewer.impl.unloadCurrentModel()
if (markup)
markup.hide();
viewer.loadModel(pdf, viewer);
return;
}
var options = {
env: "Local",
useADP: false
}
Autodesk.Viewing.Initializer(options, () => {
viewer = new Autodesk.Viewing.Private.GuiViewer3D(document.getElementById('forgeViewer'));
viewer.setTheme("light-theme");
viewer.start();
if (!pdf) return;
viewer.loadExtension('Autodesk.PDF').then( () => {
viewer.loadModel(pdf, viewer);
});
});
}
initializeViewer('//dd7tel2830j4w.cloudfront.net/f1635895094123x658226723587068400/sample.pdf');
The actual viewer itself gets initialized but I see an infinite loading loop. In the console (network) I get a 404 not found for this PDF. However, I can confirm that this URL is indeed correct and I have access to it. Furthermore, I have tried using several different URL's for this file. I cannot use a locally stored file, it must be fetched with a URL. Maybe this is due to a misuse of the env: in options? I am confused... this is pulled directly from the example linked above.
Any help would be appreciated, thank you so much!
Have you checked your browser's dev tools to see if there are any errors?
Here's a minimal Forge Viewer setup that can load a PDF natively:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/style.css">
<style>
body,
html {
margin: 0;
padding: 0;
height: 100vh;
}
#preview {
position: absolute;
width: 100%;
height: 100%;
}
</style>
<title>Autodesk Forge: PDF Demo</title>
</head>
<body>
<div id="preview"></div>
<script src="https://developer.api.autodesk.com/modelderivative/v2/viewers/7.*/viewer3D.js"></script>
<script>
Autodesk.Viewing.Initializer({ accessToken: '' }, async function () {
const viewer = new Autodesk.Viewing.GuiViewer3D(document.getElementById('preview'));
viewer.start();
await viewer.loadExtension('Autodesk.PDF');
viewer.loadModel('/foo/bar.pdf');
});
</script>
</body>
</html>
Just replace /foo/bar.pdf with your own URL. Note however that if you try and load PDF documents from different origins, you might run into CORS problems.
I need help on the following: I cannot get the JQuery to load the JSON data even though the JSON file is firing in the console.
Here is the HTML code;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="js/jquery-3.3.1.js"></script><!-- places Javascript reference file in html-->
<link rel="stylesheet" type="text/css" href="css/stylesheet.css"> <!--places css in sub folder-->
<title>H</title>
</head>
<body>
<div id="vanilla_ajax">
</div>
<button type="button" id="button1" onclick="loadAJAX()">Change to AJAX</button>
<div id="jq_ajax">
</div>
<button type="button" id="button2" onclick="loadJQUERY()">Change to JQUERY</button>
<script src="js/ajax.js"></script>
</body>
</html>
The first button loads and is fine so I have excluded that portion. It is the second one "loadJQuery()" that does not render on the screen. Here is the Javascript for it:
function loadJQUERY(){
/*place holder for ajax loading using JQuery*/
$('#jq_ajax').append('<p id = "test">'); //jq test
$.ajax({
url: "data/Holder.json",
type: 'GET',
dataType: "json",
success: function (result) {
$("#jq_ajax").html("<p>" + result.data + "</p>");
}
});
}
The pathway for the folder is correct as it works with the XML/Ajax version.
the JSON file was using single quotes instead of double quotes. That was the issue
I am working through learning feathers and I am trying to send some data to a service I created. It works fine when I use it without any authorization. When I add authorization I can send the JWT token manually with postman. However when I send a post I am not sure how to send the token in the header or the best way to handle this. The example I have found uses socket.io. Is there a way to do this with a simple post?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0">
<title>Feathers Chat</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="//cdn.rawgit.com/feathersjs/feathers-chat/v0.1.0/public/base.css">
<link rel="stylesheet" href="//cdn.rawgit.com/feathersjs/feathers-chat/v0.1.0/public/chat.css">
</head>
<body>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="//unpkg.com/feathers-client#^1.0.0/dist/feathers.js"></script>
<script type="text/javascript">
var host = 'http://localhost:3030';
// Set up Feathers client side
var app = feathers()
.configure(feathers.rest(host).jquery(jQuery))
.configure(feathers.hooks())
.configure(feathers.authentication({ storage: window.localStorage }));
// authenticate using your JWT that was passed in the short lived cookie
app.authenticate().then(function(result){
console.log('Authenticated!', result);
alert('Your JWT is: ' + app.get('token'));
}).catch(function(error){
console.error('Error authenticating!', error);
});
</script>
<main class="login container">
<div class="row">
<div class="col-12 col-6-tablet push-3-tablet text-center">
<h1 class="font-100">Post</h1>
</div>
</div>
<div class="row">
<div class="col-12 col-6-tablet push-3-tablet col-4-desktop push-4-desktop text-center">
<form class="form" method="post" action="/posts">
<fieldset>
<input class="block" type="text" name="title" placeholder="title">
</fieldset>
<fieldset>
<input class="block" type="text" name="description" placeholder="description">
</fieldset>
<button type="submit" class="button button-primary block login">
Post
</button>
</form>
</div>
</div>
</main>
</body>
</html>
Thanks for any help! I really like feathers so far.
Ok so this is what I did and seems to work fine. I wasn't sure if feathers was somehow automagically handling the auth token after it was created. Once I setup the post to send via jquery and setup the authorization header it worked fine. Thanks for all the help. I do like feathers a lot so far!
$(document).ready(function() {
$( ".test-form" ).submit(function( event ) {
var token = app.get('token');
event.preventDefault();
$.ajax({
url: 'http://localhost:3030/posts/',
type: 'post',
data: {
title: $("#title").val(),
description: $("#description").val()
},
headers: {
Authorization: token
},
dataType: 'json',
success: function (data) {
console.info(data);
}
});
});});
Use the Feathers client. The same app you're using to do authentication.
// Get the Posts service to work with
var postsService = app.service('posts');
// Create a post
postsService.create({
title: $('#title').val(),
description: $('#description').val()
});
// Do something when a Post is created
postsService.on('created', function (post) {
// `post` is the newly created post
// this callback will run whenever a post is created
console.log(post);
});
You could even use the postsService.create method in an event handler, something like…
$('form').on('submit', function () {
postsService.create({
title: $('#title').val(),
description: $('#description').val()
});
});
Read this section: http://docs.feathersjs.com/authentication/client.html
You can get token with app.get('token').
when you post the data, set the header field in Authorization -> token which you get when you login.
I use Spring for running my rest API service, i cant get the list of json object that my service send from a sample html file and plz tell me how can i access to the first object.
this is the sample output of my rest API service:
[{"src_ip":"1.1.1.1","src_id":"98","date":1470527874000},
{"src_ip":"1.1.2.1","src_id":"25","date":1470527934000},
{"src_ip":"1.1.2.1","src_id":"25","date":1470527934000}]
and this the code that i used in my html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Testing Results</title>
<!--TODO badan version e CDN e jquery use shavad-->
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
$.ajax({
url: "http://127.0.0.1:8080/restapi2",
dataType: "jsonp"
}).then(function(data) {
$('.List').append(data);
$('.data').append(data[0]);
});
});
</script>
</head>
<body>
<div>
<br><br>
<p class="List"></p>
<br><br>
<p class="data"></p>
</div>
</body>
</html>
I should say that when i run the sample of this link on my html file, it worked Properly.
Updated part:
after fixing last error,still I didn't get any correct data to show in my browser, but this time, the console get something but i don't know how to use them. this is a snapshot of it and the left side show that two object were sent.
and this content of that object:
Based on the discussion on the comment the reason is you were trying to access the different domain than your page which is prohibited by browsers as a security precaution.
$(document).ready(function() {
$.ajax({
url: "http://localhost:8080/restapi2"
}).then(function(data) {
$('.List').append(data);
$('.data').append(data[0].);
});
});
"No 'Access-Control-Allow-Origin' header is present on the requested resource"
I've created a simple web service using asp.net and hosted on my machine's IIS server. I am trying to call this web service from plain html page without using Asp.net. The problem is that I am not getting response. Here is my code below :
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Calling Classic Web Services with jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("a#SayHello").click(function (e) {
e.preventDefault();
$.ajax({
type: 'POST',
data: '{firstName:10,lastName:15}',
// url: 'Service.asmx/SayHello',
url: 'http://192.168.1.20/MyService/Service.asmx/SayHello',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function(response) {
alert(response.d); //getting the Response from JSON
},
failure: function(msg) {
alert(msg);
}
});
});
});
</script>
</head>
<body>
<input id="name" /><a id="SayHello" href="#">Greetings!</a>
</body>
</html>
Can anybody please help me where I am going wrong in this code..?? If I run this in ASP.Net environment, it works perfectly. But if I host this, then it doesn't work. Please help me...!!
Are you sure the web service is responding in JSON format? It usually answers in XML. Also your <script> block should go in the <body> and not in the <head>.
if you have hosted the web service on the same IIS, then change 192.168.1.20 to localhost and then try..