Нужна помощь с JQuery UI (Dialog)

kop · 29 Июн 2010

Гуру JQuery помогите, уже час сижу над простой проблемой и не могу понять, что не так.

Пишу скрипт для AJAX-удаления строк таблицы со страницы и в БД. В файле вида вызывается функция deleteItem(id, type) (id - идентификатор элемента, type - тип элемента, этот параметр нас не интересует).

Функция deleteItem(

PHP:

function deleteItem(id, type)
{
    $("#sure").dialog({
        autoOpen: false,
        bgiframe: true,
        resizable: true,
        width: 600,
        modal: true,
        overlay: {
            backgroundColor: '#000',
            opacity: 0.5
        },
        buttons: {
            'Нет': function() {
                $(this).dialog('close');
            },
            'Да': function() {
                $(this).dialog('close');
                deleteFunc(id, type);
            }
        }
    });
        
    $('#sure').dialog('open');
}

Создаем экземпляр диалога -> Открываем диалог -> Если нажата кнопка "Да", вызываем функцию deleteFunc()

Функция deleteFunc()

PHP:

function deleteFunc(id, type)
{
    if (type == 'operator')
    {
        $.post(baseUrl+"/operators/remove",
        {
            id: id,
        },function(data){}, "json");
                
        $('tr' + '#' + 'item' + id).remove();
    };
}

Теперь о проблеме. Код работает, но только один раз. После загрузки страницы, я могу удалить только один элемент, а попытки удалить другой элемент результата не дают.

С помощью точек остановки, выяснил - все беда в этом участке кода:

PHP:

            'Да': function() {
                 $(this).dialog('close');
                 deleteFunc(id, type);
             }

Во время первого выполнения функции - все ок, но во время следующих, переменная ID волшебным образом принимает свое предыдущее значение. Например, предположим, что первый раз функция сработала с ID=4, а теперь выполняется с ID=36:

PHP:

 function deleteItem(id, type) // здесь ID=36, как и нужно
 {
     $("#sure").dialog({
         autoOpen: false,
         bgiframe: true,
         resizable: true,
         width: 600,
         modal: true,
         overlay: {
             backgroundColor: '#000',
             opacity: 0.5
         },
         buttons: {
             'Нет': function() {
                 $(this).dialog('close');
             },
             'Да': function() {
                 $(this).dialog('close');
                 deleteFunc(id, type); // здесь ID=4, старое значение
             }
         }
     });
         
     $('#sure').dialog('open');
 }

Может кто знает в чем проблема?

jo0o00nyy · 30 Июн 2010

Проблема примерно в следующем...
...$("#sure").dialog({... инициализирует диалоговое окно к sure один раз и при следующем вызове этот шаг пропускается, соответственно deleteFunc(id, type); остается равным "4".
Как всегда есть несколько путей решения сего...
1. Заменить $(this).dialog('close'); на $(this).dialog('destroy'); - в таком варианте каждый раз будет пересобираться диалоговое окно.
2. Добавить глобальную переменную, например var _id_deteleItem = 0;, в ф-ции deleteItem добавить в начале

Код:

var _id_deteleItem = 0;
function deleteItem(id, type)
{
_id_deteleItem = id;
    $("#sure").dialog({
        autoOpen: false,
....
            'Да': function() {
                $(this).dialog('close');
                deleteFunc(_id_deteleItem, type);
            }
        }
    });
        
    $('#sure').dialog('open');
}

3. в sure добавить форму, в которой будет поле id и в deleteItem передаешь значение id, а перед вызовом deleteFunc берешь это значение.
так же в вариантах 2 и 3 инициализацию диалога лучше вынести из deleteItem и просто инициализоровать его по загрузки страницы.

Примерно так

polyetilen · 30 Июн 2010

вариант инициализации диалога без кнопок, а определение кнопок идёт при click()

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
            <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" />
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
            <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js" type="text/javascript"></script>
            
            
<script type="text/javascript">

var items = {"item1":{"id":"1", "info":"text"},"item2":{"id":"2"},"item3":{"id":"3"}};

$(document).ready(function(){
    $("#dialog").dialog({
        autoOpen: false,
        bgiframe: true,
        resizable: true,
        width: 600,
        modal: true,
        overlay: {
            backgroundColor: '#000',
            opacity: 0.5
        }
    });
    
    $("div.items div").click(function(){
        var item_id = $(this).attr("id");
        $("#dialog").dialog("option", "buttons", {
          "Нет": function() { $(this).dialog("close"); },
          "Да": function() { $(this).dialog("close"); deleteFunc(item_id); }
        });
        $('#dialog').dialog('open');
    });
    
    function deleteFunc(id){
        alert("item "+items[id].id+" delete");
    }
});
</script>


</head>

<body>
<div id="dialog"></div>

<div class="items">
    <div id="item1">1</div>
    <div id="item2">2</div>
    <div id="item3">3</div>
</div>
</body>
</html>

Нужна помощь с JQuery UI (Dialog)

kop

Постоялец

jo0o00nyy

Постоялец

polyetilen

Заблокирован