CODEWITHSUNDEEP
javascriptjquerycolorbox
Almeeraj Tourism
Almeeraj Tourism

Reputation: 65

How to show JavaScript variable in colorbox

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

Upvotes: 1

Views: 424

Answers (2)

EJAg
EJAg

Reputation: 3298

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>"})
 });
});

Upvotes: 0

codingrose
codingrose

Reputation: 15699

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.

Upvotes: 1

Related Questions