Grailsでモーダルコンテンツを動的に変更

Question

1. 私はコンテンツモーダルのGSPページを持っています。
2. 私はモーダルdivを 別々のGSPレイアウトにしました。これは異なる値で動的になります。
3. 複数のdivのOnClickメソッドを指し、同じデータ・ターゲットが、 これらのdivがポイント

2. 今私の要件は、データ・ターゲットのdivを変更している（ポイントから動的な出力を得るために、異なるパラメータを持っています2）異なるdivがクリックされると動的に含まれます（ポイント3）。

同じデータを指している別のDIV：クリックごとにリフレッシュするための

<input type="text" hidden name="latitude" id="projectName1" value= ${property?.propertyAddress?.buildingName}> 
<input type="text" hidden name="longitude" id="property1" value= ${property?.id}> 
<input type="text" hidden name="latitude" id="projectName2" value= ${property2?.propertyAddress?.buildingName}> 
<input type="text" hidden name="longitude" id="property2" value= ${property2?.id}> 
<div class="system-link" id="project1" data-toggle="modal" data-target="#add-blog-post">View Project Information</div> 
<div class="system-link" id="project2" data-toggle="modal" data-target="#add-blog-post">View Project Information2</div> 

と動的なページにされた（ここでは二つの異なるdivのクリック時を超えている）：

<div id="add-blog-post" class="modal fade bs-example-modal-sm" role="dialog"> 
<div class="modal-dialog" style="width: 95%;"> 

    <!-- Modal content--> 
    <div class="modal-content" style="padding: 10px;"> 

     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
     </div> 

     <h3>Project Information</h3> 
     <input type="text" hidden name="latitude" id="latitude" value= ${property.propertyAddress.latitude}> 
     <input type="text" hidden name="longitude" id="longitude" value= ${property.propertyAddress.longitude}> 

     <table> 
      <tr> 
       <td>Property Type</td> 
       <td>${project?.propertyType}</td> 
      </tr> 
      <tr> 
       <td>District</td> 
       <td>District ${project?.district}</td> 
      </tr> 
     </table> 
    </div> 
</div> 
</div> 

Answer 1

多分ファーストデータトグルとデータターゲットは必要ないため、モーダルがいつ表示されるかを制御する必要があるため、データトグルとデータターゲットは失われます。

それからあなたの<div>内部<a>を置くか、代わりにあなたの<div>の<a>を作成するために、どちらかの方が簡単かもしれません。あなたの部門にデータ属性を追加する可能性もあります。私はリンクルートを取る。

...  
<a class="system-link" id="project1" 
     href="${createlink(controller: 'yourController', action: 'getData', id: project1ID)}"> 
    View Project Information 
</a> 
<a class="system-link" id="project2"   
     href="${createlink(controller: 'yourController', action: 'getData', id: project2ID)}"> 
    View Project Information2 
</a> 

あなたのモーダルでは、ajaxターゲットとして機能するdiv＃project-infoを追加する必要があります。また、モーダルをリンクと同じgspに保ちます。

<div id="add-blog-post" class="modal fade bs-example-modal-sm" role="dialog"> 
<div class="modal-dialog" style="width: 95%;"> 

    <!-- Modal content--> 
    <div class="modal-content" style="padding: 10px;"> 

     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
     </div> 

     <div class="modal-body" id="project-info"> 
     </div> <!--Project info DIV--> 
    </div> 
</div> 
</div> 

また、目的のプロジェクトのデータのみを含むテンプレート（例：_projectData.gsp）を作成する必要があります。

<h3>Project Information</h3> 
    <input type="text" hidden name="latitude" id="latitude" value= ${property.propertyAddress.latitude}> 
    <input type="text" hidden name="longitude" id="longitude" value= ${property.propertyAddress.longitude}> 

    <table> 
     <tr> 
     <td>Property Type</td> 
     <td>${project?.propertyType}</td> 
     </tr> 
     <tr> 
      <td>District</td> 
      <td>District ${project?.district}</td> 
     </tr> 
    </table> 

最後にあなたはAjaxデータの検索をcontrollするスクリプトが必要になります

def getData(long id){ 
    def projectInstance = Project.read(id) 
    ... 
    render template: 'projectData', model: [projectInstance: projectInstance] 
} 

の線に沿って何かを持っていますサーバーからデータを取得し、コントローラのアクション。

<script> 
    (function($){ 
     $(document).ready(function(){ 
      $(".system-link").on('click', function(event){ 
       event.preventDefault(); 
       var activeLink = $(this); //get the active link 
       var modal = $("#add-blog-post"); //get your modal 
       var target = $("#project-info"); //get your ajax target 
       var ajarUrl = activeLink.prop('href'); //This is the url to call 


       $.get(ajarUrl) 
       .done(function(ajaxData){ 
         target.html(data);  
         modal.modal('show'); //Show the modal after the content of the div is populated  
       }) 
       .fail(function(){ 
        alert("Something went wrong"); 
       });    

      }); // Click event handler 
     }); //Document ready 
    })(jQuery) 
</script>