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.
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);
});
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>");
ASKER
Hi
I did that. both with box and box.html()
box still reports object object . box.html is nothing
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);
});
You can't add the object to the html. Do this:
box.html()
box.html()
Ahh I just noticed you tried that.
var box = $(this).clone(true);
...
box.html();
...
box.html();
ASKER
so i have to insert it to the dom before inserting the box? i cant do it in the variable?
ASKER
you can do it like so
but it is not ideal :(
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");
});
look at .clone(true) you have .clone()
ASKER
that doesnt really do any difference
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thanks so much
And change box to box.html()