jQuery's .val() not working in Facebox

Question

I'm using Facebox (http://defunkt.github.com/facebox/) on one of my websites. Also i'm using jQuery extensively on the site.

My problem is that the .val() function doesn't seem to work inside facebox. Now, this is the DIV that shows up as facebox :

<div id="edit-tags" style="display: none;">
  <script type="text/javascript">   
   $('.add-tag-form').submit(function(){
    alert($('input.tags-input').val());
    return false;
   });
  </script>

  <form class="add-tag-form">
   <input type="text" name="tags-input" class="tags-input" />
   <input type="submit" class="small-button" value="Add Tag" />
  <form>
</div>

Now, the problem is that the value of input.tags-input doesn't show up on the alert box. It shows up empty.

To make the problem worse, the jQuery selection actually works. That is, $('input.tags-input').hide() works perfectly fine.

To make the problem even worse, the .val() works with the initial value. That is, if i use this :

<input type="text" name="tags-input" class="tags-input" value="Some value" />

Then, the alert box shows "Some Value" irrespective of whether i change the value or not.

I'm totally stuck here. The .val() at the same position in the code works fine with the text boxes outside the facebox.

Answer 1

The problem is that by the time your javascript code runs, the document hasn't been loaded yet. By the time you run $('.add-tag-form'), jquery looks and does not find any element that matches the query, and so nothing happens.

To fix this, do as Avinash says, and tell jQuery to run your code when the document is ready. I usually do this with:

$(document).ready(function(){
    ...
});

Another thing, to be safe I also like to wrap my functions and call them with jquery, like so:

(function ($){
   $(document).ready(function() {
       ...
   });
})(jQuery);

This way if someone overrides the $ name, the script still works and I can still use the $ shortcut.

Answer 2

I was stuck from last one day on it. In my case facebox.js was showing at link no 243-> $.facebox.reveal($(target).html(), klass) and i change it to $.facebox.reveal($(target).show(), klass) and it works. Thanks for all above posts

Answer 3

As Ngo Minh Nam pointed out, facebox will make a clone of the original div, so you're reading the initial value of the input field.

Here's my (ugly) workaround to make things work:

$('#input_field_id').live('keyup', function() {
  $('#input_field_id').val($(this).val());
});

This will update the input field everytime a key is depressed inside the value box.

UPDATE : forget that! simply append #facebox before the id of the element you want to read. In my example:

$('#facebox #input_field_id').val();

Please also note that you have to wrap these lines inside the

    $(document).bind('reveal.facebox', function() { 

Answer 4

Go to facebox.js line 254 change
$.facebox.reveal($(target).clone().show(), klass) to
$.facebox.reveal($(target).show(), klass)

Facebox is cloning the div you supplied instead of actually showing it. When you call .val(), it will return the value of the original div but the modified div (which the user interacts with) is actually a cloned div.

I'm having the same issue. After I fixed that, something else broke (facebox will load the div only once, when it is closed nothing seems to work)

Answer 5

finally i want to update this post that i have used lightbox instead of facebox to get rid of from my facebox form submission problem and it worked in first attempt.light box have some more option and give output better than facbox

Answer 6

you need to wrap your code in an anonymous function, like

$(function() { ... });
       or
$(document).ready(function() { ... });

may be this help's

$(function() {
   $('.add-tag-form').submit(function(){
      alert($('input.tags-input').val());
      return false;
   });
});

please let me know if the problem still exists