it-swarm.com.ru

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

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

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

83
Frederik

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

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

45
Mauricio Scheffer

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);
        }
    }
});
270
Boris Guéry

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

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

2
Falkayn

После НЕСКОЛЬКИХ ЧАСОВ 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
Carlitux

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

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

});

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

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

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

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

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

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

1
thaBadDawg

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

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

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

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

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

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

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

0
Frederik

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

0
Yue

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

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