I'm creating a drag and drop layout builder for creating dynamic layouts in a CMS I'm building. It's very beta but the majority of it is working great. Due to the dynamic nature, I find myself having to write a lot of custom javascript or jQuery code to make certain things work because of Wappler's inability to natively target or trigger elements based on dynamic id="" tags or by classes. I'm very familiar with writing this type of code from when I was coding in PHP and needed this type of functionality, but it would be very productive (and awesome) if we could do it the "wappler" way. Expecially for those that aren't as familiar with javascript or jQuery. Unless that ability is already in Wappler and I don't know how to tap into it?
For instance, in this layout I have a "SCRUD alert" element.
When the scrud alert is rendered to the user, it has a dynamic id like so:
dmx-bind:id="'scrud-alert'+formId"
This way if I have multiple different forms on the same page, the correct alert can be targeted. In order to show or hide it on error or success of the form submit, I currently run the following in a run javascript step on the form actions:
/*#####################################
### SHOW / HIDE SCRUD ALERTS
#####################################*/
function ezphpzShowHideScrudAlert(formId, type, message, showHide) {
jQuery('#scrud-alert' + formId + ' p').html(message);
jQuery('#scrud-alert' + formId).addClass('alert-' + type);
if (showHide == 'show') {
jQuery('#scrud-alert' + formId).show();
} else {
jQuery('#scrud-alert' + formId).show();
}
}
Even better would be a way to target based on class (which is actually how I'm doing it now) in case the user decides to put multiple instances of the alert for a particular form on the same page to have them all be targeted at once. For instance if the form was really long, the alert is put at the top of the form as well as the bottom. Then shown or hidden based on class cause they would all have the same class but different id tags
/*#####################################
### SHOW / HIDE SCRUD ALERTS
#####################################*/
function ezphpzShowHideScrudAlert(formId, type, message, showHide) {
jQuery('.scrud-alert' + formId + ' p').html(message);
jQuery('.scrud-alert' + formId).addClass('alert-' + type);
if (showHide == 'show') {
jQuery('.scrud-alert' + formId).show();
} else {
jQuery('.scrud-alert' + formId).show();
}
}
Hope this makes sense and hope it's possible to add without too much trouble.
Thanks in advance,
Twitch