magritton
10/4/2015 - 2:41 PM

Quick little javascript based set of functions that allows the quick edit of a promoted list add the following divs to the html: <div id="

Quick little javascript based set of functions that allows the quick edit of a promoted list add the following divs to the html:

File 2 is with the URL options

File 3 is only the javascript. Add this to your content head and then add the html divs to the content.

JSPromotedLinksEdit3.js
content_copyfile_download
/*
	Quick little javascript based set of functions that allows the quick edit of a promoted list
	add the following divs to the html:
		<div id="TopPart"></div>
		<div id="fooBar"></div>
	
	*/
	function myPluginLoadEvent(func) {
	    // assign any pre-defined functions on 'window.onload' to a variable
	    var oldOnLoad = window.onload;
	    // if there is not any function hooked to it
	    if (typeof window.onload != 'function') {
	        // you can hook your function with it
	        window.onload = func
	    } else { // someone already hooked a function
	        window.onload = function () {
	            // call the function hooked already
	            oldOnLoad();
	            // call your awesome function
	            func();
	        }
	    }
	}
	
	// pass the function you want to call at 'window.onload', in the function defined above
	myPluginLoadEvent(function(){
    // your awesome code to run on window.onload
    //alert('here');
    	var topPart = document.getElementById("TopPart");
    	var lblHeadingUrl = document.createElement("Label");
        lblHeadingUrl.innerHTML = "Enter the Site URL or leave blank for current context:<br/>";
        topPart.appendChild(lblHeadingUrl);
        
        var listNameInUrl = document.createElement("input");
        listNameInUrl.setAttribute("type", "text");
		listNameInUrl.setAttribute("value", "");
		listNameInUrl.setAttribute("id", "listNameInUrl");
		listNameInUrl.setAttribute("style", "width:400px");
		topPart.appendChild(listNameInUrl);
        topPart.appendChild(document.createElement("br"));
        topPart.appendChild(document.createElement("br"));
        
    	var lblHeading = document.createElement("Label");
        lblHeading.innerHTML = "Enter the list name in the current context:<br/>";
        topPart.appendChild(lblHeading);
        
        var listNameIn = document.createElement("input");
        listNameIn.setAttribute("type", "text");
		listNameIn.setAttribute("value", "Linksb");
		listNameIn.setAttribute("id", "listNameIn");
		listNameIn.setAttribute("style", "width:200px");
		topPart.appendChild(listNameIn);
		
        topPart.appendChild(document.createElement("br"));
        topPart.appendChild(document.createElement("br"));
        var listNameInCmd = document.createElement("input");
        listNameInCmd.setAttribute("type", "button");
		listNameInCmd.setAttribute("value", "Load");
		listNameInCmd.setAttribute("id", "cmdLoad");
		listNameInCmd.setAttribute("onClick", "loadList();");
		topPart.appendChild(listNameInCmd);
		
		topPart.appendChild(document.createElement("br"));
		topPart.appendChild(document.createElement("br"));
		topPart.appendChild(document.createElement("hr"));
		topPart.appendChild(document.createElement("br"));
		topPart.appendChild(document.createElement("br"));
	});

	function loadList()
	{
		var doc = document.getElementById("listNameIn");
		retrieveListItems(doc.value);
		
	}

	function retrieveListItems(strListTitle) {
    document.getElementById("fooBar").innerHTML = "";
    
    var clientContext;
    var strUrlText = document.getElementById("listNameInUrl");
    var strUrl = strUrlText.value;
    if(strUrl == ""){
    	clientContext= new SP.ClientContext.get_current();
    }
    else{
    	clientContext= new SP.ClientContext(strUrl);
    }
    var oList = clientContext.get_web().get_lists().getByTitle(strListTitle);
        
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml(
        '<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + 
        '<Value Type=\'Number\'>1</Value></Geq></Where></Query>' + 
        '<RowLimit>10</RowLimit></View>'
    );
    this.collListItem = oList.getItems(camlQuery);
        
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded), 
        Function.createDelegate(this, this.onQueryFailed)
    ); 
}

