locked
Deep Cloning an Object containing DOM elements RRS feed

  • Question

  • User438705957 posted

    I’m iterating thru an EF model and for each property that is a foreign key, I am building a select/dropdown element, $inputFor, by linking to the FT values thru an Ajax call.
    I store the element in an object with the property name being the EF Property name.

    storedElements[typeName] = $inputFor

    I then add the element to the page. The aim is to reuse the element later in another update dialogue, by just accessing the stored element by property name if it’s there, rather than making another Ajax call.

    $inputFor = StoredElements[dbField];

    I am deploying the same dropdowns on both a filters and update modal. All I have to do is prefix the name of the Id of $inputFor with either ‘Up’ or ‘Filter’.
    The issue is, when I change the Id in the Update dialogue, previously built elements I have added to the filters div, completely disappear from the div, presumably because they've had their Id changed.

    I have tried deep cloning StoredElements to a temporary object, through $.extend and the lodash library deepClone, and working with that copy, but the Id of the $inputFor element is changed in the original object regardless.

    It appears the stored element in either the original or the deep clone, is the same  DOM element, regardless of where it is stored.

    Monday, April 15, 2019 2:33 AM

All replies

  • User839733648 posted

    Hi Madog,

    According to your description, I'm sorry that I could not reproduce your issue successfuily.

    The issue is, when I change the Id in the Update dialogue, previously built elements I have added to the filters div, completely disappear from the div, presumably because they've had their Id changed.

    I'm confused about how is your page designed and what has happened that cause the div id disappear.

    If possible, please provide more details about your issue like related codes which could reproduce your problem.

    This will be easier for us to help with you.

    Best Regards,

    Jenifer

    Tuesday, April 16, 2019 6:04 AM
  • User-474980206 posted

    it not clear what you are doing. but dom elements are not javascript objects, and javascript can not clone them. to clone a dom object you need to use the dom api (.cloneNode()) 

    Tuesday, April 16, 2019 3:48 PM
  • User438705957 posted

    Fair enough. Sometimes its hard to explain what it is you are trying to achieve.
    Basically I am storing HTML select elements already built in an object, for re-use in a number of locations/modal builds. The elements would have to change Id depending on the location they are deployed.

    I will try the cloneNode() method as described.

    Thanks

    Wednesday, April 17, 2019 1:55 AM
  • User438705957 posted

    Thanks for responding Jenifer.

    I have taken a completely different tack, and stored HTML elements in their own object, according to the modal build they are required in.

    I have found out if you deep clone an object containing HTML elements, any change to those elements in either object are reflected in the other object.
    This confused me, since I thought it was a deep clone. I have since found out this is not possible, as the elements are DOM objects, not JavaScript objects.
    Changing Id made previously stored elements disappear and now I understand why.

    Please see my response below re cloneNode() that I will try to use.

    Wednesday, April 17, 2019 2:01 AM
  • User839733648 posted

    Hi Madog,

    You description is clear and cloneNode() may be a good choice.

    If you have met issues, you could come back and create a thread to ask us for help.

    Best Regrads,

    Jenifer

    Wednesday, April 24, 2019 6:25 AM