テキストボックスからサーバーへのAjaxセーブ値

Question

ただAjaxが何であるかを知り、テキストボックスの値をとり、ボタンをクリックするだけでサーバーにポストするシンプルなAjax/Jquery関数を構築したいと考えています。ボタンは、キー押しに追加し、それに接続ホバーイベントを持つUIアイコンです..私はそれを一緒に入れて試してみたが、放火犯コンソールは構文エラー読み込む..

$(function() { 
     $('.solo1').after('<span class="ui-state-default ui-corner-all ui-icon-disk ui-icon saveButton" title="Save" style="float:left; height:20px;" onclick="function save (value)"></span><br />')// ui icon 
    .keypress(function() { 
     $(this).next('.saveButton').show();//appends ui icon 
    }); 
}); 


function save(value) { 
    $.ajax({ 
     url: "/*ServerURL*/", 
     type: "POST", 
     data: '{ $("#craven1") : "' + value + '" }', 
     data: "{ 'Id': " + $("#craven1").text() + ", 'content': " + $(".solo1").val() + "}", 
     dataType: "json", 
     contentType: "application/json; charset=utf-8", 
     success: function (data) { 
      console.log(data); 
     }, 
    }); 
} 
</script> 

<div id="featherbone"> 
<input class="solo1" id="craven1"/> 
<input class="solo1" id="craven2"/> 
<input class="solo1" id="craven3"/> 
<input class="solo1" id="craven4"/> 
<input class="solo1" id="craven5"/> 
</div> 

Answer 1

ドゥを助けてくださいUIボタンをクリックするとエラーメッセージが表示されますか？

でなければなりません

$('.solo1').after('<span ... onclick="function save (value)"</span><br/>') 

：

$('.solo1').after('<span ... onclick="save (value)"</span><br/>') 

あなたが機能をしたいので、その場合には、私は、構文の問題は、特にonclickの属性で、.solo1要素の後に追加されたHTMLであると思います保存する（定義されていないため、キーワードfunctionをonclick属性から削除する）。

あなたのコードを見て、あなたの説明を読んで、ボタンに隣接するinput要素の値を関数に渡したいと思いますか？

より良い解決策は、最初のUIボタンを作成し、各後でにクリックハンドラを追加することですその場合：

// Create button and then add it after each input 
var button = $('<span ... ></span><br/>'); 
$('.solo1').after(button); 

// Now that the buttons are created, find them and give each a click handler 
$('.saveButton').click(function() { 
    // Get value from the input element that this button was added after 
    var value = $(this).prev().val(); 

    // Now call the save method with the value 
    save(value); 
}); 

の作業例：ここでJSLintを実行http://jsfiddle.net/h78hw/

Answer 2

：http://jsfiddle.net/kp6hV/が明らかに：

ある

Error: 
Problem at line 14 character 92: Duplicate member 'data'. 
data: "{ 'Id': " + $("#craven1").text() + ", 'content': " + $(".solo1... 

Problem at line 19 character 10: Extra comma. 
}, 

Implied global: $ 1,2,4,10,14, console 18 

は、あなたの「成功」関数の後に余分なコンマがあり、私が共同てきたように、「データ」のメンバーを複製します上記の印をつけた。

編集：エラーフリー：

function save(value) { 
    $.ajax({ 
    url: "/*ServerURL*/", 
    type: "POST", 
    //data: '{ $("#craven1") : "' + value + '" }', // Not sure what's going on here 
    data: "{ 'Id': " + $("#craven1").text() + ", 'content': " + $(".solo1").val() + "}", 
    dataType: "json", 
    contentType: "application/json; charset=utf-8", 
    success: function (data) { 
     console.log(data); 
    } 
    }); 
}