close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

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

Thread began 9/11/2019 5:26 am by tony | Last modified 9/12/2019 10:12 am by Ray Borduin | 15 views | 3 replies |

tony

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

Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

tony

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>
Sign in to reply to this post

Ray BorduinWebAssist

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.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...