Slim, twig and Ajax (JSON)

1

Hi all,

I am trying to wrap my brain around what the best is for using an Ajax request and appending it to the dom.
So far I have tried the following:

  • with jQuery I made a function ‘renderFields’ - that handles the data
  • in the controller I render a twig view and ‘return this’.

Both have their challenges. Let me start with the twig setup:

  • because I only need to load a partial of the page I create a seperate twig file for the piece of html that I would like to render. This will increase the amount of twig files.
  • Even dough I see the data (html) is sending back (console.log) - I still get an error in stead of success.

The jQuery cons:

  • In the bottom of the twig file I add this ‘renderFields’ method. This is different from page to page - due to the needs. This will increase the amount of data (server-side).
  • It is hard to make nested statements in a ‘append()’ function. For example I can’t figure out how to loop trough results in the following:
for(i=0; i<items.length; i++)
{
    $('#list').append('\
         <div class="item">\
              <div class="col-md-12">\
                     <h5>'+ item[i].title + '</h5>\
                      <span>'+ item[i].message + '</span>'+
                      (item[i].user === '' ? '' : '<span>'+ item[i].user + '</span>') +
               '</div>' +
               for (i=0; i<items.nodes; i++)
               {
                        '<p>' + item.nodes[i] + '</p>'
               } +
               '</div>');
}

In this example the for loop won’t work.

Any other options, tips or solutions are also welcome (I am still a very beginner aka noob :slight_smile: ).

2

What error are you receiving?

Building nested DOM elements this way is cumbersome. You may want to look into a javascript framework such as Vue, which makes it far easier to create dynamic web pages.

If you want to stick with jQuery for now, try splitting the elements into seperate variables, e.g.:

var i, j, $item, $col, $title, $p;
for(i=0; i<items.length; i++) {
    var $item = $('<div class="item"></div>');

    var $col = $('<div class="col-md-12"></div>');
    $item.append($col);

    var $title = $('<h5></h5>').text(item[i].title);
    $col.append($title);

    for (j = 0; j < items.nodes.length; j++) {
        $p = $('<p></p>').text(item.nodes[j]);
        $item.append($p);
    }

    $('#list').append($item);
}
3

Hi llvdl,

It is getting really hard. I am a long time ‘stuck’ on this little isue. Still can’t see to make nested objects work. Even when I split them.

I also tried to send HTML back. Because the .twig file rendering seems easier.

$html = $this->view->render($response, 'reviews/review-item.twig', [
		'reviews'	=> $reviews,
]);
return json_encode(array(				
		'html' => $html,
));

The status code is ‘200’, readyState 4, But AJAX keeps putting the response in as error?

4

Perhaps it is because $this->view->render returns a ResponseInterface instance and not a string?

You can also return the HTML response, instead of wrapping it inside JSON:

return $this->view->render($response, 'reviews/review-item.twig', [
    'reviews' => $reviews,
]);

And then fetch and insert using javascript:

$.get('/items')
    .done(function(data) { 
         $('#items').html(data); 
    });
5

If you will try to render / return the response there is an error. Even when you are not return anything of the method.
BTW: a normal (very large string) is not a problem.

Does anyone no a solution for this?