xyz.qtc63355
xyz.qtc63355

Hello, I need tutorials for building frontend forms with Ajax. What I need to know is how to fill out select options from a model. Fill out input text fields or labels after selecting an option (a model object). Make some inputs in a table similar to the TODO Ajax app, which will be later assigned to the current model.

Last updated

mjauvin
mjauvin

AJAX is well explained here:

https://octobercms.com/docs/ajax/introduction

Write a method in your model to return the options for your dropdown and use a partial that will build the select with options you get when calling that method on your model.

e. g. build-select.htm partial

<select>
{% for option in options %} 
   <option value="{{ option.value }}">{{ option.label }}</option>
{% endfor %} 
</select>

And call that partial like this:

{% partial "build-select" options=model.getOptions %} 
xyz.qtc63355
xyz.qtc63355

Thats great, and now, lets say I have all the options and I select one. How do I update labels like SelectedOption.name, SelectedOption.price, SelectedOption.Description

mjauvin
mjauvin

Can you show where those "labels" are coming from?

mjauvin
mjauvin

You can add an ajax hanlder to your <select> like this:

<select data-request="onSelectOption">
...
</select>

And in this ajax handler, add partial update code like documented in the Ajax doc I referenced earlier.

mjauvin
mjauvin

If you want usage examples of front-end forms that use a lot of ajax in conjunction with models, browse the source code from this great plugin:
https://github.com/OFFLINE-GmbH/oc-mall-plugin

Its components can be used in front-end pages:
https://github.com/OFFLINE-GmbH/oc-mall-plugin/tree/develop/components

xyz.qtc63355
xyz.qtc63355

It's clear to my what should I do now, what I need right now is this: Should I use an input field (after searching a product) or should i use a selection element for choosing a product.

After selecting a product I have to update info labels with selected product name, price etc.

My question is, can I listen input events?.. Similar to a standard search field (I paste in a barcode) and then I get result if there is a product with that barcode and fillin info labels..

xyz.qtc63355
xyz.qtc63355

I found this:

<input type="text" name="q"  data-request="search::onType" data-request-success="console.log(data)" data-track-input="true" autocomplete="off" />

here: https://octobercms.com/forum/post/autocomplete-search-form-using-octobercms-ajax-framework

So basically it need to be a search bar with model objects(products) and after finding the right one i need to get its price etc.

mjauvin
mjauvin

That's all explained in the AJAX documentation I sent earlier.

xyz.qtc63355
xyz.qtc63355

Hey @mjauvin, can you show me some examples on building forms using javascript api?

1-10 of 10