How to show JavaScript variable in colorbox

Question

I use colorbox jquery and have problem to show variable in colorbox.

I have variable called wp_store_caption that get value from input type :-

<input type="text" id="title" class="ab_form_text wp_store_caption require" name="wp_store_caption" value="">

Now i use colorbox like :-

jQuery(document).ready(function() {
    var wp_store_caption = jQuery('#title').val();
    jQuery(".open-popup-link").colorbox({html:"<h1>"+wp_store_caption+"</h1>"});

});

But canot show value of wp_store_caption, But when use alert() without colorbox, I can see the value.

Where is problem ?!

codingrose · Accepted Answer · 2015-03-28 09:57:22Z

1

It is not happening because when you write

jQuery(".open-popup-link").colorbox({html:"<h1>"+wp_store_caption+"</h1>"})

you bind the value of wp_store_caption, which is initially not defined.

You need to bind click event and assign value to wp_store_caption, and then call colorbox function.

You should write this:

$(".open-popup-link").click(function () {
    $.colorbox({
        html: "<h1>" + $('#title').val() + "</h1>"
    });
});

See DEMO here.

In this example, I have predefined value of title. Please note this value will not update the heading in colorbox because the value of -wp_store_caption is not being updated.

answered Mar 28, 2015 at 9:57

codingrose

15.7k11 gold badges41 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

EJAg · Accepted Answer · 2015-03-28 10:31:39Z

0

You can bind to .blur() to get it work as here.

$(function() {
  $('#title').blur(function(){
  var wp_store_caption = $('#title').val();
    if (wp_store_caption.length > 0)
      $.colorbox({html:"<p>" + wp_store_caption + "</p>"})
 });
});

answered Mar 28, 2015 at 10:31

EJAg

3,3382 gold badges16 silver badges23 bronze badges

Collectives™ on Stack Overflow

How to show JavaScript variable in colorbox

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related