function onQuerySucceeded(sender, args) {
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
        
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        var br = document.createElement("br");
        var hr = document.createElement("hr");
        
		var foo = document.getElementById("fooBar");
		var div = buildDiv(oListItem);
		
		//id
		div.appendChild(buildLabel('ID'));
		div.appendChild(document.createElement("br"));
		div.appendChild(buildTextBox(oListItem,'ID'));
		div.appendChild(document.createElement("br"));
		
		//Title
		div.appendChild(buildLabel('Title'));
		div.appendChild(document.createElement("br"));
		div.appendChild(buildTextBox(oListItem,'Title'));
		div.appendChild(document.createElement("br"));
		
		//link
		div.appendChild(buildLabel('Link Location'));
		div.appendChild(document.createElement("br"));
		div.appendChild(buildHyperlinkTextBox(oListItem,'LinkLocation'));
		
		div.appendChild(document.createElement("br"));
		div.appendChild(buildLabel('Link Description'));
		div.appendChild(document.createElement("br"));
		div.appendChild(buildHyperlinkDesTextBox(oListItem,'LinkLocation'));
		div.appendChild(document.createElement("br"));

		//image
		div.appendChild(buildLabel('Image Location'));
		div.appendChild(document.createElement("br"));
		div.appendChild(buildHyperlinkTextBox(oListItem,'BackgroundImageLocation'));
		
		div.appendChild(document.createElement("br"));
		div.appendChild(buildLabel('Image Description'));
		div.appendChild(document.createElement("br"));
		div.appendChild(buildHyperlinkDesTextBox(oListItem,'BackgroundImageLocation'));//BackgroundImageLocation
		div.appendChild(document.createElement("br"));
		div.appendChild(hr);
		div.appendChild(document.createElement("br"));
		
		foo.appendChild(div);
        //listItemInfo += '\nID: ' + oListItem.get_id() + 
          //  '\nTitle: ' + oListItem.get_item('Title') + 
          //  '\nBody: ';// + oListItem.get_item('Body');
    }
	var cmdUpdate = document.createElement("input");
	cmdUpdate.setAttribute("type", "button");
	cmdUpdate.setAttribute("value", "Update");
	cmdUpdate.setAttribute("onClick", "javascript:updateList();");
	foo.appendChild(cmdUpdate);
	
    //alert('Done');
}
//Update list items
function updateList(){
	var clientContext;
    var strUrlText = document.getElementById("listNameInUrl");
    var strUrl = strUrlText.value;
    if(strUrl == ""){
    	clientContext= new SP.ClientContext.get_current();
    }
    else{
    	clientContext= new SP.ClientContext(strUrl);
    }
	var listTitle = document.getElementById("listNameIn").value;
    var oList = clientContext.get_web().get_lists().getByTitle(listTitle);

	var doc = document.getElementById("fooBar");
	var dds = doc.getElementsByTagName("div");
	var ID, strTitle, strLinkLocationUrl, strLinkLocationDes,strBackgroundImageLocationURL,strBackgroundImageLocationDes;
	for(var x = 0;x<dds.length;x++)
	{
	//alert(dds[x].outerHTML);
		var ins = dds[x].getElementsByTagName("input");
		for(var i = 0;i<ins.length;i++){
			switch(ins[i].id){
				case "ID": 
					ID =ins[i].value
					break;
				case "Title":
					strTitle =ins[i].value
					break;
				case "LinkLocationURL":
					strLinkLocationUrl=ins[i].value
					break;
				case "LinkLocation":
					strLinkLocationDes=ins[i].value
					break;
				case "BackgroundImageLocationURL":
					strBackgroundImageLocationURL=ins[i].value
					break;
				case "BackgroundImageLocation":
					strBackgroundImageLocationDes=ins[i].value
					break;
			}//end switch
			
		}//end the for input
			/*console.log(ID);
			console.log(strTitle);
			console.log(strLinkLocationUrl);
			console.log(strLinkLocationDes);
			console.log(strBackgroundImageLocationURL);
			console.log(strBackgroundImageLocationDes);*/
			
			this.oListItem = oList.getItemById(ID);
    		oListItem.set_item("Title",strTitle);
    		var linkItem = new SP.FieldUrlValue();
    		linkItem.set_url(strLinkLocationUrl);
    		linkItem.set_description(strLinkLocationDes);
    		var linkBackground = new SP.FieldUrlValue();
    		linkBackground.set_url(strBackgroundImageLocationURL);
    		linkBackground.set_description(strBackgroundImageLocationDes);
    		oListItem.set_item("LinkLocation",linkItem);
    		oListItem.set_item("BackgroundImageLocation",linkBackground);
    		oListItem.update();
	}//end the for divs
	
	clientContext.executeQueryAsync(
        	Function.createDelegate(this, this.onUpdateQuerySucceeded), 
        	Function.createDelegate(this, this.onUpdateQueryFailed)
     );
	document.getElementById("fooBar").innerHTML = "";
	document.getElementById("fooBar").innerHTML = "Items updated!";
}

