Jan 06

October cms update partial using ajax framewrok

October cms come with its own ajax framework library its really easy to use ajax framework and you can update any part of your HTML.

Please follow the below guide to simply update partial with old data and new data dynamically using ajax framework.

1. create partial which needs to be updated in the theme's partial's directory. let's call it ajax-partial.htm

YOUR_THEME/partials/ajax-partial.htm code
<h4>
  {{myText}}
</h4>

Checkout screenshot where to create partial: YOUR_THEME/partials/ajax-partial.htmpartial

2. now you need to use that part in your code. on your main page.


in your code section, you can use it like this.

Your page's code section YOUR_THEME/pages/your_page.htm
<?php

function onStart() {
    $this['myText'] = 'Starting text ...';
}

function onPartialUpdate() {
    $this['myText'] = 'Ajax updated text';
    return ['#partialId' => $this->renderPartial('ajax-partial')];
}

Checkout screenshot where to create your main page and its code section: YOUR_THEME/pages/your_page.htmmain-page-code-section

In your markup section, you can use it like this.

Your page's markup section YOUR_THEME/pages/your_page.htm
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">

            <!-- partial to update with partial id: partialId 
            and passing `myText` param -->
            <div id="partialId">
                {% partial 'ajax-partial' myText=myText %}
            </div>

            <!-- ajax call to update above partial -->
            <button 
                class="btn btn btn-primary"
                data-request="onPartialUpdate"
            >
                Update
            </button>
        </div>
    </div>
</div>

Checkout screenshot where add markup. YOUR_THEME/pages/your_page.htmmain-page-markup-section

How it will work?

  1. October cms Initially page loads onStart will assign data which we need, or even we don't need to pass data in that case you can put the condition in partial and show or hide data.

  2. Once the page is loaded you click on the Update button and make ajax call this call will call onPartialUpdate and will strat update partial using ajax framework.

  3. onPartialUpdate handler will handle the request and update myText variable data and render or update partial again with given new data ($this['variable_name'] in our case $this['myText']).

  4. Now it will prepare partial and then we push It to desired ID ('#partialId' in our case) and in this way, we can update partial using the ajax framework.

OctoberCMS Ajax framewwork in action

Checkout video how it will work.ajax-update-partial-in-action

if any doubt please contact us on contact page.

Ad
Ad