jQuery UI 대화 상자에 데이터 전달
https://stackoverflow.com/questions/394491
-
23-08-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian문제
나는 개발 중입니다 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>
그래서 마지막으로 내 질문에 :이 작업을 어떻게 수행할 수 있나요?아니면 더 좋은 방법이 있나요?
해결책
다음과 같이 할 수 있습니다:
- 표시하다
<a>수업이 있으면 "취소"라고 말하세요 class="cancel"인 모든 요소에 대해 작업을 수행하여 대화 상자를 설정합니다.
$('a.cancel').click(function() { var a = this; $('#myDialog').dialog({ buttons: { "Yes": function() { window.location = a.href; } } }); return false; });
(다른 옵션도 포함)
여기서 핵심 사항은 다음과 같습니다.
- 최대한 눈에 띄지 않게 만들어라
- 필요한 것이 URL뿐이라면 이미 href에 URL이 있습니다.
그러나 취소 작업에는 부작용이 있으므로 GET 대신 POST로 만드는 것이 좋습니다. 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에 동의합니다. 당신은 실제로 이러한 조치에 게시물을 사용하는 것을 살펴 봐야합니다. <form> 각 요소 주위에 태그를 지정하지만 자동화 된 스크립트 또는 도구가 취소 이벤트를 트리거 할 가능성이 훨씬 적습니다. 변경 조치는 그대로 유지 될 수 있습니다 (아마도 편집 양식이 열릴 것입니다).
나는 이제 당신의 제안을 시도했고 그것이 일종의 작동한다는 것을 알았습니다.
- 대화 상자 div는 일반 텍스트로 작성된 alsway입니다
- $ .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" })%>
보고는 당신의 코드는 무엇이 당신이해야 할 추가 기능을 창을 닫고 업데이트 페이지입니다.에서"네"라는 함수를 작성해야 합:
buttons: {
"Ja": function() {
$.post(a.href);
$(a). // code to remove the table row
$("#dialog").dialog("close");
},
"Nej": function() { $(this).dialog("close"); }
},
코드 테이블을 제거하고 행하지 않는 재미를 쓰 그래서 나는 당신이 다루는 핵심 정보,그러나 기본적으로,당신은 당신을 말할 필요 대화 후에 무엇을 게시 할 수 있습니다.그것이 될 수 있는 스마트화 하지만 그것은 몇 가지 종류의 방향이다.
몇 시간의 시도/캐치 후 나는 마침내이 작업 예제를 가지고 왔습니다. Ajax 게시물에서 새로운 줄이 탁자에 추가로 테이블에 추가됩니다 (내 실제 문제).
Tha Magic은 링크와 함께 제공되었습니다.
<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 대화 상자와의 마지막 작업입니다.
<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>
이것은 나를위한 일 :
<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에서 "Sposta"를 클릭하면 100
OK DIV 태그의 첫 번째 문제는 충분히 쉬웠습니다. 방금 추가했습니다. style="display:none;" 그것과 대화 상자를 표시하기 전에 대화 상자 스크립트에 이것을 추가했습니다.
$("#dialog").css("display", "inherit");
그러나 포스트 버전의 경우 여전히 운이 좋지 않습니다.
완전히 제어 대화 상자를 원한다면 기본 버튼 옵션을 사용하지 않고 #Dialog Div에서 직접 버튼을 추가 할 수 있습니다. 클릭과 같은 링크의 더미 속성에 데이터를 넣을 수도 있습니다. 필요할 때 attr ( "data")을 호출하십시오.
내가 사용한 Boris Guery에서 영감을 얻은 솔루션은 다음과 같습니다. 링크 :
<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-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>
