2013-09-30 3 views
0

내 작업은 handsontable에서 json 파일로 데이터를 저장하는 것입니다."Object가 getData 속성 또는 메서드를 지원하지 않습니다. "오류,"제출 "버튼을 클릭하십시오. 다음 코드를 살펴보고 알려주세요, 내가 잘못 갔다. 미리 감사드립니다. Handsontable의 getData()는 "Object가 속성 또는 메서드 'getData'를 지원하지 않습니다. 오류

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1./jquery.min.js" type="text/javascript"></script> 
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script> 
<script src="http:\\localhost\NetOptUI2\bin\jquery-handsontable-master\dist_wc\x-handsontable\jquery.handsontable.full.js"></script> 
<link rel="stylesheet" media="screen" href="http:\\localhost\NetOptUI2\bin\jquery-handsontable-master\dist_wc\x-handsontable\jquery.handsontable.full.css"> 
</head> 
<body> 

<h3 class="title">MHEX Time Sample</h3> 
<div id="handsontable"> 

<div id="divButtons"> 
<input type="Button" name="submit" value="submit" class="btnSubmit"/> 
</br> 
</br> 
Console: </br> 
<span id="exampleconsole"></span> 
</div> 
</div> 

<script> 
var $container = $("#handsontable"); 
var handsontable = $container.data('handsontable'); 
var data = [ 
var data = [ 
    ["", "Maserati", "Mazda", "Mercedes", "Mini", "Mitsubishi"], 
    ["2009", 0, 2941, 4303, 354, 5814], 
    ["2010", 5, 2905, 2867, 412, 5284], 
    ["2011", 4, 2517, 4822, 552, 6127], 
    ["2012", 2, 2422, 5399, 776, 4151] 
var config = { 
    data: data, 
    minRows: 15, 
    minCols: 6, 
    minSpareRows: 1, 
    autoWrapRow: true, 
    colHeaders: true, 
    currentRowClassName: 'currentRow', 
      currentColClassName: 'currentCol',    
      contextMenu: { items: { 
            "row_above": {}, 
            "row_below": {}, 
            "hsep1": "---------", 
            "col_left": {}, 
            "col_right": {}, 
            "hsep2": "---------", 
            "remove_row": {}, 
            "remove_col": {} 
            } 
         } 
         }; 

$("#divButtons").find(".btnSubmit").click(function() { 
$.ajax({ 
url: "json/save.json", 
data: {"data": handsontable.getData()}, //returns all cells' data 
dataType: 'json', 
type: 'POST', 
success: function (res) { 
    if (res.result === 'ok') { 
    console.text('Data saved'); 
    } 
    else { 
    console.text('Save error'); 
    } 
}, 
    error: function() { 
    console.text('Save error. POST method is not allowed on GitHub Pages. Run this example on your own server to see the success message.'); 
    } 
}); 
}); 

$("#handsontable").handsontable(config); 

var console = $("#divButtons").find("#exampleconsole"); 
console.text("Initialized...."); 
</script> 
</body> 
</html> 
+0

'HTTP : \\ localhost를 \'? 콘솔 오류를 확인하십시오 – karthikr

+0

위의 html을 IE, Chrome 등에서 열면 위의 오류가 브라우저의 콘솔에 나타납니다. wampserver.Thats 왜 http : // localhost /를 사용하고 있습니다. – user2791530

답변

2

문제가 너무 일찍 생성됩니다.

var $container = $("#handsontable"); 
var handsontable = $container.data('handsontable'); 

심지어 플러그인이 테이블로 변환되기도 전에.

$.ajax({ 
     url: "json/save.json", 
     data: { 
      "data": $container.data('handsontable').getData() //Now get it 
     }, //ret 
.... 

또는 데이터가 기록 된 바이올린 체크 콘솔에서 마지막

$("#handsontable").handsontable(config); //<-- here after creating the plugin 
var $container = $("#handsontable"); 
var handsontable = $container.data('handsontable'); 

로 이동합니다 :이 방법을 사용해보십시오.

Fiddle

+0

다음은 LOG :, Maserati, Mazda, Mercedes, Mini, Mitsubishi, 20090294143033545814201052905286741252842011,4,2517,4822의 콘솔 메시지입니다. , 552,6127,2012,2,2422,5399,776,4151 ,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,, LOG : 저장 오류. POST 메서드는 GitHub Pages에서 허용되지 않습니다. 이 예제를 자신의 서버에서 실행하여 성공 메시지를보십시오. – user2791530

+0

@ user2791530 데이터가 잘못되었으므로 방금 당신이 보여준 오류에 따라 그것을하는 방법을 보여 줬습니다. 나는 바이올린에서 당신의 URL을 뜨겁게 할 수 없다. 당신은 그것을 앞으로 가져 가야합니다. – PSL

+0

나는 당신이 제안한 변경 사항을 또한 "save.json"으로 변경했지만 "Save error.POST method ..."를 여전히 얻습니다. 나는 새로운 bie입니다. 같은 일로 당신을 괴롭히는 것에 대해 유감스럽게 생각합니다. 그러나, 나는 잘못되어가는 것을 얻을 수 없습니다. 도와주세요. – user2791530