Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations SkipVought on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Save table contents results in empty array

Status
Not open for further replies.
waubain

waubain

Technical User
Dec 13, 2011
200
0
0
US
I am new to javascript and trying to create a interface to manipulate arrays stored in text files stored on a server. I am using Tabulator 4.1 which is a javascript library (no jQuery) that display data.
Link

The table loads properly and I can edit the data, but when I click the save button my text file is overwritten with an empty string. Per the documentation on Tabulator
JavaScript: 
var tbldata = table.getdata
saves the entire table contents into a JSON encoded string.

I am guessing that I am not using var tbldata = table.getdata properly. I tried to stringify the variable, but that did not work. I know the button works if I set an array to a variable and save it.

Here is the entire script.

JavaScript: 
<body>
<div id="tblwrap">
<h2>Meeting Information Editor</h2>

    <div id="meetinfo-table"></div>
	<button class="button" id="save-data" >Save Data</button>
    <button class="button" id="download-json" >Download Data</button>
	
    <script>
        //create Tabulator on DOM element
        var table = new Tabulator("#meetinfo-table", {
     	height:200, // set height of table (in CSS or here)
        selectable:true, //make rows selectable        
     	layout:"fitDataFill",//fit columns to fit data and width of table (optional)
		//Sort data decending
		initialSort:[
			{column: "meetdate", dir:"desc"}],
		//Define Table Columns			
		columns:[ 
    	 	{title:"Meeting Date", field:"meetdate", width:150, editor:"input"},
    	 	{title:"Topic", field:"topic", align:"left", editor:"input"},
    	 	{title:"Speaker", field:"speaker", editor:"input"},
    	 	{title:"Room", field:"room", editor:"input"},
			{title:"CE", field:"ce", align:"left", editor:"input"},
    	 	{title:"RSVP Survey Code", field:"rsvpcode",editor: "input"},			
    	 	{title:"RSVP Due Date", field:"rsvpduedate", editor:"input"},
     	], 
        }); 
                         
        //Saves entire table to JSON encoded string
		var button = document.getElementById("save-data");
		button.addEventListener("click", function(){
	//********************************************************************************	  
		var tbldata = table.getdata;
       //********************************************************************************
		var request= new XMLHttpRequest();   // new HttpRequest instance 
		request.open("POST", "process.php");
		request.setRequestHeader("Content-type", "application/json");
                request.send(tbldata);
        });
            
 		//loads data into the table
		table.setData('meetinfo_array.txt');    
     </script> 
</div>
</body>

Thank you for any help.



 
Sort by date Sort by votes
Doesn't look like an issue with your Javascript.

To send data to a PHP process through ajax you need to specify a variable to attach the data to. Since you are not, my guess is your process.php PHP script is simply not receiving any data to save.

You would need to figure out what variable name process.php expects the table data to be in, and add it to the send function call.

Code: 
request.send([COLOR=#A40000]"variablename="[/color] + tbldata);



----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech
 
Upvote 0 Downvote
Phil,

Thanks for the response. I tried what you stated

Code: 
request.send("tbldata=" + tbldata);

Unfortunately that did not work. The text file is overwritten with "tbldata=undefined". Originally I tested the button function with the following script which worked with process.php:

JavaScript: 
<button class="button" id="save-data" >Save Data</button>

        <script>
		var button = document.getElementById("save-data");
		button.addEventListener("click", function(){
                var tbldata = JSON.stringify([{"id":1, "name":"Bob"}])
		var request= new XMLHttpRequest();   // new HttpRequest instance 
		request.open("POST", "receive.php");
		request.setRequestHeader("Content-type", "application/json");
		request.send(tbldata);
		});
        </script>

Here is process.php file since it is not looking for a specific variable name.

PHP: 
        $data = file_get_contents("php://input");
        
        if(strlen($data) > 0)
        {
        //Save the JSON string to a text file.
        file_put_contents("meetinfo_array.txt", $data); 
        }

Thank you.
 
Upvote 0 Downvote
I guess I should ask. Is there a way to save the table data directly to the text file through ajax? I am only using process.php because that was how it was done in an example I found.
Thank you.
 
Upvote 0 Downvote
looks like tbldata does not have a value, which is why nothing is getting saved. Have your tried stepping through the code in a Javascript debugger in the browser to see what is happening ?

Greg Griffiths
Livelink Certified Developer & ECM Global Star Champion 2005 & 2006
 
Upvote 0 Downvote
Greg,
I have come to that conclusion also. This morning I ran this code

JavaScript: 
    <button class="button" onclick="myFunction()">Try it</button>

    <script>
        //create Tabulator on DOM element
        var table = new Tabulator("#meetinfo-table", {
	// ... build table code
     	],
        }); 
        
        function myFunction() {
            var tbldata = [];
            var tmp = {};
            var tmp = table.getdata;
            tbldata.push(tmp);
            console.log(JSON.stringify(tbldata));
            console.log(tmp);
        }                          
     </script>

The console gave errors of [Null] and "undefined", which I concluded that the variable was empty.

I do not believe I am using the table.getdata correctly or in the correct position within the script. The documentation in Tabulator is unclear as only gives the line var data = table.getdata(). I will try to step through it in Firefox if that is possible.

Thanks.
 
Upvote 0 Downvote
The correct syntax is:

JavaScript: 
var tbldata = table.getData()

I learned that javascript is a case sensitive language.
 
Upvote 0 Downvote
getdata is a function not a variable according to the Tanbulator FAQ as such it should be called as getdata(); With parenthesis.

What happens if you do
Code: 
var tmp = table.getdata(); 
console.log(tmp);

----------------------------------
Phil AKA Vacunita
----------------------------------
OS-ception: Running Linux on a Virtual Machine in Windows which itself is running in a Virtual Machine on Mac OSx.

Web & Tech
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
119
coldbohemia
coldbohemia
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
134
lexer
lexer
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
138
malpa
malpa
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
167
xwb
xwb
bslintx2021
  • Locked
  • Question
How to convert delimited string to an array of array names 1
Replies
2
Views
68
bslintx2021
bslintx2021

Part and Inventory Search

Sponsor

Back
Top