Javascript&Jquery why can't my animate() work?

Question

I've written some code, which is shown beneath. I couldn't figure out why hideDialog() can work, but showDialog() doesn't work.Can anybody tell me what wrong is with my code, or give me some information to search? Thanks:)

Here is the error message:

Uncaught TypeError: $(...).showDialog is not a function

function showDialog(){
      this.animate({
          top:50
      },{ 
          duration:400,
          effect:'slide',
          easing:'easeOutBack'
      }); 
  }

  function hideDialog(){
      this.animate({
          top:-200
      },{ 
          duration:400,
          effect:'slide',
          easing:'easeInBack'
      });
  }

  function initSetting(){
      $('.form-control').change(function(){
          $('#myAlertDialog').showDialog();
          $('#myAlertDialog').find('btnOk').on('click',function(){
              $('#myAlertDialog').hideDialog();
          });   
      });
  }

score 0 · Accepted Answer · edited May 23 '17 at 11:58

0

Try to re frame your code like this,

function showDialog($this){
      $this.animate({
          top:50
      },{ 
          duration:400,
          effect:'slide',
          easing:'easeOutBack'
      }); 
 }

  function hideDialog($this){
      $this.animate({
          top:-200
      },{ 
          duration:400,
          effect:'slide',
          easing:'easeInBack'
      });
  }

  function initSetting(){
      $('.form-control').change(function(){
          showDialog($('#myAlertDialog'));
          $('#myAlertDialog').find('btnOk').on('click',function(){
              hideDialog($('#myAlertDialog'));
          });   
      });
  }

Or read this question to know how to create user defined functions on top of jquery.

edited May 23 '17 at 11:58

Community

1
1

answered Aug 31 '15 at 10:43

Rajaprabhu Aravindasamy

66,513
17
101
130

Thanks for your answer, and I like the answer in the link. However, I still have a question, I believe that the "this" in showDialog() is $('#myAlertDialog'), but why can't the function work? Or is there anything wrong with the call? – Chiu Aug 31 '15 at 10:59
@Chiu `this` inside that function will be window object not `$('#myAlertDialog')`. – Rajaprabhu Aravindasamy Aug 31 '15 at 11:00
@Chiu jquery object won't have any user defined functions with it unless you defined it. – Rajaprabhu Aravindasamy Aug 31 '15 at 11:02
I've tried writing `console.log(this)` in front of this.animate(), and the console printout error message instead of my custom message. It seems that the function isn't called correctly in the `initSetting()`. Is anything wrong with my thought? – Chiu Aug 31 '15 at 11:07
OK I get the point. thanks:) but why can the hideDialog in initSetting wrong correctly, Ijust can't figure out this LOL – Chiu Aug 31 '15 at 11:08

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

use $.fn.showDialog() instead of just function showDialog(). use $.fn.hideDialog() instead of just function hideDialog(). You're trying to extend the jQuery prototype.

Please see What is $.fn.function and Plugins How to Create a Basic Plugin

edited May 23 '17 at 11:43

Community

1
1

answered Aug 31 '15 at 10:52

Bibek Sharma

3,210
6
42
64

Thanks for your answer, I'll check out the link, after I understand the idea of prototype. – Chiu Aug 31 '15 at 11:09

score 0 · Answer 3 · answered Aug 31 '15 at 11:01

Try to frame your code like this. Further, read about the difference between this and $(this) in jQuery.

function showDialog(item){
      $(item).animate({
          top:50,
          duration:400,
          effect:'slide',
          easing:'easeOutBack'
      }); 
 }   // end of showDialog

  function hideDialog(item){
      $(item).animate({
          top:-200,
          duration:400,
          effect:'slide',
          easing:'easeInBack'
      });
  }   // end of hideDialog

  function initSetting(){
      $('.form-control').change(function(){
          showDialog($('#myAlertDialog'));
          $('#myAlertDialog').find('btnOk').on('click',function(){
              hideDialog($('#myAlertDialog'));
          });   
      });
  }

  // btnOK should have a # or . for the identifier.
  // if the click event does not work, then try with the delegate() function. http://api.jquery.com/delegate/

Javascript&Jquery why can't my animate() work?

3 Answers3