How to update an array in TWIG template? - php

Question

Currently, I am using TWIG to display all my information(articles and comments). So, I first retrieve the articles and comments from my database and pass it into an array. This is then passed into my twig template. Then, I load each article and underneath each article I load in the comments of that article. These comments and the buttons associated with it(aka the new comment button) are all made in my macro.
The macro just gets the array that contains the comments that I need to display. It display the comments for the article and with each comment it makes a reply button, so the user can reply to any comment or start a new thread.
I have used AJAX and jQuery to store the new comments in my database without refreshing the page. However, I need to figure out a way to display the new comment without refreshing the whole page. Does anyone have any idea on how to do this in TWIG?
The problem I am facing with TWIG right now is how to post comments asynchronously. I load the array of the current database of comments initially when I load the page. However, if my database updates, how do I update my array with it. Any suggestions? I was thinking of grabbing my array whenever a new comment is added, which is why my question is "How to retrieve an array in TWIG template?", but I am open to other suggestions.

Answer 1

Your issues isnt a twig issue, twig only is a templating engine and is only used on the initial render of the page. What you should be doing is when you get a successful response from your ajax save is create a new DOM element using jquery and add it to the page using your same schema. Something like:
<script>
$.post(
TheUrlThatYouPostTo,
TheDataThatYouPassWithThePost,
function(returnData, textStatus){
//assuming that your return data is an array conatianing a boolean successful key
if(returnData.successful){
$('#YourCommentsWrapperElement').append('<div class="comment">#some other elements containing the posted values</div>');
}
}
);
</script>
Or if you want twig to generate the comment HTML for you and you dont want to have it hard coded into your javascript you can have the controller action that your are posting to with the AJAX post return a rendered version of the comment. Something like this:
#Your Controller file
public function ajaxPostAction(Request $request){
//Handle post data to create a new commentObject
return array(
'comment' => $commentObject
);
}
Then you create a view file for that action:
#your view for the controller action ajaxPost.html.twig
<div class="comment">
<h3>{{comment.author}}</h3>
<p>{{comment.content}}</p>
</div>
Then your javascript will just take the return data and append it to the existing list:
<script>
$.post(
TheUrlThatYouPostTo,
TheDataThatYouPassWithThePost,
function(returnData, textStatus){
//Now your return data is the HTML for the new comment so just append it to the rest
$('#YourCommentsWrapperElement').append(returnData);
}
);
</script>