Wiki: CMS Ajax Helper v5.5.4 - 2017.04.04

Topnew ajax helper (cms/cms_ajax.php) is a collection of functions for ajax call. Plus /css/ajax.php to handle the js triggle from /css/cssx/all.js

CMS Ajax works in the following way:

eg. If you click on a select option list #cat, and you need automatically update contents of #sub-cat:

/* 0 - define form fields */
$cols = [
    'cat' => [
        'list' => cms_form_arr('US;AU'),
    ],
    'sub_cat' => [
        'ajax' => '#cat',
    ],
];
/* 1 - register form fields */
cms_form_cols($cols);
/* 2 - generate html code for whole form */
echo cms_form();

And here is the HTML result

Default-HTML

And here is the sample HTML source code for above ajax field

<div class="ajax" data-src="#cat" data-ajax="...">
  Default-HTML
</div>

Let's study how above code is generated by cms_form()

1. cms_form() == cms_form('form;cat;sub_cat;end')

2. cms_form('sub_cat') == cms_form('ajax', 'sub_cat', '', $attr)

3. cms_form('ajax', ...) == cms_ajax($ajax, $attr)

Let's have a look at original field register

$cols['sub_cat'] = [
    'ajax' => '#cat'
];

It tells the cms_form_cols that sub_cat is an ajax form type. It will triggle an ajax call when id=cat is changed

Above is the default shorthand for the following:

$cols['sub_cat'] = [
    'type' => 'ajax',
    'ajax' => [ // used by cms_ajax_func($ajax)
        'src' => '#cat', // or .class or an html tag name
        'cmd' => 'change', // click, mouse(enter)
        'func'=> 'sub_cat', // to call cms_ajax_sub_cat($ajax, $attr, $val)
        'name'=> 'sub_cat', // or other_name
        'html'=> 'Default-HTML', // -1 noDefaultHTML, or null to call cms_ajax_sub_cat()
        'tag' => 'div', // default
        'key' => 'val', // key2=>val2, ... to be used by the ajax func
    ],
    'attr' => [...], // used by cms_ajax_func($ajax, $attr)
];

CMS Ajax JS

Here is the js in css/css1/all.js about the ajax call bit:

$(".ajax").each(function(){
  var me = $(this), e = me.data("cmd");
  if (e != "mouseenter" && e != "click") e = "change";
  $(me.data("src")).on(e, function(){
    $.post("/css/ajax.php",
      {ajax: me.data("ajax"), val: (e=="change" ? $(this).val() : $(this).data("val"))},
      function(data){me.html(data)}
    );
  });
});

More expalanation about cms_ajax()

cms_ajax($ajax, $attr) has two params, the $attr is easy to understand, it holds all html attributes eg css class style etc. Let's have a detailed study of $ajax which holds all configuration how the ajax to run

ajax.func

This param is a required, otherwise the result will always be blank.

eg $ajax['func'] = 'abc', it will ask ajax to return result from cms_ajax_abc(), if the function name not exists, it will return blank

If called by cms_form, and ajax.func is not specified, default to cols.field_name, if field_name = 'category_id', ajax.func will be set to 'category' automatically.

ajax.src

$ajax['src'] = '#html-id'; Or .class_name, or even any html tag name eg div

Additional params of $ajax

ajax.name = additional name to pass from selector eg name=sub_cat. In cms_form call it will default to $cols key if not set, in cms_ajax call you have to specify this manually.

ajax.cmd = click, mouse(enter), default change

ajax.tag = any html tag, default to div

ajax.src = eg #ID, .class, or event html element eg p div etc

ajax.html = -1 means no html, will not produce any html at initial stage, will automatically get elements only after ajax.src is ajax.cmd actioned

ajax.html = 'any html code for initial call, eg when ajax.src is not ajax.cmd actioned'

ajax.any_other_key = $value will be used by ajax.func

Other information

In case ajax.src is not a select or input form element, which does not have attribute value (when jquery::val() return nothing), you might need to add $attr['data-val'] = 'data of source', to pass to cms_ajax call

Finally, make sure you define your own ajax functions to be called in /cms/cms_ajax.php file

And here is an example of functions:

function cms_ajax_sub_cat($para, $attr, $val) {
    if ($val) {
        $attr['list'] = cms_list('SELECT id,name FROM sub_cat WHERE cat='. ceil($val));
    }
    return cms_form('sele', $para['name'], 0, $attr);
}

bank BenSon Bank
Cash Manager

blog Blog Forum
Blog BBS Ticket

chart SVG Chart
PHP SVG Chart

save Page Maker
Page Maker

topnew SIDU DB GUI
Database tool