CODEWITHSUNDEEP
octobercms
user17142896
user17142896

Reputation:

OctoberCMS pass variable onStart to AJAX function

My Primary page is contains following codes:

function onStart()
{
  // ...
  // $result => Response of an API
  $this['prices'] = $prices;
}

function onAjax()
{
  // ...
  // $result => Response of another API
  $this['products'] = $products;
}

My AJAX partial is:


{% for product in products %}

<div id="price">
  {{ prices[product.name] }}
</div>

{% endfor %}

But it coulnd't read the prices variable. How can I pass?

Upvotes: 0

Views: 474

Answers (2)

Hardik Satasiya
Hardik Satasiya

Reputation: 9693

You can simply push partial data to update partial.

ref: https://tutorialmeta.com/octobercms/october-cms-update-partial-using-ajax-framewrok

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

<!-- here you can put condition if there is no product or there is no prices do not render anything and show message etc... -->
{% if products|length != 0 and prices|length != 0 %}
  {% for product in products %}
    <div id="price">
      {{ prices[product.name] }}
    </div>
  {% endfor %}
{% else %}
  <p>Please fetch from ajax</p>
{% endif %}

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.

function prepareVars() {
  // ...
  // $products => Response of another API
  // $prices => Response of another API


  // these are the variable will be available in the partial/page
  $this['prices'] = $prices;
  $this['products'] = $products;
}

function onStart()
{
  $this->prepareVars();
}

function onAjax()
{
  $this->prepareVars();
  return ['#partialId' => $this->renderPartial('product-list')];
}

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

<div id="partialId">
 {% partial 'product-list' products=products %}
</div>

<button class="btn btn btn-primary" data-request="onAjax">
  Start Ajax
</button>

How it will work?

  1. initially page loads onStart will be called and you fetch product or some other stuff. and pass directly to partial and render that partial based on that need.

  2. once the page is loaded you click on the Start Ajax button and make ajax call this call will call onAjax.

  3. onAjax handler will handle the request and fetch prices and render partial again with passed data ($this['variable_name']).

  4. now it will prepare partial and then we push It to desired ID ('#partialId') and in this way, we can update our partial.

if any doubt please comment.

Upvotes: 0

Pettis Brandon
Pettis Brandon

Reputation: 865

This is because onStart() is only ran once on page creation. You can learn about this here. It states: "The onStart function is executed during the beginning of the page execution."

What you should do to load your prices in the partial is place the onStart() function into the partial code section instead of the pages.

function onStart()
{
  // ...
  // $result => Response of an API
  $this['prices'] = $prices;
}

enter image description here

Upvotes: 0

Related Questions