Передача данных в диалог пользовательского интерфейса jQuery

Сделать это можно так:

• отметьте <a> классом, скажите "отменить"

• настройте диалог, воздействуя на все элементы с помощью class = "cancel":

  $('a.cancel').click(function() { 
    var a = this; 
    $('#myDialog').dialog({
      buttons: {
        "Yes": function() {
           window.location = a.href; 
        }
      }
    }); 
    return false;
  });
  

(плюс другие варианты)

Ключевые моменты здесь:

• сделайте это как можно ненавязчивее
• Если вам нужен только URL-адрес, он у вас уже есть в href.

Однако я рекомендую вам сделать это POST вместо GET, поскольку действие отмены имеет побочные эффекты и, следовательно, не соответствует семантике GET ...

Что касается того, что вы делаете с jQuery, я понимаю, что вы можете связывать функции, как у вас, и внутренние имеют доступ к переменным из внешних. Итак, если ваша функция ShowDialog (x) содержит эти другие функции, вы можете повторно использовать в них переменную x, и она будет принята как ссылка на параметр из внешней функции.

Я согласен с mausch, вам действительно стоит подумать об использовании POST для этих действий, который добавит тег <form> вокруг каждого элемента, но значительно снизит вероятность того, что автоматический скрипт или инструмент запустит событие Cancel. Действие «Изменить» можно оставить как есть, потому что оно (предположительно, просто открывает форму редактирования).

Я попробовал ваши предложения и обнаружил, что это вроде работает,

1. Диалог div всегда записывается в виде открытого текста.
2. В версии $ .post он фактически работает в том смысле, что контроллер вызывается и фактически отменяет бронирование, но диалоговое окно остается открытым, а страница не обновляется. С версией get window.location = h.ref отлично работает.

Смотрите мой «новый» сценарий ниже:

$('a.cancel').click(function() {
        var a = this;               
        $("#dialog").dialog({
            autoOpen: false,
            buttons: {
                "Ja": function() {
                    $.post(a.href);                     
                },
                "Nej": function() { $(this).dialog("close"); }
            },
            modal: true,
            overlay: {
                opacity: 0.5,

            background: "black"
        }
    });
    $("#dialog").dialog('open');
    return false;
});

});

Какие-нибудь подсказки?

о, и моя ссылка на действие теперь выглядит так:

<%= Html.ActionLink("Cancel", "Cancel", new { id = v.BookingId }, new  { @class = "cancel" })%>

Хорошо, первая проблема с тегом div была достаточно простой: Я просто добавил к нему style = "display:none;", а затем, прежде чем показывать диалог, я добавил это в свой скрипт диалога:

$("#dialog").css("display", "inherit");

Но с пост-версией мне все равно не повезло.

Глядя на свой код, вам нужно добавить функцию закрытия окна и обновления страницы. В вашей функции «Да» вы должны написать:

        buttons: {
            "Ja": function() {
                $.post(a.href);
                $(a). // code to remove the table row
                $("#dialog").dialog("close");
            },
            "Nej": function() { $(this).dialog("close"); }
        },

Код для удаления строки таблицы писать неинтересно, поэтому я позволю вам разобраться с мельчайшими подробностями, но в основном вам нужно указать диалоговому окну, что делать после его публикации. Это может быть умный диалог, но он требует определенного направления.

Просто дайте вам некоторую идею, это может помочь вам, если вы хотите полностью контролировать диалог, вы можете попытаться избежать использования параметров кнопок по умолчанию и добавить кнопки самостоятельно в свой #dialog div. Вы также можете поместить данные в какой-нибудь фиктивный атрибут ссылки, например Click. вызовите attr ("данные"), когда вам это нужно.

После НЕСКОЛЬКИХ ЧАСОВ try / catch я наконец пришел с этим рабочим примером, его работа с AJAX POST с новыми строками добавляется в ТАБЛИЦУ на лету (это была моя настоящая проблема):

Магия пришла со ссылкой на это:

<a href = "#" onclick = "removecompany(this);return false;" id = "remove_13">remove</a>
<a href = "#" onclick = "removecompany(this);return false;" id = "remove_14">remove</a>
<a href = "#" onclick = "removecompany(this);return false;" id = "remove_15">remove</a>

