Question

I really don’t know how to express this question. But what I’m trying to achieve is to run/call a jQuery function from another JavaScript (non jQuery) function.

I’m trying to add elements to JQ carousel.

This is how it is supposed to be done: by clicking on a button. :

$('#carousel_add').on('click', function(ev) {
  $carousel.carousel('reset');
  $carousel.append('<div class="carousel_box"> Page '+(z)+' <br/><img src="http://place.to/my/picture/file'+dir+'/0'+z+'.png" width="100px" height="50px"> </div>');
  $carousel.carousel('refresh');
  document.getElementById('carousel_next').disabled = false;
  document.getElementById('carousel_prev').disabled = true;
});

I’m trying to do it without the adding button. I want that a button, which triggers a JavaScript function, triggers then the jQuery adding function for the Carousel. The problem I am having is that it says that the carousel variable is undefined, which I can understand because is not within the function’s scope.

Example:

HTML ->

<input type="button" value="Load Pages" function="loadPages();">

JavaScript (No jQuery involved)

<script type="text/javascript">
function loadPages()
{
myImage = new Image();
myImage.src = "http://path.to/image/file.png";
//The image is loaded.
//Now I want to add this image to the JQ Carousel
addCarousel(myImage.src);
}
</script>

JavaScript (jQuery based carousel -> JQ Carousel)

<script type="text/javascript">

$(document).ready(function(e) {

    var $carousel = $('#carousel').carousel({
        group: 6,
        indicator: false
      }),
      $prev = $('#carousel_prev'),
      $next = $('#carousel_next'),
       set_state = function() {
        var state = $carousel.carousel('getMoveState');
        switch ( state ) {
        case 'min':
          $prev.prop('disabled', 'disabled');
          $next.prop('disabled', '');
          break;
        case 'max':
          $prev.prop('disabled', '');
          $next.prop('disabled', 'disabled');
          break;
        case true:
          $prev.prop('disabled', '');
          $next.prop('disabled', '');
          break;
        default:
          $prev.prop('disabled', 'disabled');
          $next.prop('disabled', 'disabled');
        }
      };
      num = 1;

    $('#carousel_prev').on('click', function(ev) {
      $carousel.carousel('prev');
    });
    $('#carousel_next').on('click', function(ev) {
      $carousel.carousel('next');
    });
    // ...
    $carousel.bind({
      'Carousel.next': function() {
        set_state();
      },
      'Carousel.prev': function() {
        set_state();
      }
    });

</script>

Now the function that is supposed to add it

function addCarousel(image)
{
      $carousel.carousel('reset');
      $carousel.append('<div class="carousel_box"> Page '+(num++)+' <br/><img src="'+image+'" width="100px"> </div>');
      $carousel.carousel('refresh');
      document.getElementById('carousel_next').disabled = false;
      document.getElementById('carousel_prev').disabled = true;
    })


}

The HTML where the carousel resides:

<div class="carousel">
  <div id="carousel" class="carousel_inner">

    <div class="carousel_box"> Page 1 <br/><img src="http://path/to/image/file.png" width="100px"></div>
   </div>

   </div>
  <p class="btns">
    <input type="button" id="carousel_prev" value="prev" disabled>
    <input type="button" id="carousel_next" value="next" >
    <input type="button" id="carousel_add" value="add">
  </p>
</div>

I’m getting $carousel is undefined, though it was previously declared on the page. What I’m doing wrong?

Answer 1

Just put the $carousel outside of the document.ready function.

like this..

<script type="text/javascript">
var $carousel = null;
$(document).ready(function(e) {

    $carousel = $('#carousel').carousel({//notice i removed "var "
        group: 6,
        indicator: false
     }),
....

Earlier, variable $carousel was only visible inside the anonymous handler of the document.ready event. Moving it out side, will give global visibility to that variable. So, now you can use that variable from anywhere in your script.

Also, be-aware of updating $carousel. Because the same value will be reflected in all other places you have referenced $carousel.