我想在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
答案 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">×</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>