Render template into Symfony2 with ajax

Question

I have a action in my controller for the index route

routing.yml

index:
pattern: /index
defaults: { _controller:AcmeDemoBundle:Default:index }

Controller for this path

public function indexAction()
{
    return $this->render('AcmeDemoBundle:Plugin:index.html.twig');
}

And the index.html.twig template

{% extends'::base.html.twig' %}

{% block stylesheets %}
    {% stylesheets filter='cssrewrite' output='css/*.css'
            'bundles/acmedemo/css/*'  %}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" />
    {% endstylesheets %}
    {% endblock stylesheets %}

{% block body %}
<br>
<div class="container">

<div class="wp_attachment_holder">

    <div class="imgedit-response" id="imgedit-response-8"></div>

    <div class="wp_attachment_image" id="media-head-8">
        <p id="thumbnail-head-8"><img class="thumbnail" src="http://localhost/wordpress/wp-content/uploads/2014/06/121-1024x583.jpeg" style="max-width:100%" alt=""></p>
        <p><a class="btn btn-sm btn-default" id="edik-wp-extended-edit">Редактировать</a> <span class="spinner"></span></p>
    </div>
    <div style="display:none" class="image-editor" id="image-editor-8">
    </div>
</div>
<div id="output"></div>
<img class="thumbnail"  data-attach-id="8" data-src="http://localhost/wordpress/wp-content/uploads/2014/06/121-1024x583.jpeg" style="max-width:100%" alt="">
    <script>
            $('#edik-wp-extended-edit').click(function() {
                window.location= Routing.generate('ajax');
//                $('#output').load('/ajax/index');
            });
        </script>
    </div>
{% endblock %}`

When the button Редактировать is clicked i want to load another template with ajax.

another.html.twig

<div>Hello</div>

routing.yml

ajax:
pattern: /ajax/index
defaults: { _controller :AcmeDemoBundle:Default:ajax }
options:
    expose: true

Controller for this path

public function ajaxAction()
{
    $template = $this->renderView('AcmeDemoBundle:Plugin:another.html.twig');
    return new Response($template);
}

But when i click the button my uri will be /ajax/index. What i want is that it stays by /index and the template will be rendered into my index template

What am i doing wrong?

Thanks.

For me this answer is the best stackoverflow.com/a/23209195/2008111 — caramba
– caramba, Commented Sep 8, 2016 at 18:36

Marty · Accepted Answer · 2019-04-18 08:08:51Z

22

First, your ajaxAction() should be a bit different as far as I know.

For me this works:

    $template = $this->forward('AcmeDemoBundle:Plugin:another.html.twig')->getContent();

    $json = json_encode($template);
    $response = new Response($json, 200);
    $response->headers->set('Content-Type', 'application/json');
    return $response;

The forward() function renders the template and returns the rendered HTML code.

Your JavaScript file should look like this:

$.ajax({
    type: "POST",
    dataType: 'json',
    url: Routing.generate('ajax'),
    async: false //you won't need that if nothing in your following code is dependend of the result
})
.done(function(response){
    template = response;
    $('#your_div').html(template.html); //Change the html of the div with the id = "your_div"                        
})
.fail(function(jqXHR, textStatus, errorThrown){
    alert('Error : ' + errorThrown);
});

You make an AJAX call to the your ajaxAction, which will return the HTML of the template you want to be rendered.

After that you just need to add a <div id="your_div"></div> at the position you want the template to be rendered. This workes perfectly for me.

To mention is that you need to break down the ajax template to just the code that should be shown.

edited Apr 18, 2019 at 8:08

Marty

1532 silver badges13 bronze badges

answered Jun 27, 2014 at 9:14

KhorneHoly

4,7767 gold badges48 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Vlad Over a year ago

So, a changed my ajaxAction() in my controller and put your js code into block <script></script>? after that i pressed button, but nothing do. Sorry, my english so bad. Best regards, Vlad

KhorneHoly Over a year ago

You need to add the ajax call, the second codeblock from my answer, to your click() function for the button. So the code will run when the button was clicked. Also you need to add a <div></div> with a id you want. I took the your_id as example. Keep in mind to change the id in the div AND the JavaScript code, then it should work.

bedomon Over a year ago

@KhorneHoly where the Routing from url parameter come from ?

KhorneHoly Over a year ago

@bedomon This comes from the JMSI18nRoutingBundle for Symfony2, which generates you the paths for actions dynamically in JavaScript. Routing.generate('ajax') means that the url should be the on the fly generated path for the controller action with the path name "ajax"

bedomon Over a year ago

@KhorneHoly thanks, I've just see the FOSJsRoutingBundle who have the same function Routing.generate

Alex O. · Accepted Answer · 2014-06-27 11:32:58Z

-1

Please try generate ajax route like this

window.location= '{{ path("ajax") }}';

Added:

For make ajax request change windows.location to ajax request

$( "#output" ).load( '{{ path("ajax") }}', function() {
  alert('Load done');
});

Added explanation of use:

js code will work only if you put it on Twig template. If you put it to js file it will not work. In case of original questions.

<div id="output"></div>
<img class="thumbnail"  data-attach-id="8" data-src="http://localhost/wordpress/wp-content/uploads/2014/06/121-1024x583.jpeg" style="max-width:100%" alt="">
<script>
      $('#edik-wp-extended-edit').click(function() {
            $( "#output" ).load('{{ path("ajax") }}');
      });
</script>

You can use something like FOSJsRoutingBundle to proper use SF2 routing in js

edited Jun 27, 2014 at 11:32

answered Jun 27, 2014 at 7:31

Alex O.

1,1936 silver badges20 bronze badges

7 Comments

Vlad Over a year ago

Thanks, but this doesn't help me. When i press button browser redirect and uri is /ajax/index

Alex O. Over a year ago

Yes this is behavior that you write. You write "window.location= " that mean redirect, not ajax action.

Alex O. Over a year ago

If you question related to how to make ajax request to load page, please change header. Now it misunderstand.

KhorneHoly Over a year ago

This will never work. You can't mixin JavaScript with Twig like this because the Twig will be rendered way before the JavaScript even knows it exists itself

Alex O. Over a year ago

@KhorneHoly can you please provide more details why it not wored? Not clear for me. Yes this is not correct way using twig together with js but from my view it should work correct. During render template {{ path(..) }} will converted to string route. So as result on html page we have something like $("#output").load("/ajax/load"); Thanks

|

Collectives™ on Stack Overflow

Render template into Symfony2 with ajax

2 Answers 2

5 Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related