在 Grails 中动态更改模态内容

Question

I have a GSP page which contents modal.

I made the modal div into a separate GSP layout, which is to be dynamic with the different values.

More than one div OnClick method pointing same data-target, but those div have different parameters to get dynamic output from point 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 OnClick）：

<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

首先，也许您应该丢失数据切换和数据目标，因为它们不是必需的，您需要控制何时显示模态。

那么将 <a> 放入 <div> 或创建 <a> 而不是 <div> 可能更容易。也有可能将数据属性添加到您的 div。我会选择 link 路线。

...    
<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>

对于您的模式，您需要添加一个 div#project-info 作为您的 ajax 目标。另外，让你的模式与你的 links 保持相同的 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>

从服务器检索数据的控制器操作将具有类似于

的内容

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

最后，您将需要一个脚本来控制 ajax 数据的检索。

<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>

在 Grails 中动态更改模态内容

Change modal content dynamically in Grails

javascript

jquery

grails

gsp