Having trouble with ajax

jamiegrand · June 2014

Are there any working examples of AJAX in forms that I could look at.

admin · June 2014

Any method on your model that is prefixed with "ajax_{method}" can be accessed via a controller like so fuel/{mymodule}/ajax/{method}/
Additionally, any query string or post parameters will be passed to the model method as a parameters array. This provides an easy way to make ajax requests so for example, a drop down select that determines contents of other parts of the form with something like the following:


...
$fields['state'] =  array('type' => 'state');
$fields['zip_codes'] = array('type' => 'select',
				'js' => '<script>$(function(){
				$(document).on("change", "#state", function(e){
					var url = "'.fuel_url('mymodule/ajax/options').'";
					$.get(url, {state: $(this).val()}, function(html){
						$ ("#zip_codes").html(html); 
					});
				});
				$("#state").trigger("change");
				</script>'
			);
				
....

Then in your model, you can have something like the following (note the parameters array which will be the post and query string parameters):

function ajax_options($params = array())
{
	$data = $this->find_all(array('state' => $params['state']));
	$str = '';
	foreach($data as $key => $option)
	{
		$str .= "<option value=\"".$option->id."\" label=\"".$option->code."\">".$option->code."</option>\n";
	}
	return $str;
}

jamiegrand · July 2014

That is brilliant!! thank you

Managed to get the the ajax call working. :-)

fulgerica2003 · November 2014

The form can also be rendered in a controller?

I'm not sure that I understand where ajax_options must be placed.

Let's say that I have the following situation: I have two modules, one with states and one with zip_codes. They are related using id_state in the zip_codes table.

My form is rendered in a controller that is not related with the two models.

My question is in which model (zip_codes or states) do I have to place the ajax_options function?

admin · November 2014

Is the controller intended to be used in the backend with the CMS? The ajax_options method exists on the model that you want the options from (e.g. the states_model would return a list of states). If your model extends Base_module_model, which it probably does, it should already have an ajax_options method in it as of FUEL 1.2. FUEL 1.2 also has a "dependent" field type which can be used to ajax in a selection list when creating module forms:
http://docs.getfuelcms.com/general/forms#dependent

fulgerica2003 · November 2014

The controller is used for rendering a form outside CMS.

By module forms you mean forms that will be used inside cms?

admin · November 2014

Yes. They usually have a URL of fuel/{mymodule}/ajax/{method}/. There is a method on the fuel/modules/fuel/controllers/module.php controller called "ajax" that handles those types of requests and finds the method on your model.

If you are doing it outside of the CMS, you'll need to create your own controller or view file with logic to do that.

EurekaSolusi · May 2016

This fuelcms is so interesting. I have decided to use this framework for my next project. However, as a newbie, I got lost here and there, maybe because fuelcms offers variations to do one thing.

Regarding ajax, I am following another example, http://docs.getfuelcms.com/general/javascript#ajax

However, I am still lost. On that example, the return from ajax is object. So what I got now is somewhat like this:


<select name="city_id" id="city_id" class="add_edit cities" data-module="cities">
[{"id":"4","city":"Pekanbaru","province_name":null,"active":"yes"},{"id":"1","city":"Banda 
Aceh","province_name":"Aceh Nangroe Aceh Darussalam","active":"yes"},
{"id":"2","city":"Padang","province_name":"Sumatera Barat","active":"yes"},
{"id":"3","city":"Medan","province_name":"Sumatera Utara","active":"yes"}]</select>

note: state is similar to province.

The example on that page stopped there. Yet, another thing to do is to convert back the object to form field or straight to html syntax. Is there any helper or method available? Or did I do something incorrectly id defining fields['city_id']?

admin · May 2016

The options should be returned as HTML from the ajax method similar to the Base_module_model::ajax_options method.

EurekaSolusi · June 2016

Thanks.. I have managed to do that.

However, I got another issue. If the selectable input has "inline create" (or "inline edit") feature, a button is displayed there nicely, the user can click it and another pop up form appears, after a record is added, there are warning and fatal error.


Severity: Notice

Message: Undefined offset: 1

Filename: core/MY_Model.php

Line Number: 1142


A Database Error Occurred

Error Number: 1064

You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near 'FROM (`my_table`) ORDER BY `my_table`.` asc' at line 2

SELECT my_table.id, my_table. FROM (`my_table`) ORDER BY `my_table`.` asc

I played a bit with debugging tools, some part of the process / methods are called again, but not completely from the start of form / fields building. I wonder if I need to write another javascript to handle end of "inline add" process. Or maybe I can force some part of the class to do reload completely?

EurekaSolusi · June 2016

I dig in again, and found that it is refresh_field method that wrongly try to find key field of the parent class model.

Now it is solved by changing (in the php file of advanced modules' simple module model),

public $fields=array('my_field'=>Array('label'=>'This Label'));

into

public $fields=array();

and place that label definition as
$fields['my_field']['label']='This Label';

inside public function form_fields declaration.

IMHO, this is an example of many ways fuel cms offers to do one thing. Yet, somehow one way does not work, should use the other one, and everything goes well.

Howdy, Stranger!

Categories

Having trouble with ajax

Comments