Dependent dropdown menu (using framework plug-in) and form field state problem

Hello Ray,
I have a form that contains 3 main fields:
field1- main category (select - in master page)
field2- subcategory (dependent select - in plug-in page)
field3- textfield (disabled by default - in master page)

Fields1 and field2 are set as dependent dropdown menu using the framework plug-in. No problem here: it works.

But the field3 state should change his status (enabled or disabled) based on the value of the field2.

This is easy to do with databridge 1 (using the dependent dropdown menu server behaviour), but I have problems trying to do something similar with databridge 2 and the framework plug-in concept.

In DB1 I write a simple JS code that check the field2 onchange and set the field3 status accordingly.

<script>
	
$(window).load(function(){
	if ($("#field2").val() == '14') {
		$("#field3").prop( "disabled", false );
	    } else {
		$("#field3").prop( "disabled", true );
		$('#field3').val('')
		
	  }
});
	
	
$('select[name=field1]').change(function () {
    if ($("#field2").val() == '14') {
		$("#field3").prop( "disabled", false );
	    } else {
		$("#field3").prop( "disabled", true );
		$('#field3').val('')
		
	  }
});	
	
	
	
$('select[name=field2]').change(function () {
    if ($(this).val() == '14') {
		$("#field3").prop( "disabled", false );
	    } else {
		$("#field3").prop( "disabled", true );
		$("#field3").val('')
		
	  }
});
    </script>

But the same code doesn't work with DB2 and framework plug-in.


How can I check the select value in field 2?

Example:
if the select value field2 (in the plug-in page) is 10, the field3 (in the master page) should be enabled.
if the select value field2 (in the plug-in page) is other than 10, the field3 (in the master page) should be disabled.

Should I check the value on the master page or on the plug-in page?

Thanks in advance for any help.
Tony

You probably have to re-assign the change events every time the dependent dropdown re-loads. Do you have a url where I can see the complete code? That would let me give you a more precise answer.

Hello, Ray,
thanks for your reply.
I resumed one of your last post and solved the problem.

Basically I updated the onchange event so that it runs an additional function (bootstrapInit) every time it is fired;
then I created a function named boostrapInit that does the js code.
It works now.

Just a question: does the FRAMEWORK_LOAD_PLUG IN supports more that one additional parameter (in my example 'bootstrapInit')?
Is there any documentation abot the framework plug-in? i.e.: parameters, methods...

Here is the code I used succesfully, for others to help:

ONCHANGE EVENT

changed from:

onChange="framework_load_plugin_url('plugins/inc.pv.php',document.getElementById('registrazione_frm'),'pv','','')

to:

onChange="framework_load_plugin_url('plugins/inc.pv.php',document.getElementById('registrazione_frm'),'pv','','', bootstrapInit)

JS FUNCTION:

<script>
function bootstrapInit() {
	
if ($("#field2").val() == '14') {
		$("#field3").prop( "disabled", false );
	    } else {
		$("#field3").prop( "disabled", true );
		$('#field3').val('')
		
	  }

$('select[name=tipo_field2]').change(function () {
    if ($("#field2").val() == '14') {
		$("#field3").prop( "disabled", false );
	    } else {
		$("#field3").prop( "disabled", true );
		$('#field3').val('')
		
	  }
});	
	
	
	
$('select[name=field2]').change(function () {
    if ($(this).val() == '14') {
		$("#field3").prop( "disabled", false );
	    } else {
		$("#field3").prop( "disabled", true );
		$("#field3").val('')
		
	  }
});
	
};
		
</script>

This is the solution I was referring to. There are three undocumented methods in the load plugin code. There is an append instead of replace option to append the content to the div instead of replace it. This allows you to do an "infinite scroll" effect where the next page is added to the end while you scroll down instead of standard navigation. Then there are two functions to run before the content loads and after. You added the function to the after loads event, which is the appropriate place to assign events to new elements.