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


Я разрабатываю ASP.Net MVC сайт и на нем я перечисляю некоторые заказы из запроса базы данных в таблице с ActionLink отменить бронирование по определенной строке с определенным BookingId такой:

Мои заказы

<table cellspacing="3">
    <thead>
        <tr style="font-weight: bold;">
            <td>Date</td>
            <td>Time</td>
            <td>Seats</td>      
            <td></td>              
            <td></td>
        </tr>
    </thead>            
    <tr>
        <td style="width: 120px;">2008-12-27</td>
        <td style="width: 120px;">13:00 - 14:00</td>
        <td style="width: 100px;">2</td>
        <td style="width: 60px;"><a href="/Booking.aspx/Cancel/15">cancel</a></td>
        <td style="width: 80px;"><a href="/Booking.aspx/Change/15">change</a></td>
    </tr>            
    <tr>
        <td style="width: 120px;">2008-12-27</td>
        <td style="width: 120px;">15:00 - 16:00</td>
        <td style="width: 100px;">3</td>
        <td style="width: 60px;"><a href="/Booking.aspx/Cancel/10">cancel</a></td>
        <td style="width: 80px;"><a href="/Booking.aspx/Change/10">change</a></td>
    </tr>  
</table>

что было бы хорошо, если бы я мог использовать jQuery Dialog всплывающее сообщение с запросом, если пользователь уверен, что он хочет отменить бронирование. Я пытался заставить это работать, но я продолжаю застревать на том, как создать jQuery функция, которая принимает параметры, так что я могу заменить

<a href="/Booking.aspx/Cancel/10">cancel</a>

С

<a href="#" onclick="ShowDialog(10)">cancel</a>.

The ShowDialog функция затем откроет диалоговое окно, а также передаст параметр 10 в диалоговое окно, так что если пользователь нажмет да, то он опубликует href: /Booking.aspx/Change/10

Я создал Диалог jQuery в таком скрипте:

$(function() {
    $("#dialog").dialog({
        autoOpen: false,
        buttons: {
            "Yes": function() {
                alert("a Post to :/Booking.aspx/Cancel/10 would be so nice here instead of the alert");},
            "No": function() {$(this).dialog("close");}
        },
        modal: true,
        overlay: {
            opacity: 0.5,
            background: "black"
        }
    });
});   

и сам диалог:

   <div id="dialog" title="Cancel booking">Are you sure you want to cancel your booking?</div>

Итак, наконец, мой вопрос: Как я могу это сделать? или есть лучший способ сделать это?

11 83

11 ответов:

вы могли бы сделать это вот так:

  • Марк <a> С классом, скажем "отмена"
  • настройка диалогового окна, действуя на все элементы С class= "cancel":

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

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

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

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

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

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 для этих действий, которые добавят a <form> тег вокруг каждый элемент, но сделать шансы автоматического сценария или инструмента, запускающего событие отмены гораздо менее вероятно. Действие изменения может оставаться таким, как есть, потому что оно (предположительно, просто открывает форму редактирования).

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

    элемент div является alsways записывается в виде обычного текста
  1. С $.post version он фактически работает с точки зрения того, что контроллер вызывается и фактически отменяет бронирование, но диалоговое окно остается открытым, а страница не обновляется. С помощью окна получить версию.location = 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"); }
        },

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

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

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" в диалоговом окне отображения предупреждений 100

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

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

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

просто дать вам некоторое представление может помочь вам, если вы хотите полностью контролировать диалог, Вы можете попытаться избежать использования параметров кнопки по умолчанию, и добавить кнопки самостоятельно в вашем #dialog div. Вы также можете поместить данные в какой-то фиктивный атрибут ссылки, например 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>