htmlデータセットIDを使用した未定義の変数

Question

この質問は、私が先に質問したGiving an element multiple names/id's質問の続きです.2番目の回答は、要素に複数の属性を与えるより良い方法は何かを示しています。

しかし、私の仕事にこの方法を適用した後。私のjavascript変数は未定義です。

私のhtml：

<a data-toggle="modal" data-id="prodModal" data-presId="<?php echo $selectPresForJs->valueof('pres_id'); ?>" data-prodId="<?php echo $prod->prod_id; ?>" data-target="#prodModal" class="image_modal" > 
        <img class="image-modal" style="width: 192px; height:192px;" src="<?php echo $prod->prod_icon; ?>"> 
        <span ><h2 style='color:#2468A6'><b><?php echo $prod->prod_name ?></b></h2></span> 
       </a> 

$(document).ready(function(){ 



$('#prodModal').click(function() { 


     var ajaxprodId = $('#prodModal').data('prodId'); 
     var ajaxpresId = $('#prodModal').data('presId'); 
       /*Console Prints the variables as undefined*/ 
      console.log(ajaxprodId); 
      console.log(ajaxpresId); 

     $.ajax({ 

     url: "path/to/file/Presentation.php", 
     type: "POST", 
     data: {prodId : ajaxprodId,presId:ajaxpresId} 


     ,success: function(data){ 
     console.log("Success was achieved"); 
     document.getElementById("modal_content").innerHTML = "Works"; 
     }, 
     error: function(data){ 
      console.error("The action was unsuccessfull"); 
      alert(data); 

     } 


    }); 
}); 


}); 

1.がどのように修正したい友達のjavascript /変数ajaxprodIdとajaxpresIdが未定義されないように私のコードを変更しますか？モーダルは、開いて閉じてから再度開いた後、現在位置が唯一の作品として正しい場所は次のようになり

2.は、AjaxはinnerHTMLプロパティを置き換える必要があります。

Answer 1

セレクタ$('#prodModal')を使用する場合、idがprodModalに設定されたDOM要素を参照しています。そのidはあなたのdata-idと同じではありません。

あなたが$('#prodModal')を使用しているときに、あなたは何を取得そのid