Это последняя работа с AJAX POST и JQuery Dialog:

  <script type= "text/javascript">/*<![CDATA[*/
    var $k = jQuery.noConflict();  //this is for NO-CONFLICT with scriptaculous
     function removecompany(link){
        companyid = link.id.replace('remove_', '');
    $k("#removedialog").dialog({
                bgiframe: true,
                resizable: false,
                height:140,
                autoOpen:false,
                modal: true,
                overlay: {
                    backgroundColor: '#000',
                    opacity: 0.5
                },
                buttons: {
                    'Are you sure ?': function() {
                        $k(this).dialog('close');
                        alert(companyid);
                        $k.ajax({
                              type: "post",
                              url: "../ra/removecompany.php",
                              dataType: "json",
                              data: {
                                    'companyid' : companyid
                                    },
                              success: function(data) {
                                    //alert(data);
                                    if (data.success)
                                    {
                                        //alert('success'); 
                                        $k('#companynew'+companyid).remove();
                                    }
                          }
                        }); // End ajax method
                    },
                    Cancel: function() {
                        $k(this).dialog('close');
                    }
                }
            });
            $k("#removedialog").dialog('open'); 
            //return false;
     }
    /*]]>*/</script>
    <div id = "removedialog" title = "Remove a Company?">
        <p><span class = "ui-icon ui-icon-alert" style = "float:left; margin:0 7px 20px 0;"></span>
        This company will be permanently deleted and cannot be recovered. Are you sure?</p>
    </div>

jQuery предоставляет метод, который хранит данные для вас, без необходимости использовать фиктивный атрибут или искать обходной путь для вашей проблемы.

Привяжите событие клика:

$('a[href*=/Booking.aspx/Change]').bind('click', function(e) {
    e.preventDefault();
    $("#dialog-confirm")
        .data('link', this)  // The important part .data() method
        .dialog('open');
});

И ваш диалог:

$("#dialog-confirm").dialog({
    autoOpen: false,
    resizable: false,
    height:200,
    modal: true,
    buttons: {
        Cancel: function() {
            $(this).dialog('close');
        },
        'Delete': function() {
            $(this).dialog('close');
            var path = $(this).data('link').href; // Get the stored result
            $(location).attr('href', path);
        }
    }
});

Решение, вдохновленное Борисом Гери, которое я использовал, выглядит так: Связь:

<a href = "#" class = "remove {id:15} " id = "mylink1" >This is my clickable link</a>

привязать к нему действие:

$('.remove').live({
        click:function(){
            var data = $('#'+this.id).metadata();
            var id = data.id;
            var name = data.name;
            $('#dialog-delete')
                .data('id', id)
                .dialog('open');    
            return false;
        }
    });

А затем для доступа к полю id (в данном случае со значением 15:

$('#dialog-delete').dialog({
    autoOpen: false,
    position:'top',
    width: 345,
    resizable: false,
    draggable: false,
    modal: true,
    buttons: {            
        Cancel: function() {

            $(this).dialog('close');
        },
        'Confirm delete': function() {
            var id = $(this).data('id');
            $.ajax({
                url:"http://example.com/system_admin/admin/delete/"+id,
                type:'POST',
                dataType: "json",
                data:{is_ajax:1},
                success:function(msg){

                }
            })
        }
    }
});

Эта работа для меня:

<a href = "#" onclick = "sposta(100)">SPOSTA</a>

function sposta(id) {
        $("#sposta").data("id",id).dialog({
            autoOpen: true,
            modal: true,
            buttons: { "Sposta": function () { alert($(this).data('id')); } }
        });
    }

При нажатии на «Споста» в диалоговом окне отображается предупреждение 100

надеюсь, это поможет

$("#dialog-yesno").dialog({
    autoOpen: false,
    resizable: false,
    closeOnEscape: false,
    height:180,
    width:350,
    modal: true,
    show: "blind",
    open: function() {
        $(document).unbind('keydown.dialog-overlay');
        },
    buttons: {
        "Delete": function() {
            $(this).dialog("close");
            var dir = $(this).data('link').href;
            var arr=dir.split("-");
            delete(arr[1]);
        },
    "Cancel": function() {
        $(this).dialog("close");
        }
    }
});



<a href = "product-002371" onclick = "$( '#dialog-yesno' ).data('link', this).dialog( 'open' ); return false;">Delete</a>