function onUpdateQuerySucceeded() {
    //alert('Item updated!');
}

function onUpdateQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

function buildTextBox(oListItem,strField){
		var element = document.createElement("input");
        element.setAttribute("type", "text");
		element.setAttribute("value", oListItem.get_item(strField));
		element.setAttribute("id", strField);
		element.setAttribute("style", "width:200px");
		return element;
}

function buildHyperlinkTextBox(oListItem,strField){
		var element = document.createElement("input");
        element.setAttribute("type", "text");
		element.setAttribute("value", oListItem.get_item(strField).get_url());
		element.setAttribute("id", strField + "URL");
		element.setAttribute("style", "width:800px");
		return element;
}

function buildHyperlinkDesTextBox(oListItem,strField){
		var element = document.createElement("input");
        element.setAttribute("type", "text");
		element.setAttribute("value", oListItem.get_item(strField).get_description());
		element.setAttribute("id", strField);
		element.setAttribute("style", "width:200px");
		return element;
}

function buildLabel(strText){
	var label = document.createElement('Label');
	label.innerHTML = strText + ": ";
	return label;
}

function buildDiv(oListItem){
	var element= document.createElement('Div');
	element.setAttribute("id", oListItem.get_id());
	return element;
}
JSPromotedLinksEdit2.js
content_copyfile_download
<script >
/*
	Quick little javascript based set of functions that allows the quick edit of a promoted list
	add the following divs to the html:
		<div id="TopPart"></div>
		<div id="fooBar"></div>
	
	*/
	function myPluginLoadEvent(func) {
	    // assign any pre-defined functions on 'window.onload' to a variable
	    var oldOnLoad = window.onload;
	    // if there is not any function hooked to it
	    if (typeof window.onload != 'function') {
	        // you can hook your function with it
	        window.onload = func
	    } else { // someone already hooked a function
	        window.onload = function () {
	            // call the function hooked already
	            oldOnLoad();
	            // call your awesome function
	            func();
	        }
	    }
	}
	
	// pass the function you want to call at 'window.onload', in the function defined above
	myPluginLoadEvent(function(){
    // your awesome code to run on window.onload
    //alert('here');
    	var topPart = document.getElementById("TopPart");
    	var lblHeadingUrl = document.createElement("Label");
        lblHeadingUrl.innerHTML = "Enter the Site URL or leave blank for current context:<br/>";
        topPart.appendChild(lblHeadingUrl);
        
        var listNameInUrl = document.createElement("input");
        listNameInUrl.setAttribute("type", "text");
		listNameInUrl.setAttribute("value", "");
		listNameInUrl.setAttribute("id", "listNameInUrl");
		listNameInUrl.setAttribute("style", "width:400px");
		topPart.appendChild(listNameInUrl);
        topPart.appendChild(document.createElement("br"));
        topPart.appendChild(document.createElement("br"));
        
    	var lblHeading = document.createElement("Label");
        lblHeading.innerHTML = "Enter the list name in the current context:<br/>";
        topPart.appendChild(lblHeading);
        
        var listNameIn = document.createElement("input");
        listNameIn.setAttribute("type", "text");
		listNameIn.setAttribute("value", "Linksb");
		listNameIn.setAttribute("id", "listNameIn");
		listNameIn.setAttribute("style", "width:200px");
		topPart.appendChild(listNameIn);
		
        topPart.appendChild(document.createElement("br"));
        topPart.appendChild(document.createElement("br"));
        var listNameInCmd = document.createElement("input");
        listNameInCmd.setAttribute("type", "button");
		listNameInCmd.setAttribute("value", "Load");
		listNameInCmd.setAttribute("id", "cmdLoad");
		listNameInCmd.setAttribute("onClick", "loadList();");
		topPart.appendChild(listNameInCmd);
		
		topPart.appendChild(document.createElement("br"));
		topPart.appendChild(document.createElement("br"));
		topPart.appendChild(document.createElement("hr"));
		topPart.appendChild(document.createElement("br"));
		topPart.appendChild(document.createElement("br"));
	});

	function loadList()
	{
		var doc = document.getElementById("listNameIn");
		retrieveListItems(doc.value);
		
	}

	function retrieveListItems(strListTitle) {
    document.getElementById("fooBar").innerHTML = "";
    
    var clientContext;
    var strUrlText = document.getElementById("listNameInUrl");
    var strUrl = strUrlText.value;
    if(strUrl == ""){
    	clientContext= new SP.ClientContext.get_current();
    }
    else{
    	clientContext= new SP.ClientContext(strUrl);
    }
    var oList = clientContext.get_web().get_lists().getByTitle(strListTitle);
        
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml(
        '<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + 
        '<Value Type=\'Number\'>1</Value></Geq></Where></Query>' + 
        '<RowLimit>10</RowLimit></View>'
    );
    this.collListItem = oList.getItems(camlQuery);
        
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded), 
        Function.createDelegate(this, this.onQueryFailed)
    ); 
}

