Element Javascript not changing Yes/No element

[Bren]

Hello all.
I added the following javascript to 3 elements that all relate to the change of state of a yes/no element on the same form record; but when any of the changes are made nothing changes on the yes/no element. Not sure why.

var $materialstatus = $('bw_projects___material_status');
var $permitstatus = $('bw_projects___permit_status');
var $drstatus = $('bw_projects___d_r_status');
if (($materialstatus == '4') && (($permitstatus == '1') || ($permitstatus == '5')) && (($drstatus == '1') || ($drstatus == '4'))) {
   this.form.formElements.get('bw_projects___ready_to_schedule').update('1');
}

Any suggestions.
Thanks in advance.

 

[baderajhar]

In my case, I used jQuery to change class for the selected option (for example, make yes green and no grey). Additionally, I add another jQuery to make the option checked as follows:
1- Modify Class for coloring:

jQuery("#yourlist___yourelement_input_1").parent("label.fabrikgrid_1").addClass("active btn-success");
        jQuery("#yourlist___yourelement_input_0").parent("label.fabrikgrid_0").removeClass("active btn-danger");

2- Make it selected:

jQuery("#yourlist___yourelement_input_1").prop("checked", true);

 

[Bren]

Thanks you for sharing baderajhar; but I think we're talking 2 different things. Looks like you're referring to JS for the Fabrik list. I'm referring to the JS section on the element; which I believe only releates to Fabrik forms.

 

[baderajhar]

I'm referring to JS for the Fabrik form, you can use JS functions inside a JS file under (/components/com_fabrik/js/) and name it (form_x.js) where x is your form id and then form JS section on the element you can call the function based on some action "yourfunction()". I used this to update yes/no element within three lines as below.

jQuery("#yourlist___yourelement_input_1").parent("label.fabrikgrid_1").addClass("active btn-success");
jQuery("#yourlist___yourelement_input_0").parent("label.fabrikgrid_0").removeClass("active btn-danger");
jQuery('#yourlist___yourelement_input_1').prop("checked", true);

To return it back to No, as follows:

 jQuery("#yourlist___yourelement_input_1").parent("label.fabrikgrid_1").removeClass("active btn-success");
jQuery("#yourlist___yourelement_input_0").parent("label.fabrikgrid_0").addClass("active btn-danger");
jQuery("#yourlist___yourelement_input_0").prop("checked", true);

Hope this could help..

 

[cheesegrits]

I've committed a first attempt at fixing the CSS handling on button groups, for the yesno:

https://github.com/Fabrik/fabrik/commit/bedcd4ec85499f8409d98e0da34ce5720c74321b

-- hugh

 

[Bren]

Thanks guys. I tried both suggestions; but they didn't help the CSS on the form when a Yes or No is selected. They both still appear grey until after submitting the form; like it was doing before adding the JS.
I then added my JS for the change I was asking about; but still nothing when I test it. Below is what I currently have in my new form_6.js file in the /components/com_fabrik/js/ directory.

//Below updates the ready to schedule option if the other related elements are selected properly
var $materialstatus = $('bw_projects___material_status');
var $permitstatus = $('bw_projects___permit_status');
var $drstatus = $('bw_projects___d_r_status');
if (($materialstatus == '4') && (($permitstatus == '1') || ($permitstatus == '5')) && (($drstatus == '1') || ($drstatus == '4'))) {
   this.form.formElements.get('bw_projects___ready_to_schedule').update('1');
}
//Below updates the CSS on the Yes button on the YesNo element in the form
jQuery("#bw_projects___ready_to_schedule_input_1").parent("label.fabrikgrid_1").addClass("active btn-success");
jQuery("#bw_projects___ready_to_schedule_input_0").parent("label.fabrikgrid_0").removeClass("active btn-danger");
jQuery('#bw_projects___ready_to_schedule_input_1').prop("checked", true);
//Below updates the CSS on the No button on the YesNo element in the form
jQuery("#bw_projects___ready_to_schedule_input_1").parent("label.fabrikgrid_1").removeClass("active btn-success");
jQuery("#bw_projects___ready_to_schedule_input_0").parent("label.fabrikgrid_0").addClass("active btn-danger");
jQuery("#bw_projects___ready_to_schedule_input_0").prop("checked", true);

Any suggestions?
Thanks in advance.

 

[baderajhar]

In my case, I included all in the form_x.js as follows:

function daysandhours()
  {
var everyday= '';
        if(jQuery("#activities___everyday_input_1").prop('checked') == true)
            {
                everyday='1';
            }
        if(jQuery("#activities___everyday_input_0").prop('checked') == true)
            {
                everyday='0';
            }

    if (everyday=='1')
      {
jQuery("#activities___working_on_saturday_input_1").parent("label.fabrikgrid_1").addClass("active btn-success");
jQuery("#activities___working_on_saturday_input_0").parent("label.fabrikgrid_0").removeClass("active btn-danger");
jQuery("#activities___working_on_saturday_input_1").prop("checked", true);
}

else if (everyday=='0')
      {
jQuery("#activities___working_on_saturday_input_1").parent("label.fabrikgrid_1").removeClass("active btn-success");
jQuery("#activities___working_on_saturday_input_0").parent("label.fabrikgrid_0").addClass("active btn-danger");
jQuery("#activities___working_on_saturday_input_0").prop("checked", true);
}

Then, in the (Everyday) element -> Javascript -> Javascript Code = daysandhours();

 

[cheesegrits]

Well, for starters ...

var $materialstatus = $('bw_projects___material_status');

... doesn't get the value of a field, it just gets you the DOM element.

And ...

this.form.formElements.get('bw_projects___ready_to_schedule').update('1');

... will error out if it's just in a form_X.js file, as 'this' has no context.

is that the whole of the file, or just a portion of it?

-- hugh

 

[Bren]

Thanks for the tips guys. Ya, I should have noticed my mistakes. I've been rusty lately... I couldn't get my form_6.js file to cooperate. So, I ended up just putting the JS in the element settings on the change event of each of the dropdown elements with the following and, yay, it worked!

var $materialstatus = this.form.formElements.get('bw_projects___material_status').getValue();
var $permitstatus = this.form.formElements.get('bw_projects___permit_status').getValue();
var $drstatus = this.form.formElements.get('bw_projects___d_r_status').getValue();
if (($materialstatus == '4') && (($permitstatus == '1') || ($permitstatus == '5')) && (($drstatus == '1') || ($drstatus == '4'))) {
  this.form.formElements.get('bw_projects___ready_to_schedule').update('1');
}
else {
  this.form.formElements.get('bw_projects___ready_to_schedule').update('0');
}

Then I tried the following JS in the element settings on the click event of the yesno element to resolve the css / grey issue and , yay, it worked, too!

var $readytoscheduleyesno = this.form.formElements.get('bw_projects___ready_to_schedule').getValue();
if ($readytoscheduleyesno == '1') {
  this.form.formElements.get('bw_projects___ready_to_schedule').update('1');
}
else {
  this.form.formElements.get('bw_projects___ready_to_schedule').update('0');
}

Thanks, again, for the great support and guidance guys. I appreciate it.