1

I have two different javascript code that load when page load happens in my sharepoint site wiki page. But it looks like they are fighting with each other.

First javascript I am using it to get logged in users profile image.

Second Script I am using to load a slider in my page.

When I load both together User Profile Javascript works but Slider doesnt.

But when I separate them into two different wiki page they both work.

Here is Userprofile Script I load

    <script type="text/javascript">


    ExecuteOrDelayUntilScriptLoaded(getUserProfileImage,'sp.js');

    var CamlResult;
    function getUserProfileImage(){
        var clientContext = new SP.ClientContext.get_current();
        var web = clientContext.get_web();
        var userInfoList = web.get_siteUserInfoList();
        var camlQuery = new SP.CamlQuery();

    var userID = _spPageContextInfo.userId;

    // define the query to retrieve the given user's details
    camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name="ID"/><Value Type="Number">' + userID + '</Value></Eq></Where></Query><RowLimit>1</RowLimit></View>');

    CamlResult = userInfoList.getItems(camlQuery);
    clientContext.load(CamlResult);
    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded),Function.createDelegate(this, this.onQueryFailed));
}

function onQuerySucceeded(sender, args){
    var profile, title, login, email, pic, picUrl;

    // There should be only result. Get the item at index 0
    profile = CamlResult.itemAt(0); 

    // read all the properties out

    title = profile.get_item("Title");
    login = profile.get_item("Name");
    email = profile.get_item("EMail");
    pic = profile.get_item("Picture");

    if (pic) { 
        picUrl = pic.get_url();


    } 

    // Setup HTML
    document.getElementById('userLoginName').innerHTML = login;
    document.getElementById('userTitle').innerHTML = title;
    document.getElementById('userEmail').innerHTML = email;


    if (picUrl) {
        // create the image
        imgMyPicture = document.createElement('img');


        imgMyPicture.setAttribute('src', picUrl);
        imgMyPicture.setAttribute('title', 'Image from Current Users Profile');
        imgMyPicture.setAttribute('alt', 'Profile Picture');

        // append the image
        document.getElementById('userPicture').appendChild(imgMyPicture);


    }
    else {
        document.getElementById('userPicture').innerHTML = "No image found in user profile";
    }
}

Slider Script:

    <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/0.7.1a/jquery.SPServices-0.7.1a.min.js"></script>
 <script type="text/javascript" src="../SiteAssets/unslider.min.js"></script>

    <style type="text/css">
   .hillbillyBanner { position: relative; overflow: auto;  }
      .hillbillyBanner li { list-style: none; background-repeat: no-repeat; }
           .hillbillyBanner ul li { float: left;height:200px; }
               .hillbillyBanner ul {margin-left: -40px;}
               .hillbillyBanner ul li div p{padding-left:270px;}

       </style>

  <script type="text/javascript">

         jQuery(document).ready(function($) {

           var sliderList = "Slider"; // Name of the list that contains slides
            var slideContentField = "HTML"; //Name of the Rich text field that has slide content
            var slideBackgroundImageField = "Picture"; //Name of the picture field to use as background image
            var slidetitlefield="Title";


                 HillbillySlider(sliderList,slideContentField,slideBackgroundImageField,slidetitlefield);






       });


       function HillbillySlider(sliderList,slideContentField,slideBackgroundImageField,slidetitlefield) {

          //query to retrieve all items
          var query = "<Query><Where><Neq><FieldRef Name='ID' /><Value Type='Number'></Value></Neq></Where></Query>";

         //return fields for slide content, background picture and title
          var camlViewFields = "<ViewFields><FieldRef Name='"+slideContentField+"' /><FieldRef Name='"+slideBackgroundImageField+"' /><FieldRef Name='"+slidetitlefield+"' /></ViewFields>";

         $().SPServices({
                operation: "GetListItems",
               async: true,
               listName: sliderList,
            CAMLViewFields: camlViewFields,
              CAMLQuery: query,
             completefunc: function(xData, Status) {
  $(xData.responseXML).SPFilterNode("z:row").each(function() {
                    var slideContent = ($(this).attr("ows_"+slideContentField));
                    var slideTitle = ($(this).attr("ows_"+slidetitlefield));

                     var picture = $(this).attr("ows_"+slideBackgroundImageField)==undefined?"":$(this).attr("ows_"+slideBackgroundImageField).split(",")[0];
                    //create slide (li) and append it to other slides
                     $("#hillbillySlider").append("<li style=\"background-image: url('"+picture +"');\"> <span style=\"padding-left:270px;font-weight: bold;\">"+slideTitle+"</span>"+slideContent+"</li>");

                }); // end completefunc
                //start the slider
               $('.hillbillyBanner').unslider();
               }
          }); // end SPServices call
        }
   </script>

  <div class="hillbillyBanner">
  <ul id='hillbillySlider'></ul>


  </div>

Can you please help me find what is fighting here and what can i do to make them load together?

1

Please use jQuery.noconflict() method for conflicting different JavaScript on same page.

Please check below link.

https://api.jquery.com/jquery.noconflict/

  • Tried adding that to script didnt work. – allegro octopus Feb 7 '17 at 15:38
  • Is it possible if you will move "get logged in users profile image" code into slider code document.ready function? – Samir Khimani Feb 7 '17 at 16:56

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.