如何在Symfony2中的Bootstrap Modal Popup中動態顯示數據

Question

我想在Modal Popup中顯示帶有各自ID的信息的編輯表單。換句話說，我想在鏈接點擊模式彈出窗口中顯示來自數據庫的動態數據。

是我迄今爲止嘗試：它擁有所有數據的列表 嫩枝文件：

<table class="table table-striped table-hover table-bordered" style="margin-top:30px;" > 
      <thead> 
      <tr> 
       <th>{{ knp_pagination_sortable(entities, '#', 'a.id') }}</th> 
       <th {% if entities.isSorted('a.name') %} class="sorted"{% endif %}> {{ knp_pagination_sortable(entities, 'Name', 'a.name') }}</th> 
       <th class="hidden-480">Full Address</th> 
       <th>Action</th> 
      </tr> 
      </thead> 
      <tbody> 
      {% set count = '1' %} 
      {% for entity in entities %} 
      <tr> 
       <td>{{ entity.id }}</td> 
       <td>{{ entity.name }}</td> 
       <td>{{ entity.address }}</td> 

       <td> 
        <a href="#" onclick="editDocument();" data-id="{{ entity.id }}" role="button" data-toggle="modal" class="open-editBox" ><button type="button" class="btn blue">Edit</button></a> 
        {#<a href="{{ path('venue_edit', { 'id': entity.id }) }}">Edit</a>#} 
        <a href="#deleteModle" data-id="{{ entity.id }}" role="button" data-toggle="modal"><button type="button" class="btn blue">Delete</button></a> 

       </td> 

       {% set count = count + '1' %} 
       {% endfor %} 
      </tr> 



      </tbody> 
     </table> 

jQuery函數的動態ID通：

function editDocument(){ 
    $(document).on("click", ".open-editBox", function() { 
     var editId = $(this).data('id'); 
     $.ajax({ 
      type: 'GET', 
      url: editId+"/edit", 
      //data: {"editId": editId}, 
      success: function(response){ 
       // alert($.get()); 
       $('#editPlayerModel').html(response); 
      } 
     }); 
     // alert(editId); 
     //$(".modal-body #editId").val(editId); 
    }); 
} 

控制器功能對數據進行編輯並呈現如下格式：

/** 
* Displays a form to edit an existing Venue entity. 
* 
* @Route("/{id}/edit", name="venue_edit") 
* @Method("GET") 
* @Template() 
*/ 
public function editAction($id) 
{ 
    //print_r($id); exit; 
    $em = $this->getDoctrine()->getManager(); 

    $entity = $em->getRepository('JplAdminFunctionBundle:Venue')->find($id); 

    if (!$entity) { 
     throw $this->createNotFoundException('Unable to find Venue entity.'); 
    } 

    $editForm = $this->createEditForm($entity); 
    $deleteForm = $this->createDeleteForm($id); 

    return array(
     'entity'  => $entity, 
     'edit_form' => $editForm->createView(), 
     'delete_form' => $deleteForm->createView(), 
    ); 
} 

edit.html.twig文件包含了編輯表單（我想這種形式在模式彈出顯示）：

{{ form(edit_form) }} 

點擊編輯按鈕後，會顯示什麼，甚至沒有任何錯誤

注：我已經使用generate:doctrine:crud命令來執行CRUD操作

我知道我在流或jQuery函數或控制器代碼中的某處，但無法識別確切的衝突。

幫助我，感謝名單

Answer 1

<a href="#" onclick="editDocument();" data-id="{{ entity.id }}" role="button" data-toggle="modal" class="open-editBox" ><button type="button" class="btn blue">Edit</button></a> 

在上面html結構，必須onclick事件處理，如果你看到你那麼editDocument js函數：

function editDocument(){ 
    $(document).on("click", ".open-editBox", function() { 
     var editId = $(this).data('id'); 
     $.ajax({ 
      type: 'GET', 
      url: editId+"/edit", 
      //data: {"editId": editId}, 
      success: function(response){ 
       // alert($.get()); 
       $('#editPlayerModel').html(response); 
      } 
     }); 
     // alert(editId); 
     //$(".modal-body #editId").val(editId); 
    }); 
} 

你有$(document).on('click'...這是不必要的。我會建議使用上述任何一種。無論是從結構刪除onclick並刪除功能周圍$(document).on('click'...包裹或更改您的功能如下：

<a href="#" onclick="editDocument(this);" data-id="{{ entity.id }}" role="button" class="open-editBox" ><button type="button" class="btn blue">Edit</button></a> 

JS

function editDocument(ctrl){ //pass this ctrl from html 
    var editId = $(ctrl).data('id'); 
    var res="";//store the obtained result 
    var success=false; //open modal only if success=true 
    //url should match your server function so I will assign url as below: 
    var url="/editAction"; //this is the server function you are calling 
    var data=JSON.stringify({"id":editId}); 
    $.when(//To execute some other functionality once ajax call is done 
    $.ajax({ 
     type: 'GET', 
     url: url, 
     dataType:'json',//type of data you are returning from server 
     data: data, //better to pass it with data 
     success: function(response){ 
      res=response; 
      success=true; 
     }, 
     error:function(){ 
      //handle error 
     }, 
    })).then(function(){ 
      if(success) 
      { 
       //assign each values obtained from response which is now 
       //stored in "res" inside modal element by mapping it to 
       //necessary controls in modal 
       $("yourmodalid").modal("show"); //show the modal 
      } 
    }); 
} 

，或者如果您使用$(document).on('click'....然後如下更改：

HTML

<a href="#" data-id="{{ entity.id }}" role="button" class="open-editBox" ><button type="button" class="btn blue">Edit</button></a> 

JS

$(document).on("click", ".open-editBox", function() { 
    var editId = $(this).data('id'); //get the id with this 
    var res="";//store the obtained result 
    var success=false; //open modal only if success=true 
    //url should match your server function so I will assign url as below: 
    var url="/editAction"; //this is the server function you are calling 
    var data=JSON.stringify({"id":editId}); 
    $.when(
     $.ajax({ //To execute some other functionality once ajax call is done 
      type: 'GET', 
      url: url, 
      data: data, //better to pass it with data 
      dataType:'json',//type of data you are returning from server 
      success: function(response){ 
       res=response; 
       success=true; 
      }, 
      error:function(){ 
       //handle error 
      }, 
     })).then(function(){ 
       if(success) 
       { 
        //assign each values obtained from response which is now 
        //stored in "res" inside modal element by mapping it to 
        //necessary controls in modal 
        $("yourmodalid").modal("show"); //show the modal 
       } 
    }); 
}); 

我覺得你並不需要內部錨按鈕，你可以申請 類錨本身獲得儘可能下面的按鈕感覺：

<a href="#" data-id="{{ entity.id }}" role="button" class="open-editBox btn blue">EDIT</a> 

注意這一點。讓我知道如果你面臨任何問題

Answer 2

thx。我已經把這些例子，修改它和它的作品：

我採取了JS DoubleClick事件，顯示模式

JS：

$(document).on("dblclick", ".opdia", function() { 
     var editId = $(this).data('id'); 
     var res = ""; 
     var success = false; 
     var url = "###route_to_controller###?id=" + editId; 
     $.when(
       $.ajax({ 
       type: 'GET', 
       url: url, 
       success: function(response){ 
        res=response; 
        success=true; 
        }, 
       error:function(){ 
        //handle error 
       }, 
       })).then(function(){ 
         if(success) 
         { 
          $("#myModal").html(res).modal("show"); 
         } 
        }); 
       }); 

我有一根樹枝模板顯示所有實體在一張桌子裏。我宣佈<tr>用於控制模態。 HTML：

<tr class="opdia" data-id="{{ entity.id }}" role="button">... 

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div> 

而且我控制器：

/** 
* @Route("/SomeUrl", name="###route_to_controller###") 
*/ 
public function getDetailAction(Request $request) 
{ 
    $id = $request->query->get('id'); 

    return $this->render('::YOURTWIGTEMPLATE.html.twig',array('id' => $id)); 
} 

我的詳細信息嫩枝模板：

<div class="modal-dialog"> 
<div class="modal-content"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
    <h4 class="modal-title" id="myModalLabel">Modal title - ID -> {{ id }}</h4> 
    </div> 
    <div class="modal-body"> 


    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="button" class="btn btn-primary">Save changes</button> 
    </div> 
</div> 
</div>