0

I have a SharePoint public site branded and it was working fine when out of the sudden the slider with images stopped appearing and I get this error :

Unable to get property 'split' of undefined or null reference

Error Message

I have searched to find where this split function is referenced and I located it in the slider.txt file I have for the pages :

<script src="/../style library/mystyles/JS/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="/../style library/mystyles/JS/jquery.SPServices-0.7.2.js" type="text/javascript"></script>
<script src="/../style library/mystyles/JS/slides.jquery.js" type="text/javascript"></script>
<link rel="stylesheet" href="/../style library/mystyles/css/global.css">
<script>
      var j =jQuery.noConflict();
    j(document).ready(function () {
        j().SPServices({
            operation: "GetListItems",
            async: false,
            listName: "Pictures",
            CAMLRowLimit: 6,
            completefunc: function (xData, Status) {
                var hasRows = false;
               j(xData.responseXML).find("z\\:row, row").each(function () {
                    hasRows = true;
                    var _url = '/' + j(this).attr("ows_RequiredField")
                    var _title = j(this).attr("ows_Description");
                     ***var blog = ($(this).attr("ows_blog")).split(",")[0];***

                    _slideDiv = j("<div class='slide'/>");
                    _link = j("<a href='"+ blog +"'  src='" + _url + "'/>");
                    _Image =j("<img  id='slideShowImage' src='" + _url + "'/>");
                  j(_link).append(_Image);
                    _slideDiv.append(_link);

                    _Title = j("<div class='caption1'><p>" + _title + "</p></div>");
                    _slideDiv.append(_Title);

                    j(".slides_container").append(_slideDiv);
                });
            }
        });
    });


    j(function () {
        j('#slides').slides({
            preload: true,
            preloadImage: '/../style library/mystyles/images/loading.gif',
            play: 5000,
            pause: 2500,
            effect:'slide',
             slideSpeed:100,
            hoverPause: false,
            animationStart: function (current) {
                j('.caption1').animate({
                    bottom: -35
                }, 100);
                if (window.console && console.log) {
                    // example return of current slide number
                    console.log('animationStart on slide: ', current);
                };
            },
            animationComplete: function (current) {
                j('.caption1').animate({
                    bottom: 0
                }, 200);
                if (window.console && console.log) {
                    // example return of current slide number
                    console.log('animationComplete on slide: ', current);
                };
            },
            slidesLoaded: function () {                      
                j('.caption1').animate({
                    bottom: 0
                }, 200);
            }
        });
    });
</script>

<div id="container">
    <div id="example">
        <div id="slides">
            <div class="slides_container" id="slides_container_div">
            </div>          

         <a class="prev" href="#" ><img src="/../style library/mystyles/images/left-arrow.png"/></a>
                      <a class="next" href="#"><img src="/../style library/mystyles/images/right-arrow.png"/></a>
    </div>
</div>

Can anyone please help me out to fix this? I haven't changed anything for a long time and this appeared recently.

Thanks a lot for your help!

3
  • 1
    Try this in the console console.log(j(this).attr("ows_blog")); Apr 19 '16 at 7:59
  • I have tried it and I get undefined . This means that It can't find the value ows_blog ? Why does this happen all of a sudden? Apr 19 '16 at 11:34
  • It seems ows_blog is not the proper field internal name. Double check that. Apr 20 '16 at 9:15
0

It looks the your blog field is a URL field. A SharePoint URL field is built with 2 piece of information, the URL and the description. The first part is the URL. If your column is not a required field, then probably there's some data with no value hence you're getting the error "Unable to get property 'split' of undefined or null reference".

You should re-write the part with proper data validation. Ex.

var blog = $(this).attr("ows_blog");
blog = blog ? blog.split(",")[0] : '#';

Hope it helps.

4
  • As per OP $(this).attr("ows_blog") itself is returning null Apr 20 '16 at 9:14
  • It will return null if the value is null or the field doesn't exist. Thus a validation will help.
    – Aveenav
    Apr 20 '16 at 17:16
  • Thanks a lot for your help. With your validation suggested the slider worked and show undefined field on an image. I filled the value needed and it worked without producing any errors. Again thanks a lot for your help! Apr 21 '16 at 5:53
  • glad it helped. You can do similar validation for other fields too.
    – Aveenav
    Apr 21 '16 at 14:14
-1

Solution 1:

If ows_blog is having a null value

Than

null.split(",")

causes: Unable to get property 'split' of undefined or null reference

Please check the value of ($(this).attr("ows_blog")) first.

Solution 2:

The quotes may be single instead of double or the tag uppercase.

Note : Look in the console for what Chrome actually uses

1
  • Yes the console.log(j(this).attr("ows_blog")); returns undefined value. I will try the single quotes but I have a feeling it won't work. Something has changed for some reason , but I haven't changed anything for months Apr 19 '16 at 11:35

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.