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

Тема в разделе "Другие языки", создана пользователем kop, 29 июн 2010.

Статус темы:
Закрыта.
Модераторы: Цукер
  1. kop

    kop Постоялец

    Регистр.:
    8 янв 2008
    Сообщения:
    133
    Симпатии:
    27
    Гуру JQuery помогите, уже час сижу над простой проблемой и не могу понять, что не так.

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

    Функция deleteItem(:(
    PHP:
    function deleteItem(idtype)
    {
        $(
    "#sure").dialog({
            
    autoOpenfalse,
            
    bgiframetrue,
            
    resizabletrue,
            
    width600,
            
    modaltrue,
            
    overlay: {
                
    backgroundColor'#000',
                
    opacity0.5
            
    },
            
    buttons: {
                
    'Нет': function() {
                    $(
    this).dialog('close');
                },
                
    'Да': function() {
                    $(
    this).dialog('close');
                    
    deleteFunc(idtype);
                }
            }
        });
            
        $(
    '#sure').dialog('open');
    }
    Создаем экземпляр диалога -> Открываем диалог -> Если нажата кнопка "Да", вызываем функцию deleteFunc()

    Функция deleteFunc()
    PHP:
    function deleteFunc(idtype)
    {
        if (
    type == 'operator')
        {
            $.
    post(baseUrl+"/operators/remove",
            {
                
    idid,
            },function(
    data){}, "json");
                    
            $(
    'tr' '#' 'item' id).remove();
        };
    }
    Теперь о проблеме. Код работает, но только один раз. После загрузки страницы, я могу удалить только один элемент, а попытки удалить другой элемент результата не дают.

    С помощью точек остановки, выяснил - все беда в этом участке кода:
    PHP:
                'Да': function() {
                     $(
    this).dialog('close');
                     
    deleteFunc(idtype);
                 }
    Во время первого выполнения функции - все ок, но во время следующих, переменная ID волшебным образом принимает свое предыдущее значение. Например, предположим, что первый раз функция сработала с ID=4, а теперь выполняется с ID=36:
    PHP:
     function deleteItem(idtype// здесь ID=36, как и нужно
     
    {
         $(
    "#sure").dialog({
             
    autoOpenfalse,
             
    bgiframetrue,
             
    resizabletrue,
             
    width600,
             
    modaltrue,
             
    overlay: {
                 
    backgroundColor'#000',
                 
    opacity0.5
             
    },
             
    buttons: {
                 
    'Нет': function() {
                     $(
    this).dialog('close');
                 },
                 
    'Да': function() {
                     $(
    this).dialog('close');
                     
    deleteFunc(idtype); // здесь ID=4, старое значение
                 
    }
             }
         });
             
         $(
    '#sure').dialog('open');
     }
     
    Может кто знает в чем проблема?
     
  2. jo0o00nyy

    jo0o00nyy Постоялец

    Регистр.:
    12 май 2010
    Сообщения:
    65
    Симпатии:
    27
    Проблема примерно в следующем...
    ...$("#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 и просто инициализоровать его по загрузки страницы.

    Примерно так :)
     
    kop нравится это.
  3. polyetilen

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

    Регистр.:
    10 авг 2006
    Сообщения:
    814
    Симпатии:
    474
    вариант инициализации диалога без кнопок, а определение кнопок идёт при 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>
    
     
    kop нравится это.
Статус темы:
Закрыта.