How to add processing PHP file for AJAX requests in Joomla -
i trying develop form in joomla. basic problem is: how can alter form select options depending on user has chosen before? need make several database requests, while user fills form. ajax, need processing php file. can tell me how in joomla, because jce file browser can't add any.
thank you!
assuming know how write "normal" joomla component retrieves data database , shows them in page, here's proposed solution.
in example dynamically retrieve list of "products" selected "category".
component: server part of ajax request
let's use json exchange data in ajax call.
within every joomla component, can create json view, creating file view.json.php alongside default view.html.php. view used when add "format=json" query string.
so create these additional views use same model data, output them json string. json view simple, this:
public function display() { $this->products = $this->getmodel()->getproducts(); echo json_encode($this->products); }
you need add "tmpl=component" response contains data component , not rest of joomla page (like modules , such).
you should end in situation can put in browser:
http://yoursite/index.php?option=mycomponent&view=products&format=json&tmpl=component
and json list of products.
add filters request
of course want products selected category should modify "getproducts" model method check querystring parameter category=xyz
.
the url becomes
http://yoursite/index.php?option=mycomponent&view=products&category=1&format=json&tmpl=component
p.s. more detailed discussion on how implement check off topic, because it's not related ajax.
jquery: client part of ajax request
now have component accept requests via url , provide json response can use jquery new data each time "category" select changed:
var category_select = $('#category'); var product_select = $('#product'); var request = jquery.ajax({ "url": 'index.php?option=mycomponents&view=products&tmpl=component&format=json&category=' + category_select.val() "type": "get" }).done(function (result) { result.each(function (product) { var new_option = jquery('<option/>', { 'value': product.id, }) .text(product.name) .appendto(product_select); }); })
this js code should added in same page show form.
Comments
Post a Comment