function onQuerySucceeded(sender, args) {
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
        
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        var br = document.createElement("br");
        var hr = document.createElement("hr");
        
		var foo = document.getElementById("fooBar");
		var div = buildDiv(oListItem);
		
		//id
		div.appendChild(buildLabel('ID'));
		div.appendChild(document.createElement("br"));
		div.appendChild(buildTextBox(oListItem,'ID'));
		div.appendChild(document.createElement("br"));
		
		//Title
		div.appendChild(buildLabel('Title'));
		div.appendChild(document.createElement("br"));
		div.appendChild(buildTextBox(oListItem,'Title'));
		div.appendChild(document.createElement("br"));
		
		//link
		div.appendChild(buildLabel('Link Location'));
		div.appendChild(document.createElement("br"));
		div.appendChild(buildHyperlinkTextBox(oListItem,'LinkLocation'));
		
		div.appendChild(document.createElement("br"));
		div.appendChild(buildLabel('Link Description'));
		div.appendChild(document.createElement("br"));
		div.appendChild(buildHyperlinkDesTextBox(oListItem,'LinkLocation'));
		div.appendChild(document.createElement("br"));

		//image
		div.appendChild(buildLabel('Image Location'));
		div.appendChild(document.createElement("br"));
		div.appendChild(buildHyperlinkTextBox(oListItem,'BackgroundImageLocation'));
		
		div.appendChild(document.createElement("br"));
		div.appendChild(buildLabel('Image Description'));
		div.appendChild(document.createElement("br"));
		div.appendChild(buildHyperlinkDesTextBox(oListItem,'BackgroundImageLocation'));//BackgroundImageLocation
		div.appendChild(document.createElement("br"));
		div.appendChild(hr);
		div.appendChild(document.createElement("br"));
		
		foo.appendChild(div);
        //listItemInfo += '\nID: ' + oListItem.get_id() + 
          //  '\nTitle: ' + oListItem.get_item('Title') + 
          //  '\nBody: ';// + oListItem.get_item('Body');
    }
	var cmdUpdate = document.createElement("input");
	cmdUpdate.setAttribute("type", "button");
	cmdUpdate.setAttribute("value", "Update");
	cmdUpdate.setAttribute("onClick", "javascript:updateList();");
	foo.appendChild(cmdUpdate);
	
    //alert('Done');
}
//Update list items
function updateList(){
	var clientContext;
    var strUrlText = document.getElementById("listNameInUrl");
    var strUrl = strUrlText.value;
    if(strUrl == ""){
    	clientContext= new SP.ClientContext.get_current();
    }
    else{
    	clientContext= new SP.ClientContext(strUrl);
    }
	var listTitle = document.getElementById("listNameIn").value;
    var oList = clientContext.get_web().get_lists().getByTitle(listTitle);

	var doc = document.getElementById("fooBar");
	var dds = doc.getElementsByTagName("div");
	var ID, strTitle, strLinkLocationUrl, strLinkLocationDes,strBackgroundImageLocationURL,strBackgroundImageLocationDes;
	for(var x = 0;x<dds.length;x++)
	{
	//alert(dds[x].outerHTML);
		var ins = dds[x].getElementsByTagName("input");
		for(var i = 0;i<ins.length;i++){
			switch(ins[i].id){
				case "ID": 
					ID =ins[i].value
					break;
				case "Title":
					strTitle =ins[i].value
					break;
				case "LinkLocationURL":
					strLinkLocationUrl=ins[i].value
					break;
				case "LinkLocation":
					strLinkLocationDes=ins[i].value
					break;
				case "BackgroundImageLocationURL":
					strBackgroundImageLocationURL=ins[i].value
					break;
				case "BackgroundImageLocation":
					strBackgroundImageLocationDes=ins[i].value
					break;
			}//end switch
			
		}//end the for input
			/*console.log(ID);
			console.log(strTitle);
			console.log(strLinkLocationUrl);
			console.log(strLinkLocationDes);
			console.log(strBackgroundImageLocationURL);
			console.log(strBackgroundImageLocationDes);*/
			
			this.oListItem = oList.getItemById(ID);
    		oListItem.set_item("Title",strTitle);
    		var linkItem = new SP.FieldUrlValue();
    		linkItem.set_url(strLinkLocationUrl);
    		linkItem.set_description(strLinkLocationDes);
    		var linkBackground = new SP.FieldUrlValue();
    		linkBackground.set_url(strBackgroundImageLocationURL);
    		linkBackground.set_description(strBackgroundImageLocationDes);
    		oListItem.set_item("LinkLocation",linkItem);
    		oListItem.set_item("BackgroundImageLocation",linkBackground);
    		oListItem.update();
	}//end the for divs
	
	clientContext.executeQueryAsync(
        	Function.createDelegate(this, this.onUpdateQuerySucceeded), 
        	Function.createDelegate(this, this.onUpdateQueryFailed)
     );
	document.getElementById("fooBar").innerHTML = "";
	document.getElementById("fooBar").innerHTML = "Items updated!";
}

