In my volt template:
<div class="container">
{% block conteudo %}
{% endblock %}
</div>
I want to load dynamically that block via ajax. All of my childs have block conteudo.
How i can do that?
Thanks for your help.
I think that you're mixing PHP with JavaScript.
So if you want to load something via AJAX just use empty DIV
<div class="container"></div>
then if you want to load something from server, ie part of view generated by Phalcon/Volt, create action that renders contents of that block.
In jQuery you can:
$( "#result" ).load( "some/conteudo", { maybeSome: "params" });
And you should have SomeController that have conteudoAction method that renders some/conteudo.volt view.
Your some/conteudo.volt should render only that part of view, ie:
<h3>{{ post.title }}</h3><p>{{ post.someThing }}</p>
Another way is to render you div.container contents by JavaScript with data obtained from serwer. To do that you could return JSON data from SomeController::contuendoAction and JavaScript part of your app will create HTML to your page.
Related
i have simple modal window plan.vue with slot
...
<div class="plan__content">
<slot></slot>
</div>
...
there is also example.vue where it is used
<button
#click="showPlan"
>
Show plan
</button>
<plan
v-if="isPlanVisible"
#closePlan="closePlan"
>
</plan>
and i also have twig file plan.html.twig
{% block field %}
<table id="plan_table">
<caption>
<h2> {{smth.name}} </h2>
</caption>
...
</table>
{% endblock %}
can i add my twig here <plan> </plan> somehow? I tried to find a solution but only found how to add vue to twig and not vice versa
You can not embed a twig file inside a Vue component and render it. You have two alternative options:
You implement you twig template in "Vue Code" and don't use the twig template at all.
You load the rendered twig template via HTTP Request from a backend endpoint and render the response inside you Vue component vie v-html attribute for example.
In OctoberCMS, I am creating a component. In the component's default.htm partial file (/acme/myplugin/components/mycomponent/default.htm) I can include any other registered component by doing:
{% component 'someComponentName' %}
However if I have the following code to handle an AJAX request:
public function onAjaxRequest()
{
return [
'#ajaxUpdate' => $this->renderPartial('#dates-partial'),
];
}
and in my dates-partial.htm file I put the same contents as in my default.htm file, the someComponentName component is not rendered. I also tried putting the following at the top of the file:
[someComponentName]
==
however this is outputted directly as text to the page.
How can I have renderPartial() render a partial containing a component?
Hi I tried your approach but seems its working for me. let me share howI did the things.
My Page
title = "compo-in-partial-in-ajax"
url = "/compo-partial-ajax"
layout = "default"
is_hidden = 0
[newCompo]
[newOne]
==
<!-- AJAX enabled form -->
<form data-request="onTest">
<!-- Action button -->
<button type="submit">Call Ajax</button>
</form>
<div id="ajaxUpdate">
Default content.
</div>
{% component 'newCompo' %}
I have added 2 component
newCompo <- which is used to render content on page. basically in its 'default.htm' I added {% component 'newOne' %} so I am rendering another component inside.
newOne <- this is component which we are going to render inside our partial.
this is my ajax handler
public function onTest() {
return ['#ajaxUpdate' => $this->renderPartial('#partial.htm')];
}
newCompo component's -> default.htm
{% component 'newOne' %}
newOne component's -> default.htm
<h1>Newone</h1>
Partial file which is inside components/newcompo -> partial.htm
<h4>partial</h4>
{% component 'newOne' %}
Output
Normal
After ajax Call
I have a question: how can 1 view/page use 2 controllers to display different data?
For example:
1) Page displays DVD's information using DvdController.
2) On that same page I want to use a Template/Partial view, that displays list of actors, and that list should come from the second ActorsController.
I can add a template view inside another page but the second controller doesn't work:
MainPage on URL: website/dvd
{% block body %}
<div>
<h1>{{ dvd.title }} </h1>
</div>
<div>
{{ include('DVDBundle:Actors:actors.html.twig') }}
</div>
{% endblock %}
Above I use the partial view actors.html.twig to show the actors, strangely the html code/div's and so on are actually displayed and working on the page, however the controllers(ActorsController) method that meant to return this partial view is not executed for some reason.?
But if I go to the view directly via link: website/actors then its working.
The Symfony documentation on embedded controllers explains this nicely.
In short, you will need to do something like this in your template file:
<div>
{{ render(controller(
'DVDBundle:Actors:actors',
{ ... parameters to the controller action here ... }
)) }}
</div>
The important thing is calling the render function, which allows a controller to be rendered, as opposed to simply includeing a template. (This assumes that your have an ActorsController with an actorsAction method; change the names as appropriate to your controller.)
Every page can be served in two ways - an "html" and a "json" way.
The "html way" contains a full fledged html page - header/footer/menu/main content - just like every page.
The "json way" contains only the page-specific things, like the content and the title.
To achieve this, in every template I extend from base.html.twig that contains the following lines:
{% extends app.request.isXmlHttpRequest()
? "base/ajax.json.twig"
: "base/full.html.twig" %}
full.html.twig is just a file that wraps the content within header/footer/menu.
ajax.json.twig contains this:
{
"title": "{% block title %}{% endblock %}",
"content": "{% block body %}{% endblock %}"
}
The idea with all this stuff is to easily create flexible pages that can be served both as html page and an json reponse depending on app.request.isXmlHttpRequest()
The problem is that in base/ajax.json.twig I have to escape the content in the body block so that the file is a valid json object, e.g. <a href="/"> makes it invalid json because the quotes are not escaped:
{ "content": "<a href="/">" }
I need something like {{ parent()|json_encode() }}, not with parent() but with child(), that unfortunately I couldn't find in the docs.
Any suggestions?
You can call block as function from layout. In your case layout will look so:
{% set tmp = {title:block('title'), content:block('body')} %}
{{ tmp|json_encode }}
I am trying to understand how Twig can load a template through AJAX.
From their website, it is clear how to load a template (http://twig.sensiolabs.org/doc/api.html)
echo $twig->render('index.html', array('the' => 'variables', 'go' => 'here'));
But how would this work for an AJAX call? How would you tell Twig that you want to 'render' something that is only a part of index.html ... and not reload the entire page? I looked at Twig's sole Ajax example (http://twig.sensiolabs.org/doc/recipes.html), but this doesn't explain how Twig knows what part of the page you want to change. Assuming your Ajax call results in page content updates. I just need a simple example of this, something more than what is on Twig's recipe page.
Directly in the template:
{% if app.request.isXmlHttpRequest() %}
// code if ajax request
{% else %}
// code if not ajax request
{% endif %}
There are several ways to accomplish that :
1) Separate your index.html in several files like index.html and content.html.
Then use include function in index.html to include content.html.
Example :
if(isAjaxRequest()) //try to find the right function here
echo $twig->render('content.html', array('the' => 'variables', 'go' => 'here'))
else
echo $twig->render('index.html', array('the' => 'variables', 'go' => 'here'));
Edit :
If you do your ajax request with jQuery for example :
$.get('yoururl', function(data) {
$('#divtoremplace').html(data);
});
2) Use the request.ajax boolean in your index.html
{% if request.ajax == false %}
<p>My header, not reloaded with ajax</p>
{% endif %}
<p>My content, reloaded with ajax</p>
{% if request.ajax == false %}
<p>Other content, not reloaded with ajax</p>
{% endif %}
Not sure about the second one, but this should do the trick accordind to the documentation. The best way is the first solution, separate your code.