1

行ごとに個別の送信ボタンを持つテーブルを作成する目的で、チュートリアルに従っています。疑わないでください、それが私がやりたいことです。

スクリプトが関数に値を返すようにしたいのですが、関数はユーザーにメッセージを表示します（ポップアップ、または<div id="messages">そのようなものに追加することもできます）。

すべてのボタンは、同じPHPスクリプトにデータを送信します。これは、要素のIDをスクリプトに送信するjeditableプラグインをモデルにしたものだと思いました。

しかし、私は自分のjqueryを作成したことがないので、問題が発生しています。私の最初のテスト

現在のテストスクリプト$（this）.idが機能していません：

$(document).ready(function(){
    $(".magic_button").click(function() {
        var data = $(this).id;
        alert (data); // test
        $("#messages")
                // trying to submit the data and retrieve response
            .load('/myscrpt.php','id=' + data); 
    });
});

テストhtml：

<div id="magic_button_form">
<form name="magic">
    <input type="button" class="magic_button" name="magic_button" id="magic_button_1" value="magic" />
    <input type="button" class="magic_button" name="magic_button" id="magic_button_2" value="magic" />
</form>
</div>
<div id="messages"></div>

したがって、基本的には、呼び出し元の要素からIDを取得し、ajaxで送信してから、返されたデータを処理する方法を理解する必要があります。まず第一に、呼び出しボタンのIDさえ取得できないため、機能していません。

編集：

マーティンの答えによる完全な作業スクリプト：

マーティンの解決策によると、これが私のテストで思いついたものであり、それは機能します。以下はhtml/jquery、次にphpスクリプトです。phpスクリプトは、「magic_button_1」を「Magic Button 1」に変更するだけで、単純なテキスト変換を実行します（クラス「button」の他のボタンについても同じです）。

基本的にはhtml/jqueryです。

<html>
<head>
<script>
$(document).ready(function(){ 
    });
    $(".magic_button").click(function() {
        var data = $(this).attr('id');
        //alert (data);
        $.ajax({
            type: "POST",
            url: "/controllers/clean/ajax/table.php",
            data: { 'id': data }
        }).done(function( msg ) {
            alert("Data Saved: " + msg);
        });
    });


});
</script>
</head>
<body>
<div id="magic_button_form">
<form name="magic">
   <!-- <label for="name" id="name_label">Name</label>  
    <input type="text" name="name" id="name" size="30" value="" class="text-input" />  
    <label class="error" for="name" id="name_error">This field is required.</label> -->
    <input type="button" class="magic_button" name="magic_button" id="magic_button_1" value="magic" />
    <input type="button" class="magic_button" name="magic_button" id="magic_button_2" value="magic" />
</form>
</div>
</body>
</html>

これがphpスクリプトです（/controllers/clean/ajax/table.php）

$id = $_POST['id'];

$id = ucwords(implode(' ',explode('_',$id)));

echo $id;
4

2 に答える 2

2

使用する必要があります：

$(this).attr('id')

HerejQuery ajax呼び出しのドキュメントです。例：

$.ajax({
   type: "POST",
   url: "some.php",
   data: { name: "John", location: "Boston" }
}).done(function( msg ) {
   alert( "Data Saved: " + msg );
});
于 2012-08-17T00:54:02.980 に答える
2

クリックハンドラー内thisにはDOM要素自体への参照があるため、次のコマンドでそのIDにアクセスできます。

this.id

または、jQueryを使用する場合は、jQueryメソッドを使用する必要があります。

$(this).attr("id")

また、アラートが参照していることに気付きましたdataStringが、おそらくそうなるはずdataです。

これらの問題が修正されると、Ajaxは機能する.load()はずです。

于 2012-08-17T00:55:58.183 に答える