function onUpdateQuerySucceeded() {
    //alert('Item updated!');
}

function onUpdateQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

function buildTextBox(oListItem,strField){
		var element = document.createElement("input");
        element.setAttribute("type", "text");
		element.setAttribute("value", oListItem.get_item(strField));
		element.setAttribute("id", strField);
		element.setAttribute("style", "width:200px");
		return element;
}

function buildHyperlinkTextBox(oListItem,strField){
		var element = document.createElement("input");
        element.setAttribute("type", "text");
		element.setAttribute("value", oListItem.get_item(strField).get_url());
		element.setAttribute("id", strField + "URL");
		element.setAttribute("style", "width:800px");
		return element;
}

function buildHyperlinkDesTextBox(oListItem,strField){
		var element = document.createElement("input");
        element.setAttribute("type", "text");
		element.setAttribute("value", oListItem.get_item(strField).get_description());
		element.setAttribute("id", strField);
		element.setAttribute("style", "width:200px");
		return element;
}

function buildLabel(strText){
	var label = document.createElement('Label');
	label.innerHTML = strText + ": ";
	return label;
}

function buildDiv(oListItem){
	var element= document.createElement('Div');
	element.setAttribute("id", oListItem.get_id());
	return element;
}
</script>
<div id="TopPart"></div>

