| embedded html in javascript variable works in <body> but not in $(function() | |
|
Author | Message |
---|
RokkaMan Member
Posts : 16 Join date : 2011-03-09
| Subject: embedded html in javascript variable works in <body> but not in $(function() Tue Jun 21, 2011 7:21 pm | |
| Hi,
I have the following snippet of code that creates a text link that will open up a popup box:
var thead1 = '<div id=\"tableDiv\"><table border=\"1\" width=200><tr><td id="tdid" height=\"10\"> <a id=\"#tellfriendpopup\" class=\"tellfriend\" style=\"cursorointer\"><span class=\"infoboxspan\">Send To A Friend</a></span></td><td></td></tr></table></div>'; $('body').append(thead1);
If I put that inside <body>, it works like a charm. The second I put it in javascript scope, a la:
<head> $(function() { var thead1 = ... });
the text will show up, but if I try to click it to open the popup box, the box will not open.
I need to figure this out, so if anyone has any explanation or workaround, I will be very much grateful for any assistance or advice you can offer.
Thanks for reading!
|
|
| |
Scars Member
Posts : 16 Join date : 2011-03-09
| Subject: Re: embedded html in javascript variable works in <body> but not in $(function() Tue Jun 21, 2011 7:22 pm | |
| this is becuase the way you have written your function. this method will cause the function to fire as soon as the browser reads it, which means it is firing before the <body> tag, and since <body> doesnt technically exist yet it's not going to work. you can do several things. include you function as is, in a document.ready or write it as a normal named function and call that function via <body onload=""> |
|
| |
Twerk Member
Posts : 26 Join date : 2011-04-17
| Subject: Re: embedded html in javascript variable works in <body> but not in $(function() Tue Jun 21, 2011 7:23 pm | |
| - Scars wrote:
- this is becuase the way you have written your function. this method will cause the function to fire as soon as the browser reads it, which means it is firing before the <body> tag, and since <body> doesnt technically exist yet it's not going to work. you can do several things. include you function as is, in a document.ready or write it as a normal named function and call that function via <body onload="">
This has already been achieved using $(function() {...}) which is the same as $(document).ready(function() {...}) in jQuery |
|
| |
DreamsFade Member
Posts : 12 Join date : 2011-04-17
| Subject: Re: embedded html in javascript variable works in <body> but not in $(function() Tue Jun 21, 2011 7:23 pm | |
| Probably it would have saved a lot of time if kberry should have understood that the code he uses is a piece of JQuery library, not a native JavaScript code. Is it JQuery |
|
| |
Twerk Member
Posts : 26 Join date : 2011-04-17
| Subject: Re: embedded html in javascript variable works in <body> but not in $(function() Tue Jun 21, 2011 7:24 pm | |
| good point
I was anticipating but not knowing :-) |
|
| |
RokkaMan Member
Posts : 16 Join date : 2011-03-09
| Subject: Re: embedded html in javascript variable works in <body> but not in $(function() Tue Jun 21, 2011 7:24 pm | |
| Well, I'm certainly using jquery, and yes, one poster is right about the $(function() { reading being synonymous with onready(). Am I right in assuming .append is jQuery specific, not javascript? I checked on google, and I think it might be. The issue, though, isn't about .append(). It's more about, once inside jQuery's $(function(), which is where this code:
var thead1 = '<div id=\"tableDiv\"><table border=\"1\" width=200><tr><td id="tdid" height=\"10\"> <a id=\"#tellfriendpopup\" class=\"tellfriend\" style=\"cursorointer\"><span class=\"infoboxspan\">Send To A Friend</a></span></td><td></td></tr></table></div>';
will eventually be going, var thead1 will create a text saying Send To A Friend, but it will not be clickable and open the popup.
I tried the onload approach, a la :
<head> <script> function load_tellfriend() { var thead1 = ...$('body'.append... } </script> <body onload="load_tellfriend()">
And it brought up the table, but still, the link is unclickable. (I noticed i needed to append it to the body in order for it to appear).
I then moved that function to $(function, a la:
$(function() { function load_tellfriend() { var thead1 = '<div id=\"tableDiv\"><table border=\"1\" width=200><tr><td id="tdid" height=\"10\"> <a id=\"#tellfriendpopup\" class=\"tellfriend\" style=\"cursorointer\"><span class=\"infoboxspan\">Send To ONE Friend</a></span></td><td></td></tr></table></div>'; $('body').append(thead1); } load_tellfriend(); });
But again, no dice.
Still not being able to click the link.... any *more* ideas? I don't even understand still why it's not working, especially after trying your two suggestions. |
|
| |
Twerk Member
Posts : 26 Join date : 2011-04-17
| Subject: Re: embedded html in javascript variable works in <body> but not in $(function() Tue Jun 21, 2011 7:25 pm | |
| - Code:
-
this code:
<a id=\"#tellfriendpopup\" class=\"tellfriend\" style=\"cursorointer\"><span class=\"infoboxspan\">Send To A Friend</a></span>
Still not being able to click the link..
Yes, two more ideas 1. Your code is wrong with respect to element nesting - Code:
-
<a><span></a></span>
This is not a good idea 2. Your <a> tag does neither have a name nor a href. If you want to click it you'll have to tell it somewhere else in your code (which you didn't show) what to do after a click event. Where is that code? |
|
| |
RokkaMan Member
Posts : 16 Join date : 2011-03-09
| Subject: Re: embedded html in javascript variable works in <body> but not in $(function() Tue Jun 21, 2011 7:25 pm | |
| Hey there, So I tried using jQuery's .live function, and as far as this example goes, it worked!!! Hallelujah! I haven't quite got there with my original implementation, but this is a huge start. Here's the code. - Code:
-
<!DOCTYPE html> <html> <head> <!-- JQUERY INCLUDES --> <link type="text/css" href="jquery-ui-1.8.13.custom/css/custom-theme/jquery-ui-1.8.13.custom.css" rel="stylesheet" /> <script type="text/javascript" src="jquery-ui-1.8.13.custom/js/jquery-1.5.1.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.13.custom/js/jquery-ui-1.8.13.custom.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.13.custom/js/jquery.cookie.js"></script> <!-- CUSTOM INCLUDES --> <script type="text/javascript" src="js/form_functions.js"></script>
<script> $(function() { <!--------------------------------> <!--POPUPS CONFIGURATION --> <!--------------------------------> $('#tellfriend').hide(); $('a.tellfriend, #tellfriend a.close').live('click', function() { $("#tellfriend").fadeToggle('normal'); backgroundFilter(); }); function load_tellfriend() { var thead1 = '<div id=\"tableDiv1\"><table border=\"1\"><tr><td id="tdid1">\ <a name=\"#tellfriendpopup\" id=\"#tellfriendpopup\" class=\"tellfriend\" style=\"cursor:pointer\">\ <span class=\"infoboxspan\">Send To ONE Friend</span></a></td><td></td></tr></table></div>'; $('body').append(thead1); } load_tellfriend(); }); </script> <link rel="stylesheet" type="text/css" href="css/stylesheet.css" /> </head> <body> This first link, crafted in the < body > opens fine. <script> var tbody1 = '<div id=\"tableDiv2\"><table border=\"1\"><tr><td id="tdid2">\ <a name=\"#tellfriendpopup\" id=\"#tellfriendpopup\" class=\"tellfriend\" style=\"cursor:pointer\">\ <span class=\"infoboxspan\">Send To A Friend</a></span></td><td></td></tr></table></div>'; $('body').append(tbody1); </script> <br><br> This next one, crafted in $(function()... not so much. <div id="head1"></div>
<!--------------> <!-- THE FORM --> <!-------------->
<div id="tellfriend" class="contact_form" style="z-index:10;"> <a class="close" onclick="document.tellfriend_form.reset();return false">CLOSE</a> <form id='tellfriend_form' name='tellfriend_form' method="post" action="tellfriend.php" > <center> <h1 class="form_header">TELL A FRIEND</h1> </center> <hr class="dashed"> <hr class="blank"> <label for="recipient">To E-mail: </label> <input class="std_input" type="text" name="recipient" maxlength="35" autocomplete="off"/> <label for="tellfriend_yourname">Your Name: </label> <input name="tellfriend_yourname" type="text" id="tellfriend_yourname" class="std_input" maxlength="35" autocomplete="off"/> <label for="tellfriend_subject">Subject: </label> <input name="tellfriend_subject" type="text" id="tellfriend_subject" class="std_input" autocomplete="off" value="sent you a link."/> <label for="message">Message: </label> <textarea id="message" name="message" rows="18" cols="40" wrap="hard">Hi, please check this out.</textarea> <br> <br> <table> <tr> <td><input type="image" src="images/forms/submit.png" value="Submit" alt="Submit"></td> <td align="right"> <a onclick="javascript:reset_tellfriend()" style="cursor:pointer"><img src="images/forms/reset.png"></a> </td> </tr> </table> </form> </div>
<!---------------------------------------------> <!-- DISABLE BACKGROUND WHEN POPUP IS ACTIVE --> <!---------------------------------------------> <div id="backgroundFilter"></div>
</body> </html>
|
|
| |
Twerk Member
Posts : 26 Join date : 2011-04-17
| Subject: Re: embedded html in javascript variable works in <body> but not in $(function() Tue Jun 21, 2011 7:26 pm | |
| Aah great, finally there's all the necessary code :-) - Code:
-
$('a.tellfriend, #tellfriend a.close').click(function() { $("#tellfriend").fadeToggle('normal'); backgroundFilter(); }); function load_tellfriend() { var thead1 = '<div id=\"tableDiv\"><table border=\"1\" width=200><tr><td id="tdid" height=\"10\">\ <a name=\"#tellfriendpopup\" id=\"#tellfriendpopup\" class=\"tellfriend\" style=\"cursor:pointer\">\ <span class=\"infoboxspan\">Send To ONE Friend</span></a></td><td></td></tr></table></div>'; $('body').append(thead1); } load_tellfriend();
See? You are assigning a click() handler to a.tellfriend early in $(function()). Later you add another a.tellfriend with load_tellfriend(). But how should the click handler know about elements added later? It can't. That's what .live('click', ...) is for. The description section on that page tells you exactly what is going on here. |
|
| |
RokkaMan Member
Posts : 16 Join date : 2011-03-09
| Subject: Re: embedded html in javascript variable works in <body> but not in $(function() Tue Jun 21, 2011 7:27 pm | |
| *laughs* Sorry about that. I had to strip my project down to the bare essentials of what was going on here. So I got it working thanks to your suggestion about using .live(). I shall be thanking a number of posts now!
Biig big thanks to your guys' help. :-D |
|
| |
Sponsored content
| Subject: Re: embedded html in javascript variable works in <body> but not in $(function() | |
| |
|
| |
| embedded html in javascript variable works in <body> but not in $(function() | |
|