使用Symfony的html模式标记中的JSONResponse

时间:2017-05-18 20:44:13

标签: json ajax symfony rendering bootstrap-modal

谢谢你的时间。

我正在尝试加载一个包含数据的表单,以便在Bootstrap模式中进行编辑。 我可以从我的控制器加载JsonResponse,但它显示原始的JSON代码。

我的控制器JsonResponse:

    //more code
    $response = new JsonResponse(
                array(
            'message' => 'Success!',
            'form' => $this->renderView('EPAdminBundle:Admin:formmmm.html.twig', array(
                'event' => $event,
                'form' => $form->createView(),
            ))), 200);

      return $response;

我正在尝试在此视图中呈现表单。

查看test.html.twig:

<a data-toggle="modal" href="{{ path('ep_admin_test_form', {'slug': 'fete-1'}) }}" data-target="#modalForm" id="test">Click me !</a>

<div class="modal fade" id="modalForm" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content" id="loadHere">
            Loading...
        </div>
    </div>
</div>

test.html.twig中的脚本:

<script type="text/javascript">
    $(function () {
        $("#test").on("click", function () {
            url = $(this).attr('href');
            $.ajax({
                type: 'POST',
                url: url,
                dataType: 'json'
            }).done(function (jqXHR, textStatus, errorThrown) {
                if (typeof jqXHR.responseJSON !== 'undefined') {
                    if (jqXHR.responseJSON.hasOwnProperty('form')) {
                        $('#loadHere').html(jqXHR.responseJSON.form);
                    }
                    $('.form_error').html(jqXHR.responseJSON.message);
                } else {
                    alert(errorThrown);
                }
            });
        });
    });
</script>

将formmmm.html.twig加载为JSON:

    <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">
        <span aria-hidden="true">&times;</span>
        <span class="sr-only">Close</span>
    </button>
    <h4 class="modal-title" id="myModalLabel">Modification de l'évènement :</h4>
</div>

<div class="modal-body">
    <p class="statusMsg"></p>
    <div class="well row">
         {{ form_start(form, {'attr': {'class': 'form-horizontal col-lg-12'}}) }} 

//more code
//Used the snipped because it had trouble displaying the code

我的目标是在模式Bootstrap中加载预填充的表单并编辑数据,然后通过AJAX将其发送到控制器中。到目前为止,我在我的视图中解码JSON时遇到问题,而且我无法通过自己或在互联网上找到解决方案。

再次感谢您的时间。

1 个答案:

答案 0 :(得分:0)

您必须遵循教程:https://blog.intelligentbee.com/2015/01/19/symfony-2-forms-and-ajax/

如果我想加载脚本,那么脚本会被窃听。

几天后我通过使用控制台并使用下一个方法查看jqXHR对象找到了解决方案:

var objs = Object.getOwnPropertyNames(jqXHR);
for (var i in objs) {
      console.log(objs[i]);
 }

问题是jqXHR.responseJSON.hasOwnProperty('form')不存在。

$('#loadHere').html(jqXHR.form);
if (typeof jqXHR.form !== 'undefined') {
    if (jqXHR.hasOwnProperty('form')) {
        $('#loadHere').html(jqXHR.responseJSON.form);
    }
    $('.form_error').html(jqXHR.responseJSON.message);
} else {
    alert('error');
}

如果有人有疑问,请询问,我会尽力帮助。