get sharepoint list data into html - javascript

My boss asked me today if it is possible to use Sharepoint list data into an external HTML website...
The client have a sharepoint intranet and an HTML website.
They are publishing news on their sharepoint but they'd like to recover the news (sharepoint list) and put them into the home page of the other website.
I saw some different possibilities using Jquery or JavaScript or else Json.
To the effect that i'm not a regular with these languages...
First question: Is that possible? Because i think the two websites have differents servers.
Second one: if yes, how can i do that?
Thanks in advance

Hello and welcome to stackoverflow. A better place for your question might be over at https://sharepoint.stackexchange.com/.
Anyways, you can of course use a variety of methods to get sharepoint's list data - for example using the REST interface:
function getListItem(url, listname, id, complete, failure) {
$.ajax({
url: url + "/_api/web/lists/getbytitle('" + listname + "')/items(" + id + ")",
method: "GET",
headers: { "Accept": "application/json; odata=verbose" },
success: function (data) {
complete(data);
},
error: function (data) {
failure(data);
}
});
}
}
Here's some more info:
http://msdn.microsoft.com/en-us/magazine/dn198245.aspx

Yes, that is very much possible. You can consume webservices in sharepoint to expose data.
If you other server is purely HTML then the only way would be to go with consuming web services via Jquery.
However, if its PHP/Ruby or some other server, you can consume the services in the server side language as well.
https://www.nothingbutsharepoint.com/sites/devwiki/articles/pages/got-rest-querying-sharepoint-list-data-using-rest-services-client-side-part-1.aspx

Related

Pulling text content from Wikipedia - iframes?

I'm in the process of building a website (using Squarespace) with various pages about people notable enough to have a Wikipedia pages. I have over 150 of these pages, so handwriting bios is pretty time intensive. I'm hoping to pull the text from the introduction of these various figures' Wikipedia pages, so that a) I don't have to write the text myself and b) the information is always updated (which isn't the case with copy and paste).
I've written out the basic format here, for Beyonce's Wikipedia article, which shows the Wikipedia page as normal when run. The height and width values are arbitrary.
<iframe src="https://en.wikipedia.org/wiki/Beyoncé" height="551" width="705"></iframe>
Which gives me:
<iframe src="https://en.wikipedia.org/wiki/Beyoncé" height="551" width="705"></iframe>
How might I pull just the text from the page, not the images, sidebars, table of contents, etc. so my website can be visually homogenous? Are iframes even the right tool to use?
Thanks,
K
Probably the best way to achieve this is by working with Wikipedia API.
For example you could retrieve some data in json format from Wikipeida API
and then format it and save to your database.
JSON:
https://en.wikipedia.org/w/api.php?format=json&action=query&prop=extracts&exintro=&explaintext=&titles=Beyonc%C3%A9
and the same but in HTML representation of the JSON format:
https://en.wikipedia.org/w/api.php?action=query&prop=extracts&exintro=&explaintext=&titles=Beyonc%C3%A9
if you want to work with iframe you could try printer-friendly version of the wiki artice into an iframe.
<iframe src="https://en.wikipedia.org/w/index.php?title=Beyonc%C3%A9&printable=yes"></iframe>
or you can do this with AJAX by calling the wiki api with custom query string parameters.
<!-- HTML -->
<div id="article"></div>
$(document).ready(function(){
$.ajax({
type: "GET",
url: "http://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text&page=Beyoncé&callback=?",
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function (data, textStatus, jqXHR) {
var markup = data.parse.text["*"];
var blurb = $('<div></div>').html(markup);
$('#article').html($(blurb).find('p'));
},
error: function (errorMessage) {
}
});
});
source question for ajax method
and also DEMO from this question

correct instagram authentication method for web applications (users without instagram account)

I would like to show all the instagram pictures with a specific tag in my wedding site, indipendently of the user that has posted it and without asking to my site users to login into Instagram (they could not have an Instagram account!). What is the best and correct way?
What I'm doing now:
1) I've configured a new client "Wedding" in my personal instagram "Manage Clients" section.
2) I've got a token calling MANUALLY (I mean copy and past ONCE the url in my personal browser) the following URL:
https://api.instagram.com/oauth/authorize/?client_id=client_id_of_my_client_wedding&redirect_uri=redirect_uri_of_my_client_wedding&response_type=token
and logging into Instagram with my personal account once asked by the Instagram login popup window
3) I add in my html page the following javascript:
<script>
function myinstagramfunction (json_object)
{
// I fetch here the json object that contains the info of all the pictures returned
}
</script>
<script type="text/javascript" src="https://api.instagram.com/v1/tags/<my_wedding_tag>/media/recent?access_token=<token_retrieved_in_step_2>&callback=myinstagramfunction"/>
The second script performs a cross-domain call to instagram api using JSONP (JSON with Padding) and calling my local function "myinstagramfunction".
Questions:
a) Is this the correct method and the one officially suggested/allowed by instagram?
b) currently the client Wedding is configured in "Sandbox Mode". Do you suggest to submit it to the approval of instagram or is there something not allowed in my procedure?
please let me know!
thank you
Davide
A solution like https://lightwidget.com/ doesn't fit your needs?
No coding skills needed, just copy and paste.. I think this should work ok for a weeding website.
EDIT:
Okay, so try this way:
function myinstagramfunction (json_object)
{
// I fetch here the json object that contains the info of all the pictures returned
console.log("OK");
}
$.ajax({
type: "GET",
dataType: "jsonp",
url: 'https://api.instagram.com/v1/tags/YOUR_HASHTAG/media/recent?access_token=YOUR_ACCESS_TOKEN_HERE&callback=myinstagramfunction',
success: function (result) {
console.log(result);
}
});
Remember that Instagram api calls has rate limits.

