CODEWITHSUNDEEP
javascriptjqueryruby-on-rails
Alon Shmiel
Alon Shmiel

Reputation: 7121

errors by create js file that contains jquery

I created a file is called: jquery.js:

$(document).ready(function{
   jQuery('#sortable1, #sortable2')
     .sortable(
     {'connectWith':'.connectedSortable',
     'dropOnEmpty':true,
     'scroll':true,
      items: "li:not(.emptyMessage)",
      receive: function(event, ui) {
             //hide empty message on receiver
             $('li.emptyMessage', this).hide();

             //show empty message on sender if applicable
             if($('li:not(.emptyMessage)', ui.sender).length == 0){
                 $('li.emptyMessage', ui.sender).show();
             } else {
                 $('li.emptyMessage', ui.sender).hide();
             }            
         }

    });
});

In my index.html.erb, I have:

I ADDED THE FIRST SCRIPT SRC...:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="assets/jquery.js" type="text/javascript"></script>
<ul id="sortable1" class="connectedSortable">
   <li>List 1-1</li>
   <li>List 1-2</li>
   <li>List 1-3</li>
   <li>List 1-4</li>
   <li class="emptyMessage">This is empty</li>
</ul>

<ul id="sortable2" class="connectedSortable">
  <li>List 2-1</li>
  <li>List 2-2</li>
  <li>List 2-3</li>
  <li>List 2-4</li>
  <li class="emptyMessage">This is empty</li>
</ul>
<div class="clear"></div>

in the console, I got the next errors:

Uncaught SyntaxError: Unexpected token { :3000/assets/jquery.js?body=1:1
Uncaught ReferenceError: jQuery is not defined jquery_ujs.js:429
Uncaught ReferenceError: jQuery is not defined jquery.purr.js:162
Uncaught ReferenceError: jQuery is not defined best_in_place.js:561
Uncaught ReferenceError: jQuery is not defined workers.js:3
Uncaught ReferenceError: $ is not defined application.js:19
Uncaught SyntaxError: Unexpected token {

I think all the errors are because of jquery.js.

please help.

Upvotes: 0

Views: 842

Answers (4)

Jai
Jai

Reputation: 74738

I think you have to declare it before doc ready

if you don't have jQuery plugin attached before this script then these amends won't work, so try to include jQuery first then this script:

And if you use cdn hosted script then page load performance will boostup.

little amends to take care of:

$(document).ready(function{
   //--------------------^----missing braces '()'

it should be:

$(document).ready(function(){

if this doesn't solve try declaring above this line

jQuery = $.noConflict();
jQuery(document).ready(function($){

you need this order:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js" type="text/javascript"></script>

Upvotes: 2

taswyn
taswyn

Reputation: 4513

You need to actually load the JQuery library in your pages before you can use anything it defines. Without loading it, none of what you're trying to call has been defined anywhere, so there's nothing to call.

e.g. place the following before any other script tags:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>

Jai's answer regarding your syntax error is also correct in regards to that:

Uncaught SyntaxError: Unexpected token { :3000/assets/jquery.js?body=1:1

is being caused by the fact that you do not have parentheses following your function keyword in your anonymous function declaration.

The correct way to declare an anonymous function with no parameters is:


function () {
  //anonymous function routines/etc in here
}

So your first line would need to look like:


$(document).ready(function () {

Upvotes: 1

Johannes Konst
Johannes Konst

Reputation: 428

You should also load the full jquery file, eg:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

And changing the first two lines to the following is also a bit better:

jQuery(document).ready(function ($) {
    $('#sortable1, #sortable2')

Upvotes: 1

Scott Selby
Scott Selby

Reputation: 9570

include jquery in your HTML BEFORE including your .js file

<script src="../../Scripts/jquery-1.8.3.js" type="text/javascript"></script>

then..

<script src="../../Scripts/jQuery.js" type="text/javascript"></script>

Upvotes: 1

Related Questions