Having trouble with ajax

edited June 2014 in Modules
Are there any working examples of AJAX in forms that I could look at.

Comments

  • edited 1:09PM
    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; }
  • edited 1:09PM
    That is brilliant!! thank you

    Managed to get the the ajax call working. :-)
  • 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?
  • edited 1:09PM
    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
  • The controller is used for rendering a form outside CMS.

    By module forms you mean forms that will be used inside cms?
  • edited 1:09PM
    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.
  • edited 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']?
  • edited 1:09PM
    The options should be returned as HTML from the ajax method similar to the Base_module_model::ajax_options method.
  • edited 1:09PM
    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?
  • edited 1:09PM
    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.
Sign In or Register to comment.