1

I've made two webparts for Sharepoin 2010 with jQuery plugins fancybox (slider) and cycle (slider). I need to locate both webparts on one page. But it doesn't work. I tried to use jQuery.noConflict() to fix it:

For fancybox:

<div id="images" class="images" runat="server">

<link rel="stylesheet" href="/SiteAssets/jquery.fancybox-1.3.4.css" />
<script type="text/javascript" src="/SiteAssets/jquery-1.9.0.js"></script>
<script type="text/javascript" src="/SiteAssets/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript">
var $gallery = jQuery.noConflict();
jQuery(document).ready(function (jQuery) {
    $gallery("a[rel=group]").fancybox();
});
</script>       

For cycle:

<div id="slideshowdiv" class="slideshow" style="border: 3px solid black;">

<script type="text/javascript" src="/SiteAssets/jquery-1.9.0.js"></script>
<script type="text/javascript" src="/SiteAssets/jquery.cycle.all.js"></script>

<script type="text/javascript">
var $slider = jQuery.noConflict();

function runSlider() {
    $slider('.slideshow').cycle({
        fx: 'fade'
    });
};

jQuery(document).ready(function () {
    var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
      <soapenv:Body> \
        <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
          <listName>Slider</listName> \
          <viewFields> \
            <ViewFields> \
              <FieldRef Name='SliderContent' /> \
            </ViewFields> \
          </viewFields> \
        </GetListItems> \
      </soapenv:Body> \
    </soapenv:Envelope>";

    jQuery.ajax({
        url: "/_vti_bin/lists.asmx",
        type: "POST",
        dataType: "xml",
        data: soapEnv,
        contentType: "text/xml; charset=\"utf-8\"",
        complete: function (xData, status) {
            var div = document.getElementById("slideshowdiv");
            jQuery(xData.responseXML).find("z\\:row").each(function () {
                var elem = document.createElement("img");
                elem.setAttribute("src", $(this).attr("ows_SliderContent").replace(',', ""));
                elem.setAttribute("height", "200");
                elem.setAttribute("width", "200");
                elem.setAttribute("alt", "test");
                elem.onload = runSlider;
                div.insertBefore(elem, div.firstChild);
            });
        }
    });
});

This code is in .ascx files of Visual WebParts.

Can you tell me, what's wrong? Thanks.

UPD: I've posted all markup of webparts, maybe there is troubles.

4

That is simple. Do not have two references to jQuery in your webparts. Load jQuery only once. What happens is that a new jQuery overrides all the extensions...

Consider this. Every js code declared as <script> is loaded synchronously.

  • Web Part 1 loads jQuery and fancybox. Fancybox is an extension of jQuery.
  • Web Part 2 loads jQuery again, and overrides both jQuery and all the extensions loaded previously.

If you move the second webpart before the first webpart, the slider extension will be overriden.

To solve it, just load jQuery once.

  • You could load it in the master page and all pages will have jQuery...
  • Or you can load jQuery conditionally in every webpart, meaning, load it only if it is not declared (like in html5boilerplate):

<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.1.min.js"><\/script>')</script>

1

The variable names in your example(both scripts) uses "$jq", we can use different names.

  • I changed names, but there is no effect. – Max Zhukov Jul 7 '13 at 20:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.