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