Передача данных в диалог 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 диалоговому окну, чтобы, если пользователь нажмет "да", он отправит ссылку: /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 ответов
Вы можете сделать это так:
- пометить
<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...
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);
}
}
});
С точки зрения того, что вы делаете с jQuery, я понимаю, что вы можете связывать функции, как у вас, и внутренние имеют доступ к переменным из внешних. Так как ваша функция ShowDialog(x) содержит эти другие функции, вы можете повторно использовать переменную x внутри них, и она будет считаться ссылкой на параметр из внешней функции.
Я согласен с Mausch, вы должны посмотреть на использование POST для этих действий, что добавит <form> пометьте вокруг каждого элемента, но значительно уменьшите вероятность того, что автоматический скрипт или инструмент вызовет событие Cancel. Действие Изменить может остаться как есть, потому что оно (предположительно просто открывает форму редактирования).
Глядя на свой код, вам нужно добавить функциональность, чтобы закрыть окно и обновить страницу. В вашей функции "Да" вы должны написать:
buttons: {
"Ja": function() {
$.post(a.href);
$(a). // code to remove the table row
$("#dialog").dialog("close");
},
"Nej": function() { $(this).dialog("close"); }
},
Код для удаления строки таблицы писать не интересно, поэтому я позволю вам разобраться с мельчайшими подробностями, но в основном вам нужно указать диалоговому окну, что делать после публикации. Это может быть умный диалог, но ему нужно какое-то направление.
Теперь я попробовал ваши предложения и обнаружил, что это вроде работает,
- Диалоговое окно всегда написано в виде открытого текста.
- С версией $.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" })%>
Эта работа для меня:
<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
После НЕСКОЛЬКИХ ЧАСОВ 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>
Надеюсь, это поможет
$("#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>
Просто дать вам некоторое представление, которое может вам помочь, если вы хотите полностью контролировать диалог, вы можете попытаться избежать использования параметров кнопок по умолчанию и добавлять кнопки самостоятельно в ваш #dialog div. Вы также можете поместить данные в некоторый фиктивный атрибут ссылки, например, Click. вызовите attr("data"), когда вам это нужно.
Решение, вдохновленное Борисом Гери, которое я использовал, выглядит следующим образом: Ссылка:
<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){
}
})
}
}
});
Хорошо, первая проблема с тегом div была достаточно простой: я просто добавил style="display:none;" к нему, а затем, прежде чем показывать диалог, я добавил это в свой скрипт диалога:
$("#dialog").css("display", "inherit");
Но для почтовой версии мне все еще не повезло.