move jquery into js file cause reference error and type error

Question

So, in my html file, I have a script for flashing message like this

<script>
    $(document).ready( function() {
        flashThisMessage("me");                    
    });

    //I want to move this code below to js file, so I dont have to copy this part
    //to every html file that need to use, so I can just include the js file
    (function($) {
        $.fn.flash_message = function(options) {

          options = $.extend({
            text: 'Done',
            time: 5000,
            how: 'before',
            class_name: ''
          }, options);

          return $(this).each(function() {
            if( $(this).parent().find('.flash_message').get(0) )
              return;

            var message = $('<span />', {
              'class': 'flash_message ' + options.class_name,
              text: options.text
            }).hide().fadeIn('fast');

            $(this)[options.how](message);

            message.delay(options.time).fadeOut('normal', function() {
              $(this).remove();
            });

          });
        };
    })(jQuery);
</script>

and my js file look like this

function flashThisMessage( theMessage ) {
    $('#status-message-area').flash_message({
        text: theMessage,
        how: 'append'
    });   
}

How can I move this the flash_message script into js file, I tried to just copy it, it will give an error "ReferenceError: jQuery is not defined" and "TypeError: $(...).flash_message is not a function" ?

Are you initializing the js file after the script? Or before? If you are doing it before, he doesn't have a reference to it. Add the script include at the end of your html. — Rui Silva
– Rui Silva, Commented Dec 9, 2014 at 23:45
I am initializing the js file at the top of the html file.. so it's before — Harts
– Harts, Commented Dec 9, 2014 at 23:46
I'm pretty sure it will fix the problem, if not let me know so we can work it around — Rui Silva
– Rui Silva, Commented Dec 9, 2014 at 23:47
you are right.. if you want to write it as an answer, then I can check mark it. Thanks — Harts
– Harts, Commented Dec 9, 2014 at 23:48

cyclops1101 · Accepted Answer · 2014-12-09 23:48:16Z

1

I can't see how you've added your js file but if you have jQuery loading after your js file you'll run into this error.

answered Dec 9, 2014 at 23:48

cyclops1101

4323 silver badges8 bronze badges

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

Comments

Rui Silva · Accepted Answer · 2014-12-09 23:49:56Z

1

Like it's said in the comments, and like cyclops1101 said, you should be initializing the JS file after your script.

Happy scripting!

answered Dec 9, 2014 at 23:49

Rui Silva

14011 bronze badges

Collectives™ on Stack Overflow

move jquery into js file cause reference error and type error

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