[Need Help] JS Disable Select2 Not Working

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
Post Reply
tandrew
Posts: 12
Joined: 2018-09-26 12:46

[Need Help] JS Disable Select2 Not Working

Post by tandrew » 2018-09-26 23:39

Hi to all experts out there,

Need some help on the matter below.

JS using hook in table_dv and it's not working

Code: Select all

	if( ($memberInfo['custom'][3] == 'REQUESTOR') ){
		 $html .= <<<EOC
					<script>
						\$j(function(){
						\$j('#employee_number-container').select2('readonly', true);
						\$j('#update').hide();
						})
					</script>
EOC;
		}	
	}

Table Format:

employee_number is a lookup drop down field from another table (field)

the above \$j('#employee_number-container').select2('readonly', true); was suggested by Ahmad and it's not working.

i have tried the following:

\$j('#employee_number').select2('readonly', true); [not working]
\$j('#employee_number').prop('readonly', true); [not working]
\$j('#employee_number').attr('readonly', true); [not working]
\$j('#employee_number').select2('disabled', true); [not working]
\$j('#employee_number').prop('disabled', true); [not working]
\$j('#employee_number').attr('disabled', true); [not working]
\$j('#employee_number').select2('enabled', false); [not working]
\$j('#employee_number').prop(''enabled', false); [not working]
\$j('#employee_number').attr(''enabled', false); [not working]

Using AppGini 5.72 (rev 1038)

Need some enlightenment from any expert out there.

TQ in advance.

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 377
Joined: 2018-04-01 10:12

Re: [Need Help] JS Disable Select2 Not Working

Post by pböttcher » 2018-09-27 08:21

Hi,

can you try

$j('#employee_number-container').prop('readonly', true);

tandrew
Posts: 12
Joined: 2018-09-26 12:46

Re: [Need Help] JS Disable Select2 Not Working

Post by tandrew » 2018-09-27 08:24

pböttcher wrote:
2018-09-27 08:21
Hi,

can you try

$j('#employee_number-container').prop('readonly', true);
Hi pböttcher

Yup. It's working.
Din't thought about it.

Thanks !

Regards,

Andrew.

grimblefritz
Veteran Member
Posts: 318
Joined: 2015-12-23 16:52

Re: [Need Help] JS Disable Select2 Not Working

Post by grimblefritz » 2018-12-28 15:38

I don't find that method to work either.

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 377
Joined: 2018-04-01 10:12

Re: [Need Help] JS Disable Select2 Not Working

Post by pböttcher » 2018-12-29 09:48

Can you share what browser/appgini versions you use

grimblefritz
Veteran Member
Posts: 318
Joined: 2015-12-23 16:52

Re: [Need Help] JS Disable Select2 Not Working

Post by grimblefritz » 2018-12-29 13:06

AppGini 5.72
Chrome 71

I did find a kludge by identifying a parent element and then setting every child select read-only.

$j("#parent-element select").select2("read-only", true)

This works for me only because when the read-only condition is needed it includes every select2. I'd still be up a creek if I needed to read-only some and not others.

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 377
Joined: 2018-04-01 10:12

Re: [Need Help] JS Disable Select2 Not Working

Post by pböttcher » 2018-12-30 09:02

Hi,

you may try $j("#ELEMENT-container").attr("disabled",true);

Where ELEMENT is your select-box.

grimblefritz
Veteran Member
Posts: 318
Joined: 2015-12-23 16:52

Re: [Need Help] JS Disable Select2 Not Working

Post by grimblefritz » 2018-12-30 12:12

I have found that using #ELEMENT-container does not work. I've tried setting multiple attributes using that selector and jquery seems never to find the select2. That's why I resorted to the "#parent select" selector method. However, that's a hack as it operates on EVERY select that's a child of the parent. In my case, for this one app, that's acceptable. In other apps, it may arise that the need to target a specific select2 is necessary.

I wonder, perhaps the #ELEMENT-container method doesn't work because my app detail view is tabbed? I'll have to check that when I get minute. But, tabbed detail view shouldn't affect things like jquery selectors. Everything but select2 is accessible as normal.

Excuse the rant, but:

I wish there was an option in AppGini to use either select2 or a regular select. I do not like select2. In cases where the options are perhaps 50 or less. It is too much for what's needed and a select would actually be the preferred tool. Not to mention that it would be easier to manipulate with jquery. If the list is hundreds or thousands of options, then yes, select2 is great. But in my apps I rarely have to deal with even 50 options, other than for US state selectors.

Select is maybe not as pretty or as feature rich as select2, but sometimes it is the better tool.

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 114
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: [Need Help] JS Disable Select2 Not Working

Post by jsetzer » 2018-12-30 14:53

Certain changes can only be made after initial scripts have finished completely.

Can you please check, if your select2 container already exists at the time you try to disable it. Please try the following code:

Code: Select all

var e = $j("#ELEMENT-container");
// replace ELEMENT by your fieldname 
console.log(e.length);
e.attr("disabled",true);
Watch your console output. There should be "1" written. If there is "0", the select2 does not exists (check the fieldname) or has not been set up completely. This means you are changing the attribute too early, even before AppGini/Select2 have finished rendering the dropdown control.

Best Regards,
Jan

https://www.bizzworxx.de/en/appgini-improvements/

grimblefritz
Veteran Member
Posts: 318
Joined: 2015-12-23 16:52

Re: [Need Help] JS Disable Select2 Not Working

Post by grimblefritz » 2018-12-30 16:39

Zero. But...

Well after (minutes) the page has loaded, in the console:

Code: Select all

// simple input field - found by selector
$j("#vehicle_model")
    n.fn.init [input#vehicle_model.form-control, context: document, selector: "#vehicle_model"]
    0: input#vehicle_model.form-control
    context: document
    length: 1
    selector: "#vehicle_model"
    __proto__: Object(0)
// select2 field - not found
$j("#vehicle_tag_state")
    n.fn.init {context: document, selector: "#vehicle_tag_state"}
    context: document
    selector: "#vehicle_tag_state"
    __proto__: Object(0)
// select2 field-container - not found
$j("#vehicle_tag_state-container")
    n.fn.init {context: document, selector: "#vehicle_tag_state-container"}
    context: document
    selector: "#vehicle_tag_state-container"
    __proto__: Object(0)

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 377
Joined: 2018-04-01 10:12

Re: [Need Help] JS Disable Select2 Not Working

Post by pböttcher » 2018-12-31 10:08

Hi,

so it looks like the issue is that your javascript is running to early. You might check, after the page is loaded, that you run the jquery directly in the console to see if the statement to make the select2 box read-only works for you. If that works, you might want to to add a check if the select2 already exisits and if not, add a wait till the select2 exists before you change it to read-only.

grimblefritz
Veteran Member
Posts: 318
Joined: 2015-12-23 16:52

Re: [Need Help] JS Disable Select2 Not Working

Post by grimblefritz » 2018-12-31 13:12

Please re-read my last post. I've already tried all of that.

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 377
Joined: 2018-04-01 10:12

Re: [Need Help] JS Disable Select2 Not Working

Post by pböttcher » 2019-01-02 18:10

Hi,

if I read the output correctly it says

select2 field - not found

to at the time you inspect the DOM, the select2 is not (yet) created.

Can you run the

$j("#vehicle_tag_state-container")

and

$j("#vehicle_tag_state-container").attr("disabled",true);

after the page is loaded in the console and post the results?
Maybe you can also post a screenshot

User avatar
jsetzer
AppGini Super Hero
AppGini Super Hero
Posts: 114
Joined: 2018-07-06 06:03
Location: Kiel, Germany
Contact:

Re: [Need Help] JS Disable Select2 Not Working

Post by jsetzer » 2019-01-02 18:48

From my experience the rendering of dropdowns will NOT be finished on page-load event due to AJAX functionality. It's the same with children-tabs.

So $j(function() { console.log(...)} ); will not help at all, I'm afraid.

Some developers are using a timer and do the changes n milliseconds after page-load. Personally I don't like that, because due to low network bandwidth it may take many, many seconds until the AJAX call has finished. Anyway, it should work.

Just a thought: If disabling that dropdown is so important for your app, I recommend NOT to rely on client-side-disabling (because it can be hacked in every modern browser easily). Can't you define the field as "Readonly" in AppGini itself? Just a thought.

Regards,
Jan

peebee
AppGini Super Hero
AppGini Super Hero
Posts: 207
Joined: 2013-03-21 04:37

Re: [Need Help] JS Disable Select2 Not Working

Post by peebee » 2019-01-02 22:27

Not sure if this is going to help in every situation but are you aware that replacing <%%COMBO(fieldname)%%> in the desired template with <%%COMBOTEXT(fieldname)%%> returns a readonly text output for select2 dropdowns?

https://forums.appgini.com/phpbb/viewtopic.php?t=1110

https://forums.appgini.com/phpbb/viewtopic.php?t=1204

grimblefritz
Veteran Member
Posts: 318
Joined: 2015-12-23 16:52

Re: [Need Help] JS Disable Select2 Not Working

Post by grimblefritz » 2019-01-08 21:06

Thanks everyone. For now - in order to move on to other things - I'll stick with my solution.

Jan, it's an internal app in a small company, so I'm not too worried about anyone hacking. If they do and get caught, the owner would very likely terminate them. It's just a convenience effect anyway.

peebee, thanks, but not applicable. It needs to change in response to other field and button inputs.

Maybe the boss man will find a way to better control select2 from the js hooks.

Post Reply