Передача данных в диалоговое окно JQuery UI

Ответ 1

Вы можете сделать это следующим образом:

• отметьте <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...

Ответ 2

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

Привязать событие 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);
        }
    }
});

Ответ 3

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

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

Ответ 4

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

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

Se my "new" script ниже:

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

});

Любые подсказки?

oh и моя ссылка для Action теперь выглядит так:

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

Ответ 5

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

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

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

Ответ 6

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

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

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

Ответ 7

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

<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" в диалоговом окне оповещения 100

Ответ 8

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

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

Но для пост-версии мне все еще не повезло.

Ответ 9

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

Ответ 10

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

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

                }
            })
        }
    }
});

Ответ 11

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

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