Develop Reference

Displaying Column Description on Hover

I would like to display the column description of my sharepoint list when the user hovers the mouse over the column header. Currently there is no out of the box solution for this and I followed this guide. However this guide does not work for SharePoint 2013. Any help or direction would be helpful!
Here is the list view that I am trying to apply this to.

The exact steps depend on if you plan to use a Content Editor web part or directly edit the View page. Let me know if you aren't sure how to do either.
The result:
The JavaScript:
Notes: Use the jQuery library version of your choice. Change the "Tickets" list name to your list name.
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
var testresults
function test() {
var headings = document.getElementsByClassName('ms-vh-div')
for (var i=0;i<headings.length; i++)
{
var columnName = headings[i].getAttribute("name");
columnName = columnName.replace("_x0020_"," ");
var head = headings[i].getElementsByTagName('a')[0];
//head.title = head.title + "\nhello world"
$.ajax({
"url": _spPageContextInfo.webServerRelativeUrl +
"/_api/web/Lists/getbytitle('Tickets')/fields?$select=Description&$filter=Title eq '" + columnName + "'",
"method": "GET" ,
"theHeading": head,
"headers": {
"accept": "application/json;odata=verbose"
},
"success" : function(data) {
var xml = arguments[2].response;
var description = "" + $(xml).find("content").text()
this.theHeading.title += "\n" + description;
},
"error" : function(e) { console.log("error " + e.message) }
});
}
}
// delay script until SharePoint "stuff" is finished.
_spBodyOnLoadFunctionNames.push("test")
</script>

Load specific html page with href and GET request response

First, I think my title isn't very clear and very representative of what I want to achieve, but I couldn't make it clearer ...
Ok so I have a Leaderboard, created from this ajax call:
$.ajax({
url: '/handler',
dataType: 'json',
success: function(data) {
var tb = document.getElementById('Leaderboard');
while(tb.rows.length > 1) {
tb.deleteRow(1);
};
var keys = Object.keys(data);
for( key of keys) {
var username = data[key].username;
var score = data[key].score;
var row = $('<tr id = "row' + tb.rows.length + '"><td>' + username + '</td><td>' + score + '</td></tr>');
$('#Leaderboard').append(row);
if(tb.rows.length > 11){
tb.deleteRow(tb.rows.length -1);
}
}
},
error: function(jqXHR, textStatus, errorThrown){
alert('Error: ' + textStatus + ' - ' + errorThrown);
}
});
So as you can see in the Leaderboard, when clicking on a username, it opens a new page with the result of a GET request (/leaderboard/:username). My question is how can I skin this page, or even better load an html file in this page, but while keeping accessible the result of the GET request to use it inside?
That may not be clear, and that's maybe a reason why my title is not really fitting ... But anyway if you have some ideas i'll take them !!
Thanks

HTML submit text used for Javascript query with API

For a project, I am trying to make a HTML form that when a movie is searched it can access the Rotten Tomatoes API and queries the user's submitted text and returns with the movie.
The javascript* code from Rotten Tomatoes was provided
<script>
var apikey = "[apikey]";
var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
// construct the uri with our apikey
var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;
var query = "Gone With The Wind";
$(document).ready(function() {
// send off the query
$.ajax({
url: moviesSearchUrl + '&q=' + encodeURI(query),
dataType: "jsonp",
success: searchCallback
});
});
// callback for when we get back the results
function searchCallback(data) {
$(document.body).append('Found ' + data.total + ' results for ' + query);
var movies = data.movies;
$.each(movies, function(index, movie) {
$(document.body).append('<h1>' + movie.title + '</h1>');
$(document.body).append('<img src="' + movie.posters.thumbnail + '" />');
});
}
</script>
I have an API key, my question is how would I be able to create a form that would change out the value for var query = "Gone With The Wind"; as the user submitted an input search with a HTML form such as this:
<input id="search">
<input type="submit" value="Submit">
Also would this be able to lead to another HTML page once searched?

