web-dev-qa-db-ja.com

AJAXおよびjQueryを介してデータを含むdivをクリアしてリロードします

Coldfusion CFCメソッドからデータを要求し、データをdivに表示するajax呼び出しがあります。同じCFCを使用しているが、削除方法が異なるこのデータを削除するためのリンクもあります。どちらの方法も独立して問題なく機能します。私が理解できないように見えるのは、呼び出しを関数にカプセル化し、削除が成功したらdivを更新する方法です。コードは次のとおりです。

ajax呼び出し

    var caseid = <cfoutput>'#URL.ID#'</cfoutput>;
    var siteurl = <cfoutput>'#APPLICATION.url#'</cfoutput>;
    var html = "";

    function assetsPost() {
    $.ajax({
          cache: false,
          type:'GET',
          url:'cfc/cfc_Asset.cfc?method=qAsset&returnformat=json',
          dataType: "json",
          data: {
              assetgrp_id:  caseid,
            },
          success:function(data) {
            if(data) {   // DO SOMETHING 
            jQuery.each(data, function(i, val) {    
                 $('#picoutputannotation').html(data[i].annotation);
                 var asset_id   = data[i].value;
                 var img        = siteurl + 'assets/images/thumbs_check2/' + data[i].thumb;
                 var removeimg  = siteurl + 'assets/images/remove.png';
                 var annotation = data[i].annotation;
                     html += "<div class='block-pics'>";
                     html += "<img src='" + img + "'>";
                     html += "<div class='note'>";
                     html += annotation;
                     html += "</div>";
                     html += "<div class='block-pics-remove'>";
                     html += "<a class='delete-asset' id='" + asset_id + "'><img src='" + removeimg + "'></a>";
                     html += "</div>";
                     html += "<div class='bot'></div>";
                     html += "</div>";
            });
                 $('#picoutput').html( html );
            } else { // DO SOMETHING 
          }
        }
    });
}  
assetsPost();

これが削除スクリプトです：

   $(document).on("click", ".delete-asset", function() {
   var del_id = $(this).attr('id');
   $.ajax({
      type:'GET',
      url:'cfc/cfc_Asset.cfc?method=DeleteAsset&returnformat=json',
      dataType: "json",
      data: {
          delete_id:    del_id,
        },
      success:function(data) {
        if(data) {   // DO SOMETHING
            $('#picoutput').empty();
            {assetsPost()};
            $('#picoutput').fadeIn('fast');

        } else { // DO SOMETHING 
      }
    }
   });
 });

ここにhtmlがあります：

<div class="grid_6">
                <div id="picoutput"></div>
            </div>
    </div>
jqueryajaxcoldfusion
8
Chris Pilie

空の文字列を割り当てることにより、htmlを空に設定するだけです。

success:function(data) 
{
    $('#picoutput').html("");
}
3
Muhammad Raheel

これが私が取るトラブルシューティングのステップです：

  1. 削除セクションで、$('#picoutput').html("");を$('#picoutput').empty();に置き換えます
  2. 削除スクリプトで{//assetsPost()};をコメントアウトします。コンテンツが適切に削除されていることを確認します
  3. コメント化された行を復元します。ここにアラート（または可能であればブレークポイント）を配置します。
function assetsPost() {
    alert("Assets Post");
    $.ajax({
    });
}

この関数が1回だけ呼び出されていることを確認します。

  • ここで、htmlを追加する場所の下部にアラート（ブレークポイント）を配置します
alert(html)
$('#picoutput').html( html );

Cfc呼び出しから返されるhtmlに、考えている内容が含まれていることを確認します。

0
Mike C.