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

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

связать событие click:

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

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

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

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

1. диалог div alsways написан в виде открытого текста
2. С $.версия post на самом деле работает с точки зрения того, что контроллер вызывается и фактически отменяет бронирование, но диалоговое окно остается открытым, а страница не обновляется. С окном получить версию.местоположение = h.ref отлично работает.

Se мой" новый " скрипт ниже:

$('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" })%>

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

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

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

после нескольких часов try / catch я, наконец, пришел с этим рабочим примером, его работа над сообщением AJAX с новыми строками добавляется к таблице на лету (это была моя настоящая проблема):

Tha magic пришел со ссылкой на это:

<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:

  <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>

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

<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')); } }
        });
    }

при нажатии на кнопку "Sposta" в диалоговом окне alert display 100

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

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

но для версии post мне все еще не повезло.

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

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

<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){

                }
            })
        }
    }
});

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

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