1

ご覧いただきありがとうございます。

データベースからレコードを削除しています。ユーザーは、JQ UI.Dialog で Ajax フォームを送信して削除を確認し、基本的に同じページにリダイレクトされて、更新されたデータをリロードします。

これはすべてうまく機能します。

<script type="text/javascript">
$(function() {


    $( "#delete-invoice" ).click(function(event){
            event.preventDefault()
            $( "#confirmDelModal" ).dialog( "open" );
     });



    $( "#confirmDelModal" ).dialog({
        autoOpen: false,
        height: 220,
        width: 680,
        modal: true,
        buttons: {
            "Delete Invoice": function() {
              var options = {   
                    success: function(){
                        $("#confirmDelModal").dialog("close");
                        window.location.href="same-page.cfm";

                    }
                }; 
                $('#confirmDelete').ajaxSubmit(options);

                return false; 
            },
            Cancel: function() {
                $( this ).dialog( "close" );
            }
        },
        close: function() {
            $( this ).dialog( "close" );
        }
    });





});

フォームが送信された後、ページの上部に「削除成功」メッセージを表示したいと考えています。 このテーマ ローラー ページのハイライト/エラー ボックスは、右側の半分下にあります

基本的に、リダイレクト/ページのリロード後に非表示の Success DIV を表示したいと考えています。

私は過去数週間にわたって Ajax を学んでおり、順調な進歩を遂げていますが、まだより大きな概念に頭を悩ませているので、これを行うためのより良い方法があると確信しています。聞いてください、覚えておいてください、デザイナーはその特定のスタイルのメッセージが成功したときに出てくることを望んでいます.

<div class="ui-widget">
<div class="ui-state-highlight ui-corner-all" style="margin-top: 20px; padding: 0 .7em;">
    <p><span class="ui-icon ui-icon-info" style="float: left; margin-right: .3em;"></span>
    <strong>Hey!</strong> Deletion Successful</p>
</div>

事前にどうもありがとうございました

PS。コールドフュージョンでの作業

4

3 に答える 3

1

ある時点で、モーダルダイアログから親ページに戻り値を送信する必要があります。これは私が数年前に書いた例です。これは、ajaxを使用せずに基本的なJavaScriptを使用していますが、一般的な考え方を示していることに注意してください。

これは親ページにあります：

<cfoutput>
<script language="JavaScript">
function ServiceOther() {
if (document.Serviceform.service_id.value == "OTHER" ) {

NewContact=window.showModalDialog("#K.QryHome#ComplexCare/Contacts/OutsideNewService.cfm?    callPage=Addf","NewService","Dialogwidth:600px; Dialogheight:420px; center:yes ");

if (NewContact == true) // return value from dialogue
window.location="#K.QryHome#ComplexCare/Contacts/OutsideServices.cfm?callPage=AddWithNew";

} // end if
}// end of function

</script>
</cfoutput>

あなたの場合、window.locationコマンドをメッセージを表示するものに置き換えたいと思います。

私の場合、モーダルダイアログページには次のようなフォームがありました。

<cfform name="SKNewContactform" Action="ProcessNewOutsideService.cfm" method="post" 
onsubmit="window.returnValue = true; window.close();">

ProcessNewOutsideService.cfmには次のものが含まれています。

<script language=javascript>
function CloseWindow() {
window.open('','_self','');
window.opener = top;
window.close();
}

次に、一連のColdFusionコード、そして最後に、

<body onload="window.returnValue = true;  CloseWindow();">

繰り返しになりますが、一般的な考え方は、モーダルダイアログウィンドウが閉じたときに親ウィンドウに値を送信することです。親ウィンドウは、その値を使用して何かを実行できます。;

于 2012-12-28T19:15:17.563 に答える
1

解決

質問に答えるには、ページをリロードしたときに成功メッセージを表示することをサーバーに示す必要があります。これは、クエリ文字列などを使用して URL から実行できます。

ただし、必要以上の作業を行うことになり、メッセージを表示したいだけなので、これはお勧めしません。すでに AJAX を介してレコードを削除しているため、ページ全体を再度要求することなく、クライアント側からこれを行うことができます。

(より良い) 解決策

最初のダイアログを開いて詳細を表示するときは、DOM 内のレコード (データベース レコードではなく、ページのレコード) を追跡します。これを行う簡単な方法は、アイコンのクリック イベントで変数に格納することです。

$deleteTarget;
$('.delete_icon').click(function() {
    $deleteTarget = $(this).closest('.myRowClass');
});

ユーザーが行を削除し、サーバーで非同期に削除した場合、クライアント側でも同じことができます。

$deleteTarget.remove();

...そして、成功メッセージを表示します:

$('#successMessage').show();

これで、ページをリロードする行を削除して、ダイアログを閉じることができます (上記を実行した後)。

これは、ページをリロードするよりも優れた/高速な代替手段であると言えます。クライアント マシンは、サーバーに対して別の完全な要求を行う必要がなく (サーバーの作業が少なくて済みます)、ページをリロードする必要もないためです (作業が少なくて済みます)。クライアントのために）。

後期編集:クライアント側でレコードを削除する前にそれを追加したいだけで、サーバーで実際に削除されていることを確認する必要があります。レコードを削除するリクエストを行うときは、サーバーからの応答を待つ必要があります。サーバー上でレコードが正常に削除されると、クライアントに応答が返されます。削除が成功したことを示す応答を受け取ったら、クライアントでレコードを削除できます。

于 2012-12-28T19:20:52.937 に答える
0

変化する

window.location.href="same-page.cfm";

に：

window.location.href="same-page.cfm?deleted=1";

そしてCFには次のものがあります：

<cfif structKeyExists(url,"deleted")>.. {Div here}..</cfif>

そして、ちょっとした才能を追加するには：

$(document).ready(function(){
   setTimeout(function(){ $("div.mydiv").fadeOut("slow"); }, 2000);
 });
于 2013-01-02T04:03:17.840 に答える