'$' is undefined javascript error

Question

<script type="text/javascript">
    $(function() {
        $('#WaterMark').draggable(
                    {
                        start: function(e, ui) {
                        },
                        cursor: 'move',
                        zIndex: 2700,
                        revert: 'invalid',
                        containment: '#OriginalImageContainer'
                    });
        $('#OriginalImage').droppable({
            hoverClass: 'DroppableOver',
            drop: InitializeWaterMark
        })
    });

    var InitializeWaterMark = function() {
        var position = $('#WaterMark').position();
        var imgPosition = $('#OriginalImageContainer').position();
        document.getElementById('xpos').value = position.left - imgPosition.left;
        document.getElementById('ypos').value = position.top - imgPosition.top;

    }
    </script>

this is a sample javascript code i got regarding drag and drop of images in a asp.net webpage...But it returns a error stating '$' is undefined..please help me out

It looks like the code is using jQuery, and jQuery UI. You'll need to download and include them both before your code. — James Allardice
– James Allardice, Commented Nov 11, 2011 at 9:53
An obvious first check: have you included jQuery in your page? The $ variable isn't stock JavaScript, it's jQuery — Zruty
– Zruty, Commented Nov 11, 2011 at 9:53
It does not make sense to call document.getElementBydId() when you already use a JS CSS-selector framework like jQuery. $('#xpos).val(position.left - imgPosition.left) will do the same — Maxim Krizhanovsky
– Maxim Krizhanovsky, Commented Nov 11, 2011 at 9:54

Phil.Wheeler · Accepted Answer · 2011-11-11 10:00:15Z

5

At a guess, I'd say you were missing the library to support that script (probably jQuery).

You need to include a reference to the JavaScript framework in order to get the draggable functionality you're looking for.

Try adding the following to your page (before the script block in your example):

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/jquery-ui.js"></script>

edited Nov 11, 2011 at 10:00

answered Nov 11, 2011 at 9:53

Phil.Wheeler

16.9k10 gold badges103 silver badges157 bronze badges

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

4 Comments

Karthik Over a year ago

@Phil.Wheeler-i have included it now it shows. Object doesn't support property or method 'draggable'..can u please help...

Phil.Wheeler Over a year ago

I probably should've guessed that. Try adding a reference to jQuery UI as well. I've updated my answer to reflect that.

Phil.Wheeler Over a year ago

As an aside, the examples in this answer retrieve the JavaScript to make the draggable stuff work, but you're probably going to want style sheets and such as well. I recommend you have a look at jQuery UI to see examples of how to theme your elements and for interactive demos on the ways in which you can get your draggable elements to work.

Karthik Over a year ago

@Phil.Wheeler-thanks it worked ..but after dragging the image over the another it shows.. Unable to set value of the property 'value': object is null or undefined...thanks for ur help

Tim B James · Accepted Answer · 2011-11-11 10:28:41Z

Include your jQuery and jQuery UI scripts in the page. I tend to use the jQuery and jQuery UI files from a CDN (Content Delivery Network) http://www.asp.net/ajaxlibrary/cdn.ashx Also I have a backup for when the CDN might be down.

<script src="//ajax.aspnetcdn.com/ajax/jquery/jquery-1.6.2.min.js"></script>
<script> window.jQuery || document.write('<script src="/scripts/jquery-1.6.2.min.js"><\/script>')

Then the same with the jQuery UI library.

If the CDN goes down, then it checks to see if jQuery exists and will then use the local version if not.

Niranjan Singh · Accepted Answer · 2011-11-11 09:58:22Z

1

if it is jquery include problem then put this tag in head of your aspx page and edit the src attribute in the script tag to point to your copy of jquery.js. For example, if jquery.js is in the same directory as your HTML file, you can use:

You can download your own copy of jQuery from the Downloading jQuery page

if you have done correct then explain the scenario little more..

answered Nov 11, 2011 at 9:58

Niranjan Singh

18.3k2 gold badges45 silver badges76 bronze badges

2 Comments

Karthik Over a year ago

Niranjan Kala-i referred the code from this site.. its for dragging and dropping a image over another image...63.236.73.220/showthread.php?t=644902

Niranjan Singh Over a year ago

follow this question jquery drag image stackoverflow.com/questions/1019873

Collectives™ on Stack Overflow

'$' is undefined javascript error

3 Answers 3

4 Comments

Comments

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

2 Comments

Linked

Related