jQuery ".cycle is not a function" error - follow-up from http://stackoverflow.com/questions/1586998/

Question

So I am trying to implement the solution suggested to me in my previous question (http://stackoverflow.com/questions/1586998/). I want to use the Cycle library found here: http://malsup.com/jquery/cycle2/ to cycle through the contents of a DIV that I am populating with rows from a custom SharePoint list. The html I am creating appears to be valid, but when I try to run the cycle code below I get:

Error: $("#tasksUL").cycle is not a function
Source File: http://ourdomain.net/Pages/Default.aspx
Line: 426

Here is the code I have blocked into a Content Editor Web Part:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="/SiteCollectionDocuments/jquery.timers-1.0.0.js"></script>
<script type="text/javascript" src="/SiteCollectionDocuments/jquery.cycle.all.2.72.js"></script>
<script type="text/javascript">

$(document).ready(function() {

// Create the SOAP request        
// NOTE: we need to be able to display list attachments to users, hence the addition of the
// <queryOptions> element, which necessitated the addition of the <query> element

var soapEnv =
"<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'&gt;&lt;soapenv:Body&gt;&lt;GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'&gt;&lt;listName&gt;testlist&lt;/listName&gt;&lt;viewFields&gt;&lt;ViewFields&gt;&lt;FieldRef Name='Title' /><FieldRef Name='Body' /><FieldRef Name='ID' /><FieldRef Name='Attachments' /></ViewFields> </viewFields><query><Query /></query><queryOptions><QueryOptions><IncludeAttachmentUrls>TRUE</IncludeAttachmentUrls></QueryOptions></queryOptions></GetListItems></soapenv:Body></soapenv:Envelope>";

// call this SOAP request every 20 seconds
$("#tasksUL").everyTime(20000,function(i){
    // our basic SOAP code to hammer the Lists web service
    $.ajax({
    url: "http://ourdomain.net/_vti_bin/lists.asmx",
    type: "POST",
    dataType: "xml",
    data: soapEnv,
    error: printError,
    complete: processResult,
    contentType: "text/xml; charset=\"utf-8\""
    });
  });
});

// basic error display that will pop out SOAP errors, very useful!
function printError(XMLHttpRequest, textStatus, errorThrown)
{
  alert("There was an error: " + errorThrown + " " + textStatus);
  alert(XMLHttpRequest.responseText);
}

// main method that will cycle through the SoAP response nodes
function processResult(xData, status) 
{
    var liHtml = "";
  $(xData.responseXML).find("z\\:row").each(function() 
  {
    // resets display element
    $("#tasksUL").empty();

    // gets attachments array - if there is more than one attachment,
    // they get seperated by semi-colons in the response
    // they look like this natively (just an example):
    // ows_Attachments = ";#http://server/Lists/Announcements/Attachments/2/test.txt;
    // #http://server/Lists/Announcements/Attachments/2/UIP_Setup.log;#"

     var mySplitResult = $(this).attr("ows_Attachments").split(";");
    // set up storage for later display of images
    var notice_images = "";

    // processes attachments - please forgive the kludge!  
    for(i = 0; i < mySplitResult.length; i++)
    {
     // check to see the proper link URL gets chosen
     if (i % 2 != 0 && i != 0)
     {
         // strips out pound sign
         mySplitResult[i] = mySplitResult[i].replace("#", "");

         // (possibly redundant) check to make sure element isn't simply a pound sign  
         if (mySplitResult[i] != "#")
         {
          // adds an img tag to an output container
          notice_images = notice_images + "<img src='" + mySplitResult[i] + "' border='0' align='right' style='float:right;' /><br />"; 
         }
     }
    }

    // create final output for printing
    liHtml = liHtml + "<div><h3>" + $(this).attr("ows_Title") + "</h3><p>" + notice_images + $(this).attr("ows_Body") + "</p></div>";
  });

    // assign output to DIV tags
  $("#tasksUL").html(liHtml);
}
</script>

<script type="text/javascript">
$(document).ready(function() {
    $('#tasksUL').cycle({
     fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    });
});
</script>

<div id="tasksUL">&nbsp;</div>

The code is firing off as expected, but I am wondering what I am doing wrong with regards to the Cycle function... I have tryed explicitly linking to all of the JavaScript files in the includes I have above, and I can reach them in a browser no problems. In order to use this library correctly, do I need to actually define CSS for #tasksUL ? Is there anything obvious in the code that I need to punch in the face? Thanks!

Answer 1

Where did you get the jquery.cycle...js from?

At least the zip-file from the jQuery Cycle Plugin homepage seems to have strange additional characters at the end of the file name. when I unpack it my file is called jquery.cycle.all.min.js_ instead of jquery.cycle.all.min.js

Answer 2

Actually, and there was no way for anyone to know this, the reason this was failing was because someone had installed a site collection jQuery package that was old and didn't work very well with jCycle. Once I deactivated that feature on the collection, restarted IIS, and refreshed the page, everything worked fine. As an extra step I downloaded the latest full version of jQuery into a document library and linked to it instead of the Google-hosted version of the script. So all of the js I am using lives inside the site collection now.

I was able to figure out about the conflicting versions of jQuery but using Firebug's Console and Script debugger. I had to set the debugger to halt on all errors, but the very first error that came up was referencing the site collection jQuery package and not my included Google code. That is the reason I am answering my own question. There are other poor bastards out there doing SharePoint development and it may not occur to them to use FireFox to test their SP installations given how much it favours IE and all.

Thanks to all who read and answered/commented!