Передача данных в диалоговое окно 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, чтобы вывести сообщение о том, что пользователь уверен, что он хочет отменить бронирование. Я пытался заставить это работать, но я все время зацикливаюсь на том, как создать функцию jQuery, которая принимает параметры, чтобы я мог заменить <a href="/Booking.aspx/Cancel/10">cancel</a>
на <a href="#" onclick="ShowDialog(10)">cancel</a>
. Затем функция ShowDialog откроет диалоговое окно и также передаст параметр 10 в диалог, чтобы, если пользователь нажимает "да", он отправит href:/Booking.aspx/Change/10
Я создал диалог jQuery в script следующим образом:
$(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>
Итак, наконец, на мой вопрос: как я могу это сделать? или есть лучший способ сделать это?
Ответы
Ответ 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>