Stackoverflow, Linkedin like notification when there is new activity

Lots of site have notification system when there is new posts.
For example,
in stackoverflow
in LinkedIn
When this is clicked the page reloads.
I wanted to implement this kind of system in my application.
So when new items are added in database, show this kind of notification, and when user clicks it. Reload the page.
Does anyone have idea of how this kind of notification works and how we can implement it?
Any post or idea regarding this would be helpful.
Also, If someone thinks this question can have more tags, feel free to add.
Here is the quick idea how you can do this.
Client side auto refresh and get content using ajax post.
<h2>Notification</h2>
<div id="divNotif" style="display:none;"></div>
<script id="sessionJs" type="text/javascript">
function GetNotification() {
$.ajax({
type: "GET",
url: '#Url.Action("GetNotification", "Notification")',
dataType: "html",
success: function (data) {
$("#divNotif").html(data);
$("#divNotif").fadeIn('slow');
setTimeout(function () { GetNotification(); }, 5000); //change timeout duration here
},
error: function (data) {
//alert("BAD:" + data.statusText);
}
});
}
GetNotification();
</script>
Controller return json
[HttpPost]
public ActionResult GetNotification()
{
int notifCount = fromDb.NotificationCount;
return Content("<span>New notification " + notifCount + "</span>", "text/html"); // returning a PartialView would be better one
}
Ashwini Vermas answer uses polling instead of pub/sub. It will increase trafic and put strain on the web server etc. Use SignalR instead.
I would publish all system events on a message bus then clients can subscribe to them using this library
https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy
Here is a demo
https://github.com/AndersMalmgren/SignalR.EventAggregatorProxy/tree/master/SignalR.EventAggregatorProxy.Demo.MVC4
disclamier: I'm the author of the library

Using JSONP API from forecast.io with WinJS

First off, apologies if this is a silly question, I'm new to WinJS and relatively new to Javascript, but I've been going great til I hit this roadblock.
I'm currently working on a weather app for Windows 8 using WinJS, and I'm trying to pull the data from the forecast.io API, which in my case is provided in JSONP format.
I easily got it working in-browser using jQuery and .getJSON, but since I have to use WinJS.xhr to request the data instead I'm having some difficulty.
I can pull the data just fine using the following code:
function getWeather() {
WinJS.xhr({
type: "GET",
url: "https://api.forecast.io/forecast/*ommited API key*/-36.044394,146.953718?callback=?&units=si",
headers: { "Content-type": "application/json" }
}).then(function complete(data) {
var weatherData = data.responseText;
(new Windows.UI.Popups.MessageDialog(weatherData, "Success!")).showAsync().done();
}, function error(data) {
(new Windows.UI.Popups.MessageDialog("Failed.", "Error")).showAsync().done();
});
}
This shows me the data in a popup window, so I'm sure that I've accessed it. The problem is, I can't do anything with it. In jQuery I simply used "data.currently.temperature" to get the current temperature data, but I can't get something similar working in this situation.
Any help or pointers would be greatly appreciated!
P.S sorry if I butchered any terminology, I'm doing my best.
Here's what data.responseText returns, there's quite a lot so I put it in a text file.
http://justadddesign.net/data.responseText.txt
It's because data.responseText is string not object. Try:
var forecastInfo = JSON.parse(data.responseText);
and then access forecastInfo object properties.

Searching JSTOR API using Javascript

im writing a web app in javascript which creates harvard style references for a source.
I was hoping let the user search for journals and articles, and have the form prepopulated
to search the JSTOR library for data they have an SRU interface at http://dfr.jstor.org/sru/ which returns XML for search queries. (e.g. http://dfr.jstor.org/sru/?operation=searchRetrieve&query=dc.title+%3D+%22test%22&version=1.1)
Is there a way to get this xml using javascript?
Ive tried using a jquery ajax request as follows:
var jstor = "http://dfr.jstor.org/sru/?operation=searchRetrieve&query=dc.title+%3D+%22test%22&version=1.1"
$.ajax({
url: jstor,
dataType: "xml",
success: function(data) {
console.log(data);
}
});
But i get an error in firebug "407 Proxy Authentication Required", any ideas?
Looks like you aren't authorized. You need to get an API key in order to access the data.

Categories

Resources