This forum has moved to a new location and is in read-only mode. Please visit talk.octobercms.com to access the new location.
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
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 %}
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
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.
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
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..
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.
1-10 of 10