Edit History

Pedro Lima · November 18, 2019

First, let me thank you @razaro

Then, let me leave a reference for future visitors from what I've been trying during these last days.

After a lot of trial and errors, on my little time for this matter, I now understand that in order to call CSS or JS in backoffice, I should first put this on the "public function install()", right in the end:

return parent::install() && 
$this->registerHook('backOfficeHeader') &&
$this->registerHook('displayBackOfficeHeader');

After that, I can then create a function to use CSS or JS in backoffice, and for that one should do something like so:

public function hookBackOfficeHeader($params)
{
    if (_PS_VERSION_ < '1.5'){
        Tools::addJS(($this->_path).'views/js/custom.js', 'all');
        Tools::addCSS(($this->_path).'views/css/custom.css', 'all');
    }else{
        $this->context->controller->addJquery();
        $this->context->controller->addJS($this->_path.'views/js/custom.js', 'all');
        $this->context->controller->addCSS($this->_path.'views/css/custom.css', 'all');
    }
}

So now back to the topic of my question, starting from your answer.

On 11/11/2019 at 8:39 AM, razaro said:


$(document).ready(function() {

    $(document).on('change', "input[name='SELECT_OPT']", function() {
        if ( contition ) {
        	$('input[name="USERNAME"]').hide()
            $('input[name="PASSWORD"]').hide();
        } else {
        	$('input[name="USERNAME"]').show()
            $('input[name="PASSWORD"]').show();
        }
    });

});

Just example code you probably need bit more code.

It is indeed an example code and I thank you for that because thanks to this, I could start looking for solutions. Not the ones I thought in the first place, but hey it's a start!

Unfortunately, the code like this it would never work, even as example code.

This is my code "working":

$(document).ready(function() {
    var opt = jQuery("#SELECT_OPT").val();
    $("#SELECT_OPT").on('change', function(e) {
        opt = jQuery("#SELECT_OPT").val();
        if ( opt == "optone" ) {
        	$('input[name="USERNAME"]').show()
            $('input[name="PASSWORD"]').show();
        } else {
        	$('input[name="USERNAME"]').hide()
            $('input[name="PASSWORD"]').hide();
        }
    });
});

Problem with this code, specifically for my use case, is that although it works, it does not work as intended.

When "Option 1" is selected, fields appear and that's all ok.

But when "Option 2" is selected, input fields do not appear and that, apparently, should be ok... but it's not! As you can see, labels are still there:

So, conclusion, this is my proper working JS code:

$(document).ready(function() {
    var opt = jQuery("#SELECT_OPT").val();
    $("#SELECT_OPT").on('change', function(e) {
        opt = jQuery("#SELECT_OPT").val();
        if ( opt == "optone" ) {
        	$('input[name="USERNAME"]').parent().parent().parent().show()
            $('input[name="PASSWORD"]').parent().parent().parent().show();
        } else {
        	$('input[name="USERNAME"]').parent().parent().parent().hide()
            $('input[name="PASSWORD"]').parent().parent().parent().hide();
        }
    });
});

And there we go!

I just came here to leave my solved case because a lot of times I check questions like mine and then, no solution. Or when it has a solution, it's not clear and it does not help so then we need to scratch the web to find different answers to fill the puzzle.

Well, this is it. See you guys next time and thank you very much once again.

Pedro Lima · November 18, 2019