如何在Symfony2中的Bootstrap模式弹出窗口中动态显示数据

时间:2015-07-21 07:26:55

标签: javascript jquery twitter-bootstrap symfony

我想在Modal Popup中显示一个编辑表单,其中包含相应ID的信息。换句话说,我想在链接点击的模态弹出窗口中显示数据库中的动态数据。

到目前为止我尝试了什么: 包含所有数据列表的Twig文件:

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

动态ID传递的jQuery函数:

 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函数或控制器代码中的某个地方滞后,但无法确定确切的冲突。

帮助我,thanx

2 个答案:

答案 0 :(得分: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>
  

关注此事。如果您遇到任何问题,请告诉我

答案 1 :(得分:0)

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"); 
                       }
                    });
                });

我有一个Twig模板显示一个表中的所有实体。我宣布<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));
}

我的详细信息 Twig 模板:

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