<div id="fooBar"></div>
JSPromotedLinksEdit.js
content_copyfile_download
/*
	Quick little javascript based set of functions that allows the quick edit of a promoted list
	add the following divs to the html:
		<div id="TopPart"></div>
		<div id="fooBar"></div>
	
	*/
	function myPluginLoadEvent(func) {
	    // assign any pre-defined functions on 'window.onload' to a variable
	    var oldOnLoad = window.onload;
	    // if there is not any function hooked to it
	    if (typeof window.onload != 'function') {
	        // you can hook your function with it
	        window.onload = func
	    } else { // someone already hooked a function
	        window.onload = function () {
	            // call the function hooked already
	            oldOnLoad();
	            // call your awesome function
	            func();
	        }
	    }
	}
	
	// pass the function you want to call at 'window.onload', in the function defined above
	myPluginLoadEvent(function(){
    // your awesome code to run on window.onload
    //alert('here');
    	var topPart = document.getElementById("TopPart");
    	var lblHeading = document.createElement("Label");
        lblHeading.innerHTML = "Enter the list name inthe current context:<br/>";
        topPart.appendChild(lblHeading);
        
        var listNameIn = document.createElement("input");
        listNameIn.setAttribute("type", "text");
		listNameIn.setAttribute("value", "Linksb");
		listNameIn.setAttribute("id", "listNameIn");
		listNameIn.setAttribute("style", "width:200px");
		topPart.appendChild(listNameIn);
		
        topPart.appendChild(document.createElement("br"));
        topPart.appendChild(document.createElement("br"));
        var listNameInCmd = document.createElement("input");
        listNameInCmd.setAttribute("type", "button");
		listNameInCmd.setAttribute("value", "Load");
		listNameInCmd.setAttribute("id", "cmdLoad");
		listNameInCmd.setAttribute("onClick", "loadList();");
		topPart.appendChild(listNameInCmd);
		
		topPart.appendChild(document.createElement("br"));
		topPart.appendChild(document.createElement("br"));
		topPart.appendChild(document.createElement("hr"));
		topPart.appendChild(document.createElement("br"));
		topPart.appendChild(document.createElement("br"));
	});

	function loadList()
	{
		var doc = document.getElementById("listNameIn");
		retrieveListItems(doc.value);
		
	}

	function retrieveListItems(strListTitle) {
    document.getElementById("fooBar").innerHTML = "";
    var clientContext= new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle(strListTitle);
        
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml(
        '<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + 
        '<Value Type=\'Number\'>1</Value></Geq></Where></Query>' + 
        '<RowLimit>10</RowLimit></View>'
    );
    this.collListItem = oList.getItems(camlQuery);
        
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded), 
        Function.createDelegate(this, this.onQueryFailed)
    ); 
}

function onQuerySucceeded(sender, args) {
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
        
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        var br = document.createElement("br");
        var hr = document.createElement("hr");
        
		var foo = document.getElementById("fooBar");
		var div = buildDiv(oListItem);
		
		//id
		div.appendChild(buildLabel('ID'));
		div.appendChild(document.createElement("br"));
		div.appendChild(buildTextBox(oListItem,'ID'));
		div.appendChild(document.createElement("br"));
		
		//Title
		div.appendChild(buildLabel('Title'));
		div.appendChild(document.createElement("br"));
		div.appendChild(buildTextBox(oListItem,'Title'));
		div.appendChild(document.createElement("br"));
		
		//link
		div.appendChild(buildLabel('Link Location'));
		div.appendChild(document.createElement("br"));
		div.appendChild(buildHyperlinkTextBox(oListItem,'LinkLocation'));
		
		div.appendChild(document.createElement("br"));
		div.appendChild(buildLabel('Link Description'));
		div.appendChild(document.createElement("br"));
		div.appendChild(buildHyperlinkDesTextBox(oListItem,'LinkLocation'));
		div.appendChild(document.createElement("br"));

		//image
		div.appendChild(buildLabel('Image Location'));
		div.appendChild(document.createElement("br"));
		div.appendChild(buildHyperlinkTextBox(oListItem,'BackgroundImageLocation'));
		
		div.appendChild(document.createElement("br"));
		div.appendChild(buildLabel('Image Description'));
		div.appendChild(document.createElement("br"));
		div.appendChild(buildHyperlinkDesTextBox(oListItem,'BackgroundImageLocation'));//BackgroundImageLocation
		div.appendChild(document.createElement("br"));
		div.appendChild(hr);
		div.appendChild(document.createElement("br"));
		
		foo.appendChild(div);
        //listItemInfo += '\nID: ' + oListItem.get_id() + 
          //  '\nTitle: ' + oListItem.get_item('Title') + 
          //  '\nBody: ';// + oListItem.get_item('Body');
    }
	var cmdUpdate = document.createElement("input");
	cmdUpdate.setAttribute("type", "button");
	cmdUpdate.setAttribute("value", "Update");
	cmdUpdate.setAttribute("onClick", "javascript:updateList();");
	foo.appendChild(cmdUpdate);
	
    //alert('Done');
}
//Update list items
function updateList(){
	var clientContext= new SP.ClientContext.get_current();
	var listTitle = document.getElementById("listNameIn").value;
    var oList = clientContext.get_web().get_lists().getByTitle(listTitle);

	var doc = document.getElementById("fooBar");
	var dds = doc.getElementsByTagName("div");
	var ID, strTitle, strLinkLocationUrl, strLinkLocationDes,strBackgroundImageLocationURL,strBackgroundImageLocationDes;
	for(var x = 0;x<dds.length;x++)
	{
	//alert(dds[x].outerHTML);
		var ins = dds[x].getElementsByTagName("input");
		for(var i = 0;i<ins.length;i++){
			switch(ins[i].id){
				case "ID": 
					ID =ins[i].value
					break;
				case "Title":
					strTitle =ins[i].value
					break;
				case "LinkLocationURL":
					strLinkLocationUrl=ins[i].value
					break;
				case "LinkLocation":
					strLinkLocationDes=ins[i].value
					break;
				case "BackgroundImageLocationURL":
					strBackgroundImageLocationURL=ins[i].value
					break;
				case "BackgroundImageLocation":
					strBackgroundImageLocationDes=ins[i].value
					break;
			}//end switch
			
		}//end the for input
			/*console.log(ID);
			console.log(strTitle);
			console.log(strLinkLocationUrl);
			console.log(strLinkLocationDes);
			console.log(strBackgroundImageLocationURL);
			console.log(strBackgroundImageLocationDes);*/
			
			this.oListItem = oList.getItemById(ID);
    		oListItem.set_item("Title",strTitle);
    		var linkItem = new SP.FieldUrlValue();
    		linkItem.set_url(strLinkLocationUrl);
    		linkItem.set_description(strLinkLocationDes);
    		var linkBackground = new SP.FieldUrlValue();
    		linkBackground.set_url(strBackgroundImageLocationURL);
    		linkBackground.set_description(strBackgroundImageLocationDes);
    		oListItem.set_item("LinkLocation",linkItem);
    		oListItem.set_item("BackgroundImageLocation",linkBackground);
    		oListItem.update();
	}//end the for divs
	
	clientContext.executeQueryAsync(
        	Function.createDelegate(this, this.onUpdateQuerySucceeded), 
        	Function.createDelegate(this, this.onUpdateQueryFailed)
     );
	document.getElementById("fooBar").innerHTML = "";
	document.getElementById("fooBar").innerHTML = "Items updated!";
}

function onUpdateQuerySucceeded() {
    //alert('Item updated!');
}

function onUpdateQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

function buildTextBox(oListItem,strField){
		var element = document.createElement("input");
        element.setAttribute("type", "text");
		element.setAttribute("value", oListItem.get_item(strField));
		element.setAttribute("id", strField);
		element.setAttribute("style", "width:200px");
		return element;
}

function buildHyperlinkTextBox(oListItem,strField){
		var element = document.createElement("input");
        element.setAttribute("type", "text");
		element.setAttribute("value", oListItem.get_item(strField).get_url());
		element.setAttribute("id", strField + "URL");
		element.setAttribute("style", "width:800px");
		return element;
}

function buildHyperlinkDesTextBox(oListItem,strField){
		var element = document.createElement("input");
        element.setAttribute("type", "text");
		element.setAttribute("value", oListItem.get_item(strField).get_description());
		element.setAttribute("id", strField);
		element.setAttribute("style", "width:200px");
		return element;
}

function buildLabel(strText){
	var label = document.createElement('Label');
	label.innerHTML = strText + ": ";
	return label;
}

function buildDiv(oListItem){
	var element= document.createElement('Div');
	element.setAttribute("id", oListItem.get_id());
	return element;
}