Передача данных в диалоговое окно jQuery UI - PullRequest
Новая
       30

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

83 голосов
/ 27 декабря 2008

Я разрабатываю сайт 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>.

Функция 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 ]

270 голосов
/ 11 августа 2010

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);
        }
    }
});
45 голосов
/ 27 декабря 2008

Вы можете сделать это так:

  • отметьте <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 голосов
/ 27 декабря 2008

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

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

1 голос
/ 03 февраля 2012

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

<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

1 голос
/ 03 июля 2009

После НЕСКОЛЬКИХ ЧАСОВ 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>
1 голос
/ 28 декабря 2008

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

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

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

1 голос
/ 28 декабря 2008

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

  1. Диалоговое окно всегда пишется в виде текста
  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" })%>
0 голосов
/ 09 июня 2012

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

$("#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>
0 голосов
/ 22 февраля 2011

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

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

                }
            })
        }
    }
});
0 голосов
/ 17 февраля 2009

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

Страница:
...