1

I would like to extend my component with some interaction. For this purpose I try to show fields in a form only if necessary. This works fine with showon-declarations in my form.xml.

Now I would like to show a field only if an AJAX-call, which is triggered on button-click, returns false.

Of course I could hard-code this in my layout-file (at least I think I could). But maybe there is a way I to

  • hide the element, which is declared in my form.xml
  • unhide this element if AJAX-call is returning false
  • Use the unhidden element in the form.xml as indicator for other elements like showon = 'myhiddenfield:1'

Any ideas about that?

1 Answer 1

2

Well you could attach your hide/show functions within the success parameter of the ajax method.

var showMethod = function () {
    // show method code...
}

var hideMethod = function () {
    // hide method code...
}

$.ajax({
    type    : 'POST',
    data    : request,
    success : function(response) {
        if (response.yourvalue == false) {
            showMethod();
        } else {
            hideMethod();
        }
    }
});

Since it looks like other fields need also to be affected if your main field will be visible or not, you can simply apply the same for all these fields at once, and don't wait to first switch the visibility of your main field to decide if the others should display.

Update:

I am bit confused now with what you want... You can't hide something in the xml, only attach certain parameters, that will translate to certain features for each field output. The showon will make a field visible when you have a certain value on another field. So the fields will be hidden till this occur. This is js and css. You can also use the Labelclass to attach specific classes to your fields https://docs.joomla.org/Form_field#Common_attributes. Generally, behind showing/hiding elements is css anyway.

On the other hand, I haven't try this but maybe you could simply set the showon parameter in those fields that you want to display, based on the value of your "ajax field" and see if those will appear when you get false.

4
  • Hi, that should work. But how can I hide the elements in my xml-form-declaration? I would love have it in my forms.xml because I could use it for showon-"dependencies" later on :-)
    – MyFault
    Apr 21, 2016 at 9:33
  • @MyFault - I added an update on my answer, not sure if it helps.
    – FFrewin
    Apr 21, 2016 at 9:52
  • Hi @FFrewin, thanks a lot for your answer. Well, I will be more specific: I would like to show a field that I defined in form.xml (Dropdown, Textfield, whatever) if my AJAX-call returns "false". It would be great if this is possible, because I could use this field to create other dependencies (showon) by simply using the XML-file. So if I understand you correctly I can not simply hide a field in my XML-file and unhide it on ajax-result == false.
    – MyFault
    Apr 21, 2016 at 10:22
  • This ajax call is updating another field or what? I guess you can create other dependencies on that field anyhow, independently from its visibility status. As said in my answer, you can try with the showon to see if the showon trigger would still work with when your other field would change. If the ajax call is not updating another field and simply happens on the layout, then I don't think it's possible for your other fields to know what is happening there. So you should do it with your js. Yet, what you are trying is not clear at least to me. I guess things are simpler than how they look now
    – FFrewin
    Apr 21, 2016 at 10:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.