JQuery in a Visual WebPart won't load on the page with the webpart

Question

Hey I have a bunch of JavaScript/Jquery code that works really well when I use a Content-Editor webpart, but does not execute when I add the same code to the VisualWebPart mark up.

I am referencing the JavaScript in the following way for both:

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

<script type="text/javascript">
//Code here
</script>

Any idea why my JQuery code is not being recognized? (Yes I am using the $(document).ready(function() { .. }) )

Note: The JQuery code is not loaded on the page

I am fairly new to SharePoint development, visual webparts in particular. If you could help out I'd truly appreciate it.

Thank You, MyName.

---

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {

        alert('test!'); 

        //move he last list item before the first item. The purpose of this is if the user clicks to slide left he will be able to see the last item.
        $('#carousel_ul li:first').before($('#carousel_ul li:last'));

... more Code


    });
</script>

Answer 1

May be another jquery version loaded before yours? and conflict appear...

Answer 2

At least you should use the following approach instead of jquery ready function:

<script type="text/javascript"> 
function TheFunctionToDoTheWork() 
{
    // Do the work here
}

// "Subscribe to the SharePoint "page load"
_spBodyOnLoadFunctionNames.push('TheFunctionToDoTheWork');
</script>

The document.ready in many cases fires too early in the SharePoint page cycle. In the example above you can see the SharePoint interface for "subscribing" to the page loaded event in the SharePoint point of view.

Answer 3

try to use this:

<script type=\"text/javascript\"> window.jQuery || document.write('<script src=\"path_your_jquery\">

If your problem has anything to do with the Jquery conflict then this should solve the problem.

Answer 4

Using Firebug or I/E Developer toolbar, make sure that the jquery is being loaded on the page.

Next, make sure that your $(document).ready(); is not getting called before the jquery script loads.

Also, try the following code:

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

<script type="text/javascript">
EnsureOrDelayUntilScriptLoaded(function(){
//Your Code here
},"jquery.min.js");
</script>