jQuery вызвать один dialog с разными параметрами

Тема в разделе "JavaScript", создана пользователем p486, 1 дек 2013.

Модераторы: ZiX
  1. p486

    p486 Постоялец

    Регистр.:
    11 сен 2010
    Сообщения:
    94
    Симпатии:
    0
    доброго времени суток!
    пишу админку для работы с таблицей. при удалении записи должен выскакивать dialog jQuery с запросом. но такой диалог выскакивает только при нажатии на первую ссылку. как при нажатии на ссылку еще и передать id записи строки из БД? в php скрипте я могу выводить все id строк.
    в интернете внятного ответа не нашел :(
     
  2. Aserus

    Aserus Постоялец

    Регистр.:
    16 ноя 2013
    Сообщения:
    78
    Симпатии:
    4
  3. cooli0

    cooli0 Создатель

    Заблокирован
    Регистр.:
    27 янв 2014
    Сообщения:
    12
    Симпатии:
    2
    Вопрос не полный. Нет никаких примеров.
    Если вы передаете данные на сервер через аякс, то можно использовать поле data, в которое передавать id записи.

    Код:
    jQuery.ajax({
        url: '/some.url',
        data: { id: row_id }
    });
     
  4. p486

    p486 Постоялец

    Регистр.:
    11 сен 2010
    Сообщения:
    94
    Симпатии:
    0
    [​IMG]
    есть такая табличка при нажатии на кнопку "удалить" должен выскакивать диалог с кнопками да/нет. обработчик диалога должен быть один а кнопок которые его вызывают N-ное количество. тоесть кнопка должна передавать свой id в процедуру обработки диалога.

    код из примера jQuery
    HTML:
    <script>
        $(function() {  
            $( "#accordion" ).accordion();
          
            var availableTags = ["ActionScript","AppleScript","Asp","BASIC","C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran",
                "Groovy","Haskell",    "Java",    "JavaScript","Lisp","Perl",    "PHP","Python",    "Ruby",    "Scala","Scheme"];
            $( "#autocomplete" ).autocomplete({
                source: availableTags
            });
          
            $( "#dialog" ).dialog({
                modal: true,
                title: "fkjdkfdjsfk",
                caption: "Delete selected record(s)?",
                autoOpen: false,
                width: 400,
                buttons: [
                    {
                        text: "Ok",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    },
                    {
                        text: "Cancel",
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });
    
            // Link to open the dialog
            $( "#dialog-link" ).click(function( event ) {
                $( "#dialog" ).dialog( "open" );
                event.preventDefault();
            });
        });
        </script>
    HTML:
    <!-- Dialog NOTE: Dialog is not generated by UI in this demo so it can be visually styled in themeroller-->
    <div id="dialog-link" class="ui-state-default ui-corner-all">
    <a href="#?t1" class="ui-icon ui-icon-newwin">
    </a>
    </div>
    
    <div id="dialog-link" class="ui-state-default ui-corner-all">
    <a href="#?t2" class="ui-icon ui-icon-newwin">
    </a>
    </div>
       
    <!-- ui-dialog-->
    <div id="dialog" title="Dialog Title">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
     
  5. p486

    p486 Постоялец

    Регистр.:
    11 сен 2010
    Сообщения:
    94
    Симпатии:
    0
    в последнем куске кода описано две кнопки. при нажатии на первую окно выскакивает, при нажатии на вторую НЕТ
     
  6. Prostobv

    Prostobv Создатель

    Регистр.:
    4 дек 2013
    Сообщения:
    20
    Симпатии:
    8
    у вас у div'ов айдишники одинаковые из-за них конфликт скорее всего происходит..
     
  7. jDony

    jDony Создатель

    Регистр.:
    25 янв 2014
    Сообщения:
    41
    Симпатии:
    40
    1) ID параметры у тегов должны быть УНИКАЛЬНЫ на всей странице, у вас они дублируются.
    2) Для подтверждения какого-либо действия я обычно использую данный подход:
    Код:
    // Jquery function which listens for click events on elements which have a data-delete attribute
    $('[data-delete]').click(function(e){
        e.preventDefault();
        // If the user confirm the delete
        if (confirm('Do you really want to delete the element ?')) {
            // Get the route URL
            var url = $(this).prop('href');
            // Get the token
            var token = $(this).data('delete');
            // Create a form element
            var $form = $('<form/>', {action: url, method: 'post'});
            // Add the DELETE hidden input method
            var $inputMethod = $('<input/>', {type: 'hidden', name: '_method', value: 'delete'});
            // Add the token hidden input
            var $inputToken = $('<input/>', {type: 'hidden', name: '_token', value: token});
            // Append the inputs to the form, hide the form, append the form to the <body>, SUBMIT !
            $form.append($inputMethod, $inputToken).hide().appendTo('body').submit();
        }
    });
    В html создаете ссылку:
    Код:
    <a href="/script.php?act=delete&id=1" data-delete>Удалить</a>
    <a href="/script.php?act=delete&id=2" data-delete>Удалить</a>
    <a href="/script.php?act=delete&id=3" data-delete>Удалить</a>
    <a href="/script.php?act=delete&id=4" data-delete>Удалить</a>
    И теперь при нажатии на ссылку 'Удалить' у вас будет выскакивать подтверждение, и при ответе Yes, будет динамечески создаваться форма с методом POST и отправлять на сервер по адресу из href

    Причем не обязательно чтоб это был тег <a>, это может быть любой элемент с параметром data-delete.

    Если есть какие-либо вопросы, обращайся в ЛС, или пишу тут - помогу.
     
    p486 нравится это.
  8. p486

    p486 Постоялец

    Регистр.:
    11 сен 2010
    Сообщения:
    94
    Симпатии:
    0
    спасибо это то, что нужно. а как теперь оформить этот диалог темой из jQuery?
     
  9. jDony

    jDony Создатель

    Регистр.:
    25 янв 2014
    Сообщения:
    41
    Симпатии:
    40
    Заместо:
    Код:
    // Link to open the dialog
    $( "#dialog-link" ).click(function( event ) {
        $( "#dialog" ).dialog( "open" );
            event.preventDefault();
    });
    
    Пишете:
    Код:
    // Link to open the dialog
    $('[data-delete]').click(function(e){
        e.preventDefault();
            $( "#dialog" ).data('href', $(this).prop('href')).dialog( "open" );
    });
    
    И вместо:
    Код:
    text: "Ok",
    click: function() {
        $( this ).dialog( "close" );
    }
    
    Вставляем:
    Код:
    text: "Ok",
    click: function() {
        // Get the route URL
        var url = $("#dialog").data('href');
        // Create a form element
        var $form = $('<form/>', {action: url, method: 'post'});
        // Add the DELETE hidden input method
        var $inputMethod = $('<input/>', {type: 'hidden', name: '_method', value: 'delete'});
        // Add the token hidden input
        var $inputToken = $('<input/>', {type: 'hidden', name: '_token', value: token});
        // Append the inputs to the form, hide the form, append the form to the <body>, SUBMIT !
        $form.append($inputMethod, $inputToken).hide().appendTo('body').submit();
        $( this ).dialog( "close" );
    }
    
     
    Последнее редактирование: 4 фев 2014
  10. p486

    p486 Постоялец

    Регистр.:
    11 сен 2010
    Сообщения:
    94
    Симпатии:
    0
    спасибо все получилось. теперь у меня другая задача. нужно реализовать процедуру редактирования записи. диалог я уже сделал и выскакивает он по нажатию на любую ссылку. осталось только перед показом диалога заполнять его поля значениями из конкретных ячеек таблицы. на сколько я понял нужно вставить кусок кода в это место
    HTML:
            $('[data-edit]').click(
                function(e)
                {
                    e.preventDefault();
                    // место для кода
                    $( "#editDialog" ).data('href', $(this).prop('href')).dialog( "open" );
                }
            );
    только вот, что туда вставлять я не знаю. дайте хотябы направление
     
    Последнее редактирование: 10 фев 2014