Embedding code into page after initialisation

[realtekParticipant]

Hi,

I have written a dynamic page which allows the user to manually add and removed HTML fields, during this process the elemented are initialised with the jqWidgets components and then the page gets saved.

These pages can then be opened and are embedded inside one DIV tag.

My question is, do the widgets needs to be initialised again or not? After looking at the code, the only changes I can see during the initialisation process is that class names are added to the elements to be come a jqxWidget.

My question arises because after doing this, I cannot get the jqxDateTime calendar picker to open when clicking the calendar button.

If just having the class names are correct and is all thats required then my issue is somewhere else.

Thanks!

[Peter StoevKeymaster]

Hi realtek,

It’s not so simple as you may think. We not only add/remove CSS class names, but we also create additional HTML elements, remove HTML Elements, bind to events, handle those events and so on. If you make DOM operations which affect the widgets HTML, then you probably have to create or recreate them when necessary.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[realtekParticipant]

Thank you Peter,

I will look at changing my code to just initialise them after loading instead of before it is modified by the user and saved.

Regards

[realtekParticipant]

Hi Peter,

I can confirm this is the issue. If I do not initialise the objects at first but then initialise them later on when the page is read from my source it works fine.

However, I really wanted them initialised when they are added so the user has a good preview of what they will look like.

I think the best method is to either destroy the widget (can’t remember if that removes the object) or strip out the classes when the page is saved.

However, do you know why trying to initialise the jqxWidgets a second time does not resolve the issue? It does seem to set the options again for the object as I tried showing the calendar button on the second initialisation, however you still cannot click on it.

If I remove the first initialisation it works.

Is there some checking you are doing to make sure the object has not already been initialised?

Thanks

[Peter StoevKeymaster]

Hi realtek,

Widgets can be constructed 1 time calling their constructor function as shown in Examples & Documentation. You can’t remove their HTML Elements and expect that when you call the function again, they will be re-constructed. If you make modifications on your page, create the widgets when necessary or destroy them and create again as shown in the Docs.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[realtekParticipant]

Thank you Peter, yes this makes sense.

How can a widget be created after calling ‘destroy’? I have tried this on this example:

http://jsfiddle.net/NcaUt/376/

But it does not re-create it, is the element removed from the DOM? If so, i’m not sure how this can be achieved.

Thanks

[Peter StoevKeymaster]

Hi realtek,

You should have a DIV tag to create the widget. After “destroy”, the widget is removed from the DOM.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[realtekParticipant]

Hi Peter,

Is there anyway I can remove everything from the tag/DOM which was added when the component was initialised without calling ‘destroy’ ?

Its very difficult for me to recreate the DIV tags as there are dynamically added by the user.

The best case I can think of is to get the values I know exist and reconstruct the HTML without the jqx stuff but its will not be easy!

Thanks

[Peter StoevKeymaster]

Hi realtek,

You will have to write probably something on your own. We have “destroy” method only built-in and it does what I wrote you.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[realtekParticipant]

Thanks Peter, I rewrote everything and everything is now stored in the database and is all initialised with jqwidgets during runtime, seems very responsive and solves some of my other issues.

Thanks

[Author]

Posts