Link to home
Start Free TrialLog in
Avatar of tim_carter
tim_carter

asked on

jquery clone object and insert into variable before inserting back to dom

Hi guys

i am trying to copy a input box and clone it into the box variable. and then insert it into my newObject variable before putting in into the dom again. but how do i do that? when i do it like i have done in my example it just writes..

[object object]. i need it to be executed of course.
$(this).each(function(){
        var inputWidth = $(this).width();
        var box = $(this).clone();
        
        var newObject = "<div style='float:left;'>"
                      + "<div style='float:left;background:url("+options.leftImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "<div class='inputContainer' style='float:left;background:url("+options.middleImage+") 0px 0px repeat-x;height:"+middleImage.height+"px;width:"+inputWidth+"px;'>"
                      + box
                      + "</div>"
                      + "<div style='float:left;background:url("+options.rightImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "</div><br>";
        
        
        $(this).replaceWith(newObject);
        
    });

Open in new window

Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Wrap in $()
And change box to box.html()
Like this
var newObject = $("<div style='float:left;'>"
                      + "<div style='float:left;background:url("+options.leftImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "<div class='inputContainer' style='float:left;background:url("+options.middleImage+") 0px 0px repeat-x;height:"+middleImage.height+"px;width:"+inputWidth+"px;'>"
                      + box.html()
                      + "</div>"
                      + "<div style='float:left;background:url("+options.rightImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "</div><br>");

Open in new window

Avatar of tim_carter
tim_carter

ASKER

Hi

I did that. both with box and box.html()

box still reports object object . box.html is nothing
$(this).each(function(){
        var inputWidth = $(this).width();
        var box = $(this).clone();
        
        var newObject = $("<div style='float:left;'>"
                      + "<div style='float:left;background:url("+options.leftImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "<div class='inputContainer' style='float:left;background:url("+options.middleImage+") 0px 0px repeat-x;height:"+middleImage.height+"px;width:"+inputWidth+"px;'>"
                      + box.html()
                      + "</div>"
                      + "<div style='float:left;background:url("+options.rightImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "</div><br>");
        
        
        $(this).replaceWith(newObject);
        
    });








$(this).each(function(){
        var inputWidth = $(this).width();
        var box = $(this).clone();
        
        var newObject = $("<div style='float:left;'>"
                      + "<div style='float:left;background:url("+options.leftImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "<div class='inputContainer' style='float:left;background:url("+options.middleImage+") 0px 0px repeat-x;height:"+middleImage.height+"px;width:"+inputWidth+"px;'>"
                      + box
                      + "</div>"
                      + "<div style='float:left;background:url("+options.rightImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "</div><br>");
        
        
        $(this).replaceWith(newObject);
        
    });

Open in new window

You can't add the object to the html. Do this:

 box.html()
                     
Ahh I just noticed you tried that.
var box = $(this).clone(true);

...

box.html();
so i have to insert it to the dom before inserting the box? i cant do it in the variable?
you can do it like so

but it is not ideal :(
$(this).each(function(){
        var inputWidth = $(this).width();
        var box = $(this).clone();
        
        var newObject = $("<div style='float:left;'>"
                      + "<div style='float:left;background:url("+options.leftImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "<div class='inputContainer' style='float:left;background:url("+options.middleImage+") 0px 0px repeat-x;height:"+middleImage.height+"px;width:"+inputWidth+"px;'>"
                      + "</div>"
                      + "<div style='float:left;background:url("+options.rightImage+") 0px 0px no-repeat;height:"+rightImage.height+"px;width:"+rightImage.width+"px;'></div>"
                      + "</div><br>");
        
        
        $(this).replaceWith(newObject);
        $('.inputContainer').html($(this).clone()).removeClass("inputContainer");
        
        
    });

Open in new window

look at .clone(true) you have .clone()
that doesnt really do any difference
ASKER CERTIFIED SOLUTION
Avatar of Proculopsis
Proculopsis

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
thanks so much