JQuery - идентификатор доступа IMG, добавленный в таблицу для сценария php - PullRequest
Новая
       30

JQuery - идентификатор доступа IMG, добавленный в таблицу для сценария php

0 голосов
/ 02 декабря 2010

По сути, у меня есть таблица, отображающая несколько строк с кнопкой удаления рядом с ними.Когда кто-то нажимает на кнопку удаления, я беру идентификатор этой кнопки, передаю его в скрипт 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);
     });

ОК, следующий шаг.Также есть кнопка добавления, которая открывает диалог, который затем обрабатывает скрипт, возвращает некоторые данные и добавляет, добавляет еще одну строку для введенных данных.Этот скрипт также возвращает идентификатор для кнопки удаления, которая затем будет использоваться вышеуказанным кодом.Вот добавочный код: 

$("<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 и передать ее в мой php-скрипт.Я знаю, что это возможно, как я видел это раньше в других приложениях (например, в basecamp).Итак, кто-нибудь может подсказать, как мне это сделать?

К вашему сведению, я использую JQuerUI для создания диалогового окна и т. Д.

Большое спасибо за вашу помощь!

ДОПОЛНЕНИЕ К ОРИГИНАЛЬНОМУ СООБЩЕНИЮ

ОК, поэтому идентификатор действительно не показывался.У меня есть это, чтобы показать, и это работает, но у меня все еще есть проблема.Вот код для моего 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.Беда в том, что по какой-то причине кнопку добавления нужно нажать дважды.Если я удалю строку, в которой я присваиваю значение моему type_id varaible после функции ajax, то есть: 

type_id = types_id;

, я не могу получить идентификатор типа.Если линия остается там, дважды нажмите кнопку «Добавить».Я не уверен, почему это происходит.Я уверен, что это мой недостаток знаний JS, поэтому я ищу помощи, потому что я не вижу ничего плохого в объявлении переменной как таковой.

Еще раз спасибо!

1 Ответ

0 голосов
/ 02 декабря 2010

Этот вопрос в значительной степени связан с тем, что вы делаете: jquery Поиск идентификатора динамически генерируемого тега tr

Упомянутый код выглядит следующим образом, но я думаю, что вы можете переписать его под свои нужды: 

$("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 кнопки? Может быть, это даже не добавляется ...

Удачи!

Похоже, вы не ждете ответа на свой запрос, поэтому, вероятно, вам придется дважды нажать кнопку. Я взломал (надеюсь работающую) версию вашего скрипта, которая ожидает завершения запроса, прежде чем закрывать диалог и выполнять все остальные часы: 

$("#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");
    }
});

Может быть, это сработает?

...