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
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.
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.)
I'm using UserFrosting and so far I've been able to import all of the default elements into the home page. However, I've now added a second page but nothing happened when I copied the following code from the home page:
{% include 'common/components/head.html' %}
<rest of code>
{% include 'common/components/main-nav.html' %}
<rest of code>
{% include 'common/components/footer.html' %}
{% include 'common/components/jumbotron-links.html' %}
I then used the following php code:
<?php include("../userfrosting/templates/common/components/head.html"); ?>
Which seems to work but the page only shows this code found within the head.html file:
{% for item in includeCSS(page_group|default("common")) %} {% endfor %} {% for item in includeJSTop(page_group|default("common")) %} {% endfor %}
Which obviously is not very useful!
When I keep the home and page2.php file in the same folder (in localhost/userfrosting/templates/common) then I receive Error 404. When I move the file to the default UserFrosting home page directory (which the home.html file isn't actually in) in localhost/public, I get only the above code.
It seems like I'm missing something quite basic here but would appreciate some help. Thanks.
You are confusing PHP files and template files. UserFrosting uses a front controller pattern along with the Twig templating engine. So, you do not need a separate PHP file for each page. Instead, you should create a new template file for your page:
userfrosting/templates/common/page2.html
{% include 'common/components/head.html' %}
// DO NOT use PHP here - just Twig! See the Twig documentation: http://twig.sensiolabs.org/doc/templates.html
{% include 'common/components/main-nav.html' %}
// More Twig
{% include 'common/components/jumbotron-links.html' %}
{% include 'common/components/footer.html' %}
Then you need to link up a URL with this template. That is done in the controller, public/index.php, for example like this:
// Miscellaneous pages
$app->get('/page2/?', function () use ($app) {
$app->render('common/page2.html', [
'page' => [
'author' => $app->site->author,
'title' => "Page Deuce",
'description' => "This is the second page, aight?",
'alerts' => $app->alerts->getAndClearMessages()
]
]);
});
I highly recommend going through the tutorial on adding a new page: https://learn.userfrosting.com/building-pages
You can also learn more about MVC, Slim, and Twig here: https://learn.userfrosting.com/basics/overview
Feel free to join in chat if you are still having trouble.
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.
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.