complete rewrite ...
You should wrap the supplied (and modified) code in a function which you can then call through an event binding, like a submit event on your input form.
Below you will find a complete and working example of how you could do it. I replaced the given URL with a publicly available one from spotify. As a consequence I had to modify the callback function a little bit and also the dataType paramater in the $.ajax() argument object was changed to 'json' (instead of originally: 'jsonp').
At the end of the lookformovie() function you will find return false;. This prevents the submit event from actually happening, so the user stays on the same page.
function lookformovie(ev){ // ev is supplied by the triggered event
console.log('go, look!');
// the following WOULD be important, if this function was triggered
// by a click on a form element and you wanted to avoid the event to
// "bubble up" to higher element layers like the form itself.
// In this particular example it is superfluous
ev.stopPropagation();
var apikey = "[apikey]";
var baseUrl = "http://api.rottentomatoes.com/api/public/v1.0";
// construct the uri with our apikey
var moviesSearchUrl = baseUrl + '/movies.json?apikey=' + apikey;
// --- start of spotify-fix ---
moviesSearchUrl="https://api.spotify.com/v1/search?type=track";
// --- end of spotify-fix -----
// the following gets the contents of your changed input field:
var query=$('#search').val();
$.ajax({
url: moviesSearchUrl + '&q=' + encodeURI(query),
dataType: "json", // spotify-fix, was: "jsonp"
success: searchCallback
});
return false; // this prevents the submit event from leaving or reloading the page!
}
// modified callback (spotify-fix!!):
function searchCallback(data){
console.log('callback here');
$('#out').html(data.tracks.items.map(
function(t){ return t.name;}).join('<br>\n'));
}
// original movie callback for Rotten Tomatoes:
function searchCallback_inactive(data) {var str='';
str+='Found ' + data.total + ' results.';
var movies = data.movies;
$.each(movies, function(index, movie) {
str+='<h1>' + movie.title + '</h1>';
str+='<img src="' + movie.posters.thumbnail + '" />';
});
$('#out').html(str);
}
$(function(){
$('form').on('submit',lookformovie);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="text" id="search" value="james brown">
<input type="submit" value="get tracks">
</form>
<div id="out"></div>
You might have noticed that I placed several console.log() statements at various places into the code. This helped me during debugging to see which part of the functionality actually worked, and where something got stuck. To see the output you need to have your developer console opened of course.

You can construct form, with input element named "q", then handle form submit event.
<form action="http://api.rottentomatoes.com/api/public/v1.0/movies.json?apikey=API_KEY" method="get">
<input id="search" name="q">
<input type="submit" value="Submit">
</form>

JSON parse will not execute with JavaScript

This is my current code, any help would be greatly appreciated. I need to call my listApp.json file and parse it. I want to display my list which currently has one link. I'm new to this.
<script type = "text/javascript">
// If the .js files are linked correctly, we should see the following output inside the JavaScript Console
console.log("starting...");
// Gets the .json file and applies the function
var json;
// When the document is ready then run the function
$(document).ready(function(){
// Standard jQuery ajax technique to load a .json file
$.ajax({
type: "GET", // Requests data from a specified resource
url: "include/listApp.json", // Gets the file on which the url is directed to
dataType: "json", // Data Type needs to be json in this case. This can be xml
success: jsonParser // If successful then run the, 'jsonParser' function
});
});
// Actual parse function
function jsonParser(data) {
JSON = data;
$(JSON).find("games").each(function (){
games = $(this);
var name = $(games).find("name").text();
var url = $(games).find("url").text();
var id = $(ganes).find("id").text();
console.log(name);
// Appends list + link + name
$("#myList").append('<li>'+ ""+name+""+'</li>');
$('#myList').listview('refresh');
$("#pages").append('<div data-role="page" id = "'+ id +'"><img src = '+ url +'> test</div>');
});
}
</script>

Since data is an object, you can access the games array using data.listApp.games and iterate over it using $.each(), then inside the loop callback you will the game object as second param and you can access its properties using member operator
function jsonParser(data) {
$.each(data.listApp.games, function (i, game) {
var name = game.name;
var url = game.url;
var id = game.id;
console.log(name);
// Appends list + link + name
$("#myList").append('<li>' + "" + name + "" + '</li>');
$('#myList').listview('refresh');
$("#pages").append('<div data-role="page" id = "' + id + '"><img src = ' + url + '> test</div>');
});
}

Issue filling select box via ajax call in Django

I am running into an issue creating cascading select boxes (backend Django-though I think this portion is mostly worked out). I have the following javascript code adapted from this stackoverflow response.
$(document).ready(function(){
$('select[name=experiment]').change(function(){
experiment_id = $(this).val();
request_url = '/admin/get_measurements/' + experiment_id + '/';
$.ajax({
url: request_url,
success: function(data){
$.each(data, function(){
$('select[name=measurement_a]').append('<option value="' + this.key + '">' + this.value +'</option>');
// $('select[name=measurement_a]').append($("<option />").val(this.key).text(this.value))
});
},
return: false
})
})
});
In my project I select an experiment which triggers a call to "get_measurements" function and receive a list of "measurements" which should populate the measurement select box. Currently when I select the experiment I see the json response as expected:
{1: "MyFirstMeasurment", 2: "MySecondMeasurement"}
The measurement select box received 2 new selections however, both of them have the text "undefined" as opposed to "MyFirstMeasurement" and "MySecondMeasurement". I am guessing this is something simple in my code, Thank you for the help, let me know if you need more information.

It turns out I needed to do a couple of things to fix this, thanks for the help and hints. Here is the final code.
$(document).ready(function(){
$('select[name=experiment]').change(function(){
experiment_id = $(this).val();
request_url = '/admin/get_measurements/' + experiment_id + '/';
$.ajax({
url: request_url,
success: function(data){
$.each(data, function(key, value){
$('select[name=measurement_a]').append("<option value='" + value + "'>" + value +</option>");
});
},
return: false
})
})
});