Question

我有一个内容模式的GSP页面。

我把模态div变成了一个   单独的GSP布局，使用不同的值是动态的。

指向同一数据目标的多个div onClick方法，但是   那些div有不同的参数来从第2点获得动态输出。

现在我的要求是在点击不同的div时动态更改数据目标div（第2点）（第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添加数据属性。我会采取链接路线。

...    
<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目标。此外，将您的模态与链接保持在同一个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中动态更改模态内容

1 个答案: