Search code examples
symfonytwigfacebox

symfony2 and facebox ajax twig content not displaying

enter link description here

I am trying about this:

<a href="remote.html" rel="facebox">text</a>

I have this in my twig

            <a href='{{ path('likes_show_names') }}' rel='facebox'>

And than in controller:

        $view= $this->renderView('WallBundle:Statuses:likes_names.html.twig');

    return new Response($view);

No error appear the network (chrome) is displaying code get 200. Facebox open the pop up but the connntent.. is missing...

When i check response => preview its displaying: This request has no preview available

What i am doing wrong please?

Solution

  • I put Facebox in my web/ directory. The file structure looks like this:

    web/facebox
web/js/jquery.js

    Then, on the routing, I set my default and the ajax-called controller:

    vendor_some_bundle_homepage:
    pattern:  /
    defaults: { _controller: VendorSomeBundle:Default:index }

vendor_some_bundle_test:
    pattern:  /test
    defaults: { _controller: VendorSomeBundle:Default:ajax }

    Next, I created a simple controller for both routes:

    <?php

namespace Vendor\SomeBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;

class DefaultController extends Controller
{

    public function indexAction()
    {
        return $this->render('VendorSomeBundle:Default:indexTest.html.twig');
    }

    public function ajaxAction()
    {
        return $this->render('VendorSomeBundle:Default:ajaxTest.html.twig');
    }

}

    Then, and I think the most important file for you, the page where there is a link that open facebox :

    <!-- indexTest.html.twig -->
<html>
    <head>
        <link href="{{ asset('facebox/src/facebox.css') }}" media="screen" rel="stylesheet" type="text/css"/>
    </head>
    <body>
        <a href="{{ path('vendor_some_bundle_test') }}"  rel='facebox'>click me</a>
        <script src="{{ asset('js/jquery.js') }}" type="text/javascript"></script>
        <script src="{{ asset('facebox/src/facebox.js') }}" type="text/javascript"></script>
        <script type="text/javascript">

            jQuery(document).ready(function($) {
                $('a[rel*=facebox]').facebox();
            });

        </script>
    </body>
</html>

    Important: you should take care of your assets and of the routing. If there is some errors, they should be written in your app/log/dev.log file, or at last in your apache error.log.

    Finally, create the view that will be included:

    {# ajaxTest.html.twig #}
This is <em>some</em> remote content

    This sample gave me the following result:

    enter image description here

    Note: there is still some assetic errors (see the close button at the right of the image), because I installed facebox quickly. The point of your question was the access to remote content, and here you have a sample you can follow to find your mistake.