Jquery call defined function from an outside function

Question

Hey all I have a jQuery function like so:

$.fn.sexyForm = function (style){
    $('.sexyform').on('click',function(){
        $(this).find('input').trigger('focus');
    });

        var $input = $('.sexyform');
    ****************************************************
    ************* MORE CODE HERE TAKEN OUT *************
    ****************************************************
    function closeBox(element) {
       //console.log("Closing", element);
       //Get the element that needs to be closed
       var $el = $(element);
       //Grab the data we set on it
       var originalData = $el.data('original-styles');
       //console.log(originalData);
       var style = $el.data('style');
       //Reset the input

       $el.find('input').animate({
           left: originalData.startPosInput
       })
       $el.find('span').animate({
           width: originalData.startWidth,
           left: originalData.startPosPlace,
       })
   }
};

And I am trying to call that from another location like this:

function clearAll() {
    console.log('hi');
    $('.input3').val('');       
    $('.input3').removeClass('form-open');
    closeBox($('.input3'));
    $("span[data-id*='txt']").each(function(index) {
        //enable ALL textboxes
        $(this).css("pointer-events", "auto");
        $(this).fadeTo("fast", 1.0);
        $('#searchTop').text('above');
    });

    $('#schoolSelect').prop('selectedIndex', 0).selectric('refresh');
    $('#roles').prop('selectedIndex', 0).selectric('refresh');
    $('#clearBtn').focus();
}

The error comes from the closeBox($('.input3'));. I have tried doing the following:

$.fn.sexyForm.closeBox($('.input3'));

and that doesn't work as well. What am I missing?

berrtech · Answer 1 · 2016-09-13T13:53:59.590

1

closeBox is only defined inside sexyForm function scope and cannot be used outside, what you can try is to move it in upper scope

function close(element) {
  //console.log("Closing", element);
  //Get the element that needs to be closed
  var $el = $(element);
  //Grab the data we set on it
  var originalData = $el.data('original-styles');
  //console.log(originalData);
  var style = $el.data('style');
  //Reset the input

  $el.find('input').animate({
    left: originalData.startPosInput
  })
  $el.find('span').animate({
    width: originalData.startWidth,
    left: originalData.startPosPlace,
  })
}

$.fn.sexyForm = function(style) {
  $('.sexyform').on('click', function() {
    $(this).find('input').trigger('focus');
  });

  var $input = $('.sexyform');
  
  function closeBox(element) {
    close(element)
  }
};


function clearAll() {
  console.log('hi');
  $('.input3').val('');
  $('.input3').removeClass('form-open');
  close($('.input3'));
  $("span[data-id*='txt']").each(function(index) {
    //enable ALL textboxes
    $(this).css("pointer-events", "auto");
    $(this).fadeTo("fast", 1.0);
    $('#searchTop').text('above');
  });

  $('#schoolSelect').prop('selectedIndex', 0).selectric('refresh');
  $('#roles').prop('selectedIndex', 0).selectric('refresh');
  $('#clearBtn').focus();
}

edited Sep 13 '16 at 13:53

answered Sep 13 '16 at 13:13

berrtech

328
1
9

But I need it to be able to call it from another function.... – StealthRT Sep 13 '16 at 13:34
What do you mean by 'call it from another function'? You can call it from another function using the way I described. Do you need it to be available in `sexyForm` specifically? – berrtech Sep 13 '16 at 13:39
Yes i need it to be in **sexyform specifically**. – StealthRT Sep 13 '16 at 13:45
Then you can define `close` function in the outer scope and define `closeBox` function which calls `close` in `sexyForm`. I've updated code in my answer, try it out – berrtech Sep 13 '16 at 13:55
**close** has to be **inside** the **$ .fn.sexyForm** and I need to be able to call **close** from *outside* that **$ .fn.sexyForm** function. – StealthRT Sep 13 '16 at 14:06
ok. **this is not possible.** elaborate on why exactly `close` function has to be in `sexyForm` scope and maybe I will be able to help – berrtech Sep 13 '16 at 14:11

score 1 · Accepted Answer · edited May 26 '21 at 21:13

1

I might not be understanding exactly what you're looking for @Stealth, but if you want to keep the closeBox function defined inside of sexyForm, an alternative would be to pass an object of some form. For example:

$.fn.sexyForm = function(style, BoxObj) {
    // Code here...
    BoxObj.closeBox = function(element) {
    // Any other code...
   }
}

And depending on where BoxObj is defined, you can optionally pass BoxObj as an argument to clearAll:

function clearAll(BoxObj) or () {
   // Code here
   BoxObj.closeBox($('.input3'));
   // More code 
}

edited May 26 '21 at 21:13

halfer

19,824
17
99
186

answered Sep 14 '16 at 02:47

RoboBear

5,434
2
33
40

Thats more along the lines of what I wanted to do. Thanks RoboBear. – StealthRT Sep 14 '16 at 17:34

Jquery call defined function from an outside function

2 Answers2