Welcome, Guest
Username: Password: Remember me

TOPIC: issue when forking CKCombo.php

issue when forking CKCombo.php 08 May 2015 18:21 #12968

  • msantana
  • msantana's Avatar
  • Offline
  • New Member
  • Posts: 17
  • Thank you received: 1
  • Karma: 0
I was customizing my ckcombo and I found 2 issues:
Issue #1- I can't use 'onchange'.
Issue #2- pass or insert any html to my input before rendering.

This is what I tried in my FORK file.
$this->input = JDom::_('html.form.input.select', array_merge(array(
    'onchange' => $this->getOption('onchange'), /* did not work */  /* NOTE: I had my XML file with the field parameter as: onchange="myJSfunction_here" */
    'onchange' =>  ($this->getOption('name') == 'myfield_name'? 'onchange="my_JSfunction_here":null),  /* did not work */
    ..... /* copied from original CKcombo */
    ), $this->jdomOptions));

/* This is to add a button after a "Select" input type field changes. */
if ($this->getOption('name')=='myfield_name'){
   $this->input .= '<input type="button" class="button-addvalue" onclick="MY_jsAddField(this);" value="Add value" aria-invalid="false">';   /* did not work: the html was not added to my html source */
}


My SOLUTION was:

Issue #1:
Instead of using 'onchange' I used 'selectors':
Option 1:
- In my FORKed CKcombo
- Not the best way because I have to put a condition to validate the action only to this particular field name
'selectors' =>  ($this->getOption('name') == 'myfield_name'? 'onchange="my_JSfunction_here" : null),

Option 2:
- Instead of adding the code to the FORK CKcombo, it was added to /FORK/views/My_view/tmpl/My_form.php as follows:
- BEST Solution since I could added to my particular field directly.
$fieldSet['jform_myfield_name']->jdomOptions = array(
		'list' => $this->lists['fk']['myfield_name'],
/* this line */		'selectors' => array('onchange' => 'my_JSfunction_here'),
		);


Issue #2:
Regarding the second issue of injecting some HTML code to the input before rendering.


Option 1:
- In my Forked CKCombo I modified the rerutn line with:
- Not the best solution since I have to put a condition to validate the action only to this particular field name
return parent::getInput().($this->getOption('name') == 'myfield_name'? '<input type="button" class="button-addvalue" onclick="MY_jsAddField(this);" value="Add value">':null);

Option 2:
- Instead of adding the code to the FORK CKcombo, it was added to /FORK/views/My_view/tmpl/My_form.php as follows:
- BEST SOLUTION.
Step1: Added code to /FORK/views/My_view/tmpl/My_form.php FORKed CKCombo
$fieldSet['jform_myfield_name']->jdomOptions = array(
		'list' => $this->lists['fk']['myfield_name'],
                           /* this line  FOR issue #1 */  'selectors' => array('onchange' => 'my_JSfunction_here'),
                           /* this line  FOR issue #2 */  'html_after' => '<input type="button" class="button-addvalue" onclick="MY_jsAddField(this);" value="Add value">'
		);
Step2: Added code FORKed CKCombo
return parent::getInput().($this->jdomOptions['html_after']? $this->jdomOptions['html_after']:null);
/* no need to validate by field name */


Now my questions are:

1- Is my BEST solution the best way?
2- Why 'onchange' did not work if it suppose to be one of the parameter available to be use in the xml.
3- Why the CKCombo (original and FORKed) did not processed the 'onchange' action an added the respective code to the input.
4- Why it does work with 'selectors' instead of 'onchange'?
5- Is there another way to modifie the html before rendering?

PLEASE HELP

Miguel Santana
MS - Lyquix
The administrator has disabled public write access.

issue when forking CKCombo.php 11 May 2015 10:20 #12970

  • admin
  • admin's Avatar
  • Online
  • Administrator
  • Chef
  • Posts: 3711
  • Thank you received: 984
  • Karma: 140
Hi msantana,

welcome to the community,

As far as I can see, you have been able to edit the correct files, and both you solutions are working.
Point per point, here are my answers :

1. There is another BEST coding practice is doing it all in javascript (separated). Basicaly when you embed JS wintin the HTML dom structure is not very clean to my point of view. First because if you have a lot of JS, it can be unreadable. Secondly because if you choose to call another JS function, then why to do it in the html ? Thirdly because if you have repeated fields, you have repeated JS. And then fourth reason is you JS is more visible in the html selector, then in a small JS appart. Let's say that the best practice for my point of view is to put JS in the script tags. For others developper and also for you it is more easy to find it.

2. JDom is not a complete framework. It only handle the things that your component needs. Some features has been kept during the years and are not used anymore, but basically JDom has been created for filling the lacks of Joomla for your components. It can be improved a lot but it is not really my priority because I would love that JDom disapears completly the day that Joomla finaly integrate a real HTML abstraction. For the moment JDom is clean enough and can be used, but I consider it as a bridge wich would never has to be. The good thing with JDom is that it is really simple to use and simple to custom / add / fork.
So, to answer you about the 'onchange' event, I didn't implemented it because it is not used and if I had to, I would had to implement all possible events of the input... I do not want this because JDom is already heavy in terms of performances (when you repeat in grid for instance), so the less useless code it contains, the best it is. Selectors permit to achieve it in a good and simple and raw way.

3. It is now deprecated. It can only recieve the 'submit' boolean in parameter as below :
'submitEventName' => ($this->getOption('submit') == 'true'?'onchange':null),

4. as explained in 2. it is for optimization reasons, and because not only 'onchange' event exists for inputs (onclick, onfocus, onselect....) The best practice is to attach the events AFTER the dom tree initializated. The only thing JDom does is to automatically attach the 'submitForm()' event because it is used a lot, and it is really convenient : (submit = true)

5. Yes of course. Directly in your template. Choose the 'exploded' way for your forms.
The problem for the moment is that parameter is global for all your component. (Must be improved).
-> Choose 'exploded' in the 'Form style' parameter of the config
-> Download again
-> Copy the generated exploded form layout (template file)
-> Place it in the fork directory tree (same place... guess you know how the forks works)
That's it. (And don't forget to set 'Condensed' form style again in your config.)

So basically, now you can insert HTML before and after every single field.

Hope it helps.
Don't hesitate for further questions.
Kind Regards.
Coding is now a piece of cake
The administrator has disabled public write access.
The following user(s) said Thank You: msantana
Time to create page: 0.116 seconds

Get Started