0

基本的に、テーブルにはいくつかの行が表示され、その横に削除ボタンがあります。誰かが削除ボタンをクリックすると、そのボタンのIDを取得し、それをphpスクリプトに渡し、データベースからレコードを削除してから、ページから行をフェードアウトします。コードは次のとおりです。

$(".remove-button").live('click', function(){
     var remove_ptype = encodeURIComponent($(this).attr("id"));

     $.ajax({
      type: "POST",
      dataType : "html",
      url: "script.php",
      data: "id of remove button goes here",
      success: function(msg){
      //Do nothing
       }
      });
     $(this).parent().parent().fadeOut(500);
     });

OK、次のステップ。また、ダイアログを開く追加ボタンがあります。このボタンは、スクリプトを処理し、データを返し、入力されたデータの別の行を追加します。このスクリプトは、上記のコードで使用される削除ボタンのIDも返します。追加コードは次のとおりです。

$("<tr>" +
         "<td>" + unescape(name) + "</td>" + 
         "<td width=\"250\">" + "<img src=\"" + siteurl + "/images/x-button.png\" id=\"" + name_id + "\" class=\"remove-button\" width=\"20\">"+ "</td>" + 
        "</tr>").appendTo( "#ptypes tbody" );

したがって、これはこれまでのところ美しく機能します。ページを更新せずにこの新しく追加された行を削除しようとすると、画面から正常に削除されますが、この新しく追加された.remove-buttonのIDを取得して、phpスクリプトに渡すことができません。他のアプリケーション（basecampなど）で以前に見たように、それが可能であることはわかっています。それで、誰かが私がこれを達成する方法について私を案内してくれますか？

参考までに、JQuerUIを使用してダイアログボックスなどを作成しています。

どうもありがとうございました！

元のメッセージへの追加

OK、IDは実際には表示されませんでした。表示されて動作しますが、まだ問題があります。これが私のjQUERYのコードです：

$( "#add-type-form" ).dialog({
                            autoOpen: false,
                            height: 350,
                            width: 500,
                            modal: true,
                            buttons: {
                                "Add": function() {
                                    var type_name = encodeURIComponent($('#type_name').attr('value'));
                                    var type_id = '';
                                    if (type_name != "") {  
                                        //Submit form
                                        $.ajax({
                                        type: "POST",
                                        dataType : "html",
                                        url: "script.php",
                                        data: "f=1" + "& ff=2" + "MORE STUFF",
                                        success: function(msg){
                                        types_id = msg;
                                        }
                                        });
                                        type_id = types_id;
                                        //Append to display                                         
                                        $("<tr>" +
                                                "<td>" + unescape(type_name) + "</td>" + 
                                                "<td width=\"250\">" + "<img src=\"" + siteurl + "/images/x-button.png\" id=\"" + type_id + "\" class=\"remove-type-button\" width=\"20\">"+ "</td>" + 
                                            "</tr>").appendTo( "#ptypes tbody" );
                                        $( this ).dialog( "close" );
                                    }},
                                Cancel: function() {
                                    $( this ).dialog( "close" );
                                }
                            },
                            close: function() {
                                allFields.val( "" ).removeClass( "ui-state-error" );
                            }
                        });

つまり、これはJQUERYUI diagloueであり、基本的にスクリプトを処理し、imgタグに割り当てたいIDを返します。問題は、何らかの理由で追加ボタンを2回押す必要があることです。ajax関数の後にtype_id変数に値を割り当てる行を削除すると、次のようになります。

type_id = types_id;

タイプIDを取得できません。行がそこにとどまる場合は、追加ボタンを2回クリックする必要があります。なぜそうなっているのかわかりません。JSの知識が不足していると思いますので、変数宣言自体に問題はないと思いますので、助けを求めています。

再度、感謝します！

4

1 に答える 1

0

この質問は、あなたがしていることにかなり関連しているようです: jquery Find ID of dynamic generated tr tag

上記のコードは次のようになりますが、必要に応じて書き直すことができると思います。

$("a[href='delete.php']").click(function(e){
   var tr = $(this).closest('tr'),
       id = tr[0].id;

   // Put your AJAX call here
   $.post('/delete/' + id, function(){
       // Animate up, then remove
       tr.slideUp(500, function(){
          tr.remove();
       });
   });

});

Chrome または Firefox を実行している場合、idそもそもボタンの を確認できますか? 追加されていない可能性もあります...

幸運を！

クエリへの応答を待っていないようです。これが、おそらくボタンを 2 回クリックする必要がある理由です。ダイアログを閉じて他のすべての時計仕掛けを実行する前にクエリが完了するのを待つスクリプトの（うまくいけば動作する）バージョンをハックしました：

$("#add-type-form").dialog({
    autoOpen: false,
    height: 350,
    width: 500,
    modal: true,
    buttons: {
        "Add": function() {
            var type_name = encodeURIComponent($('#type_name').attr('value'));
            var type_id = '';
            var this_old = $(this); // Because $(this) won't really work inside of a anonymous function, you have to back up the original $(this) to another variable.

            if (type_name != "") {
                //Submit form
                $.ajax({
                    type: "POST",
                    dataType: "html",
                    url: "script.php",
                    data: "f=1" + "& ff=2" + "MORE STUFF",
                    success: function(msg) {
                        types_id = msg; // I'm not exactly sure if you need these two lines, but I'll keep them here anyways.
                        type_id = types_id;

                        //Append to display                                         
                        $("<tr>" + "<td>" + unescape(type_name) + "</td>" + "<td width=\"250\">" + "<img src=\"" + siteurl + "/images/x-button.png\" id=\"" + type_id + "\" class=\"remove-type-button\" width=\"20\">" + "</td>" + "</tr>").appendTo("#ptypes tbody");
                        this_old.dialog("close");
                    }
                });
            }
        },
        Cancel: function() {
            $(this).dialog("close");
        }
    },
    close: function() {
        allFields.val("").removeClass("ui-state-error");
    }
});

多分これはうまくいくでしょうか？

于 2010-12-02T17:35:35.070 に答える