[jQuery] cant append() form objects
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META http-equiv=Content-Type content="text/html; charset=us-ascii">
<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY>
<DIV dir=ltr align=left><SPAN class=428353603-26012007><FONT
color=#000080>Thanks. That does seem to work when it stands
alone. I am having a hard time making it work in my actual
environment however. This test is overly simplified to what I
actually need. I tried using your method but I am missing something.
I am not sure I entirely understand the use of $ in front of the ojbect name
(like $layer). Is that just a preference or does the $ do something in
jquery that I should be aware of? Given your code below, I should be able
to reference the form object like this</FONT></SPAN></DIV>
<DIV dir=ltr align=left><SPAN class=428353603-26012007><FONT
color=#000080></FONT></SPAN> </DIV>
<DIV dir=ltr align=left><SPAN class=428353603-26012007><FONT
color=#000080>tst=new appLayer('Test'); //create layer and layer
objects.</FONT></SPAN></DIV>
<DIV dir=ltr align=left><FONT color=#000080><SPAN
class=428353603-26012007></SPAN><SPAN
class=428353603-26012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT color=#000080><SPAN
class=428353603-26012007>tst.$form // this is the form
object</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT color=#000080><SPAN
class=428353603-26012007>alert(tst.$form.id) // this should alert the id of the
form. right?</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT color=#000080><SPAN
class=428353603-26012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT color=#000080><SPAN class=428353603-26012007>For
some reason its not working that way.</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT color=#000080><SPAN
class=428353603-26012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT color=#000080><SPAN
class=428353603-26012007>Thanks again for your efforts.</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT color=#000080><SPAN
class=428353603-26012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT color=#000080><SPAN
class=428353603-26012007>Jeremy</SPAN></FONT></DIV>
<DIV dir=ltr align=left><FONT color=#000080><SPAN
class=428353603-26012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT color=#000080><SPAN
class=428353603-26012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT color=#000080><SPAN
class=428353603-26012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT color=#000080><SPAN
class=428353603-26012007></SPAN></FONT> </DIV>
<DIV dir=ltr align=left><FONT color=#000080><SPAN
class=428353603-26012007> </DIV></SPAN><SPAN
class=428353603-26012007></SPAN></FONT><BR>
<DIV class=OutlookMessageHeader lang=en-us dir=ltr align=left>
<HR tabIndex=-1>
<FONT face=Tahoma size=2><B>From:</B> Blair McKenzie [mailto:shib71@gmail.com]
<BR><B>Sent:</B> Thursday, January 25, 2007 6:22 AM<BR><B>To:</B>
jd1@titleoptions.com; jQuery Discussion.<BR><B>Subject:</B> Re: [jQuery] cant
append() form objects<BR></FONT><BR></DIV>
<DIV></DIV><SPAN>I refactored your function to use jQuery:<BR>function
appLayer(id){<BR> //create layerbox<BR> this.$layer =
$("<div id='" + id + "_layer'
class='layerbox'></div>").appendTo("#content"); <BR><BR>
//create form<BR> this.$layer.append(this.$form = $("<form id='"
+ id + "_form' name='" + id + "_form' action='index.php'
method='post'></form>")); <BR><BR> //create main
div<BR> this.$main = $("<div id='" + id + "_main'
class='morebox'></div>").html("This box should get created, but it
doesnt because form didnt get created").prependTo(this.$form);
<BR>}<BR><BR>Interestingly, when I tryed to use this.$form.appendTo(this.$layer)
it didn't work. Is this a bug? Not sure. But this function worked for
me.<BR><BR>Blair<BR></SPAN><BR>
<DIV><SPAN class=gmail_quote>On 1/25/07, <B class=gmail_sendername>Jeremy
Dill</B> <<A href="mailto:jd1@titleoptions.com">jd1@titleoptions.com</A>>
wrote:</SPAN>
<BLOCKQUOTE class=gmail_quote
style="PADDING-LEFT: 1ex; MARGIN: 0pt 0pt 0pt 0.8ex; BORDER-LEFT: rgb(204,204,204) 1px solid">
<DIV>
<DIV><SPAN>After upgrading from 1.0.4 to 1.1.1 the following code no longer
works. Please tell me if there is a solution to this issue.</SPAN></DIV>
<DIV><SPAN></SPAN><SPAN></SPAN> </DIV>
<DIV><SPAN>-------------------------------WORKING HTML TEST
PAGE------------</SPAN></DIV>
<DIV><SPAN><html xmlns="<A
onclick="return top.js.OpenExtLink(window,event,this)"
href="http://www.w3.org/1999/xhtml%22%3E"
target=_blank>http://www.w3.org/1999/xhtml"></A></SPAN></DIV>
<DIV><SPAN><head><BR><meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1"
/><BR><title>test</title><BR><style><BR>.layerbox{font-size:8pt;text-align:left;padding:10px;margin:20px;border:1px
solid #B2C5EC; background-color:#FCFCFC;float:left;
clear:left;height:200px;width:200px}<BR></style><BR><script
type='text/javascript'
src='/js/jquery111.js'></script><BR></head></SPAN></DIV>
<DIV> </DIV>
<DIV><SPAN><body><BR><div id='content'></div><BR><script
language="JavaScript"><BR>function appLayer(id){<BR> //create
layerbox<BR> var layerbox=document.createElement('div');<BR>
layerbox.id=id+"_layer";<BR> layerbox.className="layerbox";<BR>
$("#content").prepend(layerbox);<BR> this.divName=layerbox.id;<BR>
this.layerobj=layerbox;<BR> //create form<BR> var
frm=document.createElement('form');<BR> frm.id=id+"_form";<BR>
frm.name=id+"_form";<BR> frm.action = "index.php";<BR> frm.method
= "post";<BR> this.frm=frm.id;<BR>//-------HERE IS THE
PROBLEM-----///<BR> $("#"+this.divName).append(frm);<BR>//-------APPEND
DOESNT WORK FOR FORM OBJECT------///<BR> //create main div<BR> var
main=document.createElement('div');<BR> main.id=id+"_main";<BR> main.className="morebox";<BR> main.innerHTML="This
box should get created, but it doesnt because form didnt get
created";<BR> $("#"+this.frm).prepend(main);<BR>}<BR>tst=new
appLayer('Test');<BR></script><BR></body><BR></html><BR>----------------------------END
PAGE-----------------</SPAN></DIV>
<DIV><SPAN></SPAN> </DIV>
<DIV><SPAN>The form object does not get created. </SPAN><SPAN>I don't
have any problems appending other objects such as divs, but the form object
won't work anymore.</SPAN></DIV>
<DIV><SPAN><SPAN></SPAN></SPAN> </DIV>
<DIV><SPAN><SPAN>It works fine in 1.0.4. Try it out.</SPAN></SPAN></DIV>
<DIV><SPAN><SPAN></SPAN></SPAN> </DIV>
<DIV><SPAN><SPAN>Thanks in advance.</SPAN></SPAN></DIV>
<DIV><SPAN><SPAN></SPAN></SPAN> </DIV>
<DIV><SPAN><SPAN>Jeremy</SPAN></SPAN></DIV></DIV><BR>_______________________________________________<BR>jQuery
mailing list<BR><A onclick="return top.js.OpenExtLink(window,event,this)"
href="mailto:discuss@jquery.com">discuss@jquery.com</A><BR><A
onclick="return top.js.OpenExtLink(window,event,this)"
href="http://jquery.com/discuss/"
target=_blank>http://jquery.com/discuss/</A><BR><BR><BR></BLOCKQUOTE></DIV><BR></BODY></HTML>
_______________________________________________
jQuery mailing list
discuss@jquery.com
http://jquery.com/discuss/