Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

DataTables Form Input issue.

Posted on 2016-10-05
3
92 Views
Last Modified: 2016-10-05
Hi All,

I am trying to get my page to do what's on this site (click the submit form above the table).  As you will see, it alerts data from the table.

My alert does not do the same thing.  I think it's b/c how sloppy my code is which I'm trying to figure out how to fix but no success.  Any help would be appreciated.
Here's the site and code.

$(function() {
	retrieveListItems();
});


function retrieveListItems() {
	var clientContext = new SP.ClientContext();
	var oList = clientContext.get_web().get_lists().getByTitle('ParkFundingForm');
	
	var camlQuery = new SP.CamlQuery();
  
	this.collListItem = oList.getItems(camlQuery);
	
	clientContext.load(collListItem);
	
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded),
        Function.createDelegate(this, this.onQueryFailed)
        );
}

var htmlTbl = "<div><button type='Submit'>Submit Form</button></div><table id='prioritize' class='display' cellspacing='0' width='100%'>";
	htmlTbl += "<thead><th>Priority Number</th><th>Title</th><th>Project Name</th><th>Project Number</th></thead>";
	htmlTbl += "<tbody>";

//var items=[];

function onQuerySucceeded(sender, args) {
	var listItemInfo = '';
	var listItemEnumerator = collListItem.getEnumerator();
	
	while (listItemEnumerator.moveNext()) {
		var oListItem = listItemEnumerator.get_current();
		
		htmlTbl += "<tr><td><input type='text' id='rowID-"+oListItem.get_item('ProjectName')+"' value="+oListItem.get_item('PriorityNumber')+"></td><td>"+oListItem.get_item('Title')+"</td><td>"+oListItem.get_item('ProjectName')+"</td><td>"+oListItem.get_item('ProjectNumber')+"</td></tr>";
	}
	
	htmlTbl += "</tbody></table>";
	//alert(htmlTbl);
	
		$("#divListItems").html(htmlTbl);
		//$('#prioritize').DataTable();
		
		var table = $('#prioritize').DataTable();
		//alert(table);
 
    $('button').click( function() {
        var data = table.$('input').serialize();
        alert(
            "The following data would have been submitted to the server: \n\n"+
            data.substr( 1, 120 )+'nothing...'
        );
        return false;
    } );
		

}

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

/*$(document).ready(function() {
    $('#prioritize').DataTable();
});*/

Open in new window

0
Comment
Question by:Isaac
  • 2
3 Comments
 
LVL 9

Accepted Solution

by:
Karen earned 500 total points
ID: 41831099
The problem is the "serialize" method requires all input elements to have name values.
You need to change how you build your html:

      htmlTbl += "<tr><td><input type='text' id='rowID-"+oListItem.get_item('ProjectName')+"'  name='rowID-"+oListItem.get_item('ProjectName')+"' value="+oListItem.get_item('PriorityNumber')+"></td><td>"+oListItem.get_item('Title')+"</td><td>"+oListItem.get_item('ProjectName')+"</td><td>"+oListItem.get_item('ProjectNumber')+"</td></tr>";
0
 
LVL 5

Author Closing Comment

by:Isaac
ID: 41831111
Thanks!
0
 
LVL 9

Expert Comment

by:Karen
ID: 41831119
No worries :)
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

SharePoint Designer 2010 has tools and commands to do everything that can be done with web parts in the browser, and then some – except uploading a web part straight into a page that is edited in SPD. So, can it be done? Scenario For a recent pr…
I thought I'd write this up for anyone who has a request to create an anonymous whistle-blower-type submission form created using SharePoint 2010 (this would probably work the same for 2013). It's not 100% fool-proof but it's as close as you can get…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question