Cannot use dynamically loaded image selector after storing and loading a second time.
Permalink
I've spent a long time building a 'many items' (e.g. tabs) block for responsive BS3 websites whereby each item features a TinyMCE editor, three image selectors, three page selectors and various other stuff that enables the user to place fully responsive images with links and captions etc. The block's live item editor is a form that is populated by JS such that values are copied across from the item's hidden 'storage' form to the editor-form, edited, then copied back to the hidden form ready for the next item to be selected.
Because the image selectors need to have unique IDs I write the starting HTML for each selector in the hidden form with altered IDs and form names, then copy them over to the live editing form with a JS string replacement such that all the selector's IDs and its name are as they should be. When the item is saved I copy the selector's HTML back to the hidden form (with reverse string-replacement for the IDs and name) in case its needed again, and also copy the chosen fIDs separately, ready for insertion into the block's database record.
All works well except for one perplexing issue. Upon first use of any particular image selector, the widget allows the selection of an image, or its cancelation or replacement etc. as it should do. But once it has been stored and reloaded, clicking the selector does not bring up the tooltip popover interface that allows actions such as a new file to be chosen or the current one cleared. The widget is effectively dead.
The HTML code of the widget is exactly the same on both occasions and when it is in live use no other widget has the same ID. The TinyMCE editor does not have to have any content. The popover is not hidden behind the block's manager interface. To reiterate: the first time any widget is used (having been dynamically loaded from the hidden storage element) it works perfectly. The next time it is stored and then loaded again (with exactly the same HTML code) the 'actions' popover fails to appear when clicked.
Does anyone have any ideas what the problem might be, please?
Because the image selectors need to have unique IDs I write the starting HTML for each selector in the hidden form with altered IDs and form names, then copy them over to the live editing form with a JS string replacement such that all the selector's IDs and its name are as they should be. When the item is saved I copy the selector's HTML back to the hidden form (with reverse string-replacement for the IDs and name) in case its needed again, and also copy the chosen fIDs separately, ready for insertion into the block's database record.
All works well except for one perplexing issue. Upon first use of any particular image selector, the widget allows the selection of an image, or its cancelation or replacement etc. as it should do. But once it has been stored and reloaded, clicking the selector does not bring up the tooltip popover interface that allows actions such as a new file to be chosen or the current one cleared. The widget is effectively dead.
The HTML code of the widget is exactly the same on both occasions and when it is in live use no other widget has the same ID. The TinyMCE editor does not have to have any content. The popover is not hidden behind the block's manager interface. To reiterate: the first time any widget is used (having been dynamically loaded from the hidden storage element) it works perfectly. The next time it is stored and then loaded again (with exactly the same HTML code) the 'actions' popover fails to appear when clicked.
Does anyone have any ideas what the problem might be, please?
