embedded html in javascript variable works in <body> but not in $(function()

Member Posts : 16 Join date : 2011-03-09

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!

Member Posts : 16 Join date : 2011-03-09

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="">

Member Posts : 26 Join date : 2011-04-17

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

Member Posts : 12 Join date : 2011-04-17

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

Member Posts : 26 Join date : 2011-04-17

good point

I was anticipating but not knowing :-)

Member Posts : 16 Join date : 2011-03-09

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.

Member Posts : 26 Join date : 2011-04-17

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?

Member Posts : 16 Join date : 2011-03-09

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>

<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>

<script type="text/javascript" src="js/form_functions.js"></script>

<script>
$(function()
{
   
   
   

   $('#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>





<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>




<div id="backgroundFilter"></div>

</body>
</html>

Member Posts : 26 Join date : 2011-04-17

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.

Member Posts : 16 Join date : 2011-03-09

*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

» Embedded Windows Media Player
» Javascript HashChange
» (AJAX => Div) don't work javascript in the div
» Secure Login with javascript
» javascript values back to python?

embedded html in javascript variable works in <body> but not in $(function()

embedded html in javascript variable works in <body> but not in $(function()

Similar topics

Similar topics