Hello skidowitz,
it is possible to configure a button with its own button text that triggers the reloading of a 'Select SQL' field.
Again, sorry for the late reply, but I needed to think about this for some time first!
The solution works fine in my example below.
It can be achieved through pure configuration.
The
form 'test-sql-tables':
Template is standard Cassiopeia with no special configuration regarding layout.
This is a Bootstrap 5 layout.
The
field 'checkbox1':
Is a checkbox that is used alone to create the button.
This is done by specifying your own Bootstrap 5 classes in the field configuration.
Your value is irrelevant.
The CSS classes used are explained here:
getbootstrap.com/docs/5.0/forms/checks-radios/#toggle-buttons
The
field 'text1':
Is a simple text field and is used for demonstration purposes in the SQL of the field 'sql-checkbox1'.
The
field 'sql-checkbox1':
This is the actual 'Select SQL' field.
It uses the value of field 'text1' in its SQL statement for demonstration purposes.
Its reloading is triggered by the field 'checkbox1', which is displayed with Bootstrap 5 as a button.
It is also triggered by the 'radio1' and 'radio2' fields for demonstration purposes.
The reloading becomes visible by the fact that the displayed time is updated after clicking on the 'Update sql-checkbox1' checkbox button.
The current text from the 'text1' field is also used for the display.
Screen Shots:
The screen shot of the displayed 'test-sql-tables' form:
vi-solutions.de/forum-uploads/reload-on-button-click_form.png
The screen shot of the configuration of the field 'checkbox1':
vi-solutions.de/forum-uploads/reload-on-..._field_checkbox1.png
The screen shot of the configuration of the 'text1' field:
vi-solutions.de/forum-uploads/reload-on-...lick_field_text1.png
The screen shot of the configuration of the 'sql-checkbox1' field:
vi-solutions.de/forum-uploads/reload-on-...ld_sql-checkbox1.png
Any other UI element
If any other UI elements should lead to the 'Select SQL' field being reloaded when clicked, then this is also possible.
In this case, a really small snippet of PHP code (or the JavaScript part of it) needs to be included in the template in one way or another.
But it is possible.
For example, for the 'checkbox1' field, the additional PHP code in the template would be something like the following.
However, it is not necessary in the above case.
Code:
?><script>
jQuery(document).ready(function() {
jQuery('#form15checkbox1lbl').click(function() {
event.preventDefault();
$('#field149').trigger("change");
});
});
</script><?php
The jQuery selectors refer to the HTML IDs of the affected UI elements.
'15' = the form ID.
'checkbox1' = the field name of the trigger.
'form15checkbox1lbl' = the HTML ID of the trigger HTML element (can be any UI element)
'149' = the field ID of a valid field to trigger the reload (must be configured as a trigger field in the reload field).
The trigger HTML element:
Code:
<label class=" visCSSlabel visCheckbox btn btn-primary" id="form15checkbox1lbl" for="field149">Update sql-checkbox1</label>
The reload HTML element
Code:
<input class=" visCSStop10 btn-check" id="field149" data-error-container-id="fc-tbxfield149" aria-labelledby="form15checkbox1lbl" name="form15checkbox1" value="1" type="checkbox">
Kind regards, Ingmar
I recommend you the new and up-to-date documentation for Joomla 4:
.
