XF 2.0 AdminCP: Add/Remove form elements via JS?

[DragonByte Tech]

Is there a function in the JS core that allows us to add/remove form elements on the fly?

I have a specific inputGroup that I want to be able to add to the form via the click of a button, and I'd like to be able to click a button to remove already existing inputGroup elements from within a formRow.

I know how to do it myself via jQuery, I just thought I'd throw the question out there just in case there's a built-in function hidden somewhere that speeds the process up.

Thanks!


Fillip

 

[DragonByte Tech]

If anyone else is interested in this, I'll post a few snippets.

In order to make sure you initialise stuff correctly, these two functions should be called:

            XF.activate($newHtml);
            XF.layoutChange();

Where $newHtml is a jQuery reference to the new DOM element you just inserted. For instance, if you call $newHtml.appendTo(this.$container); to add it to a container element, you'd call those two functions afterwards.

Also, if you are adding/removing elements from the DOM via AJAX - for instance, you click a button which generates default placeholder data which is then inserted into the DOM and/or clicking a button to delete the DOM element and using AJAX to delete it from the database, here's an example of the AJAX call:

            XF.ajax(
                'post',
                this.manageUrl,
                { delete: costId },
                function (data)
                {
                    if (data.delete)
                    {
                        self.removeCostRow($row);
                    }
                },
                { skipDefaultSuccess: true }
            );

The skipDefaultSuccess ensures the flash banner doesn't display, and any redirects from your AJAX call is also prevented.

I think that concludes it for new things I learned while developing this feature. Special thanks to the attachment manager JS code which I learned all of the above from


Fillip