Cannot find syntax error, help me look

Question

I get this: Uncaught SyntaxError: Unexpected end of input at the end of the tag so I am missing a bracket or something but where oh where?

here my javascript code:

   <script type="text/javascript">

    var boxWidth = 133;
    var spaceBetween = 6;
    var stopScrolling = false;

    function addBoxToEnd() {

        var lastBox = $("div.property-carousel-box:last");
        var rightId = parseInt($(lastBox).attr("pageindex"), 10);
        var jsonUrl = '<%= Url.Action("NextProperty", "Carousel") %>/' + rightId;

        var itemLeft = (parseInt($(lastBox).css("left"), 10) * 1) + boxWidth + spaceBetween;
        $("div#property-carousel-box-container").append("<div class='property-carousel-box property-carousel-box-jquery' style='left: " + itemLeft + "px;'><div class='property-carousel-box-frame'></div></div>");

        $.getJSON(jsonUrl, function (data) {
          if (data != null) {
            var lastBox = $("div.property-carousel-box:last");
            $(lastBox).css("background", "url('" + data.ImageUrl + "') no-repeat");
            $("div.property-carousel-box:last > div.property-carousel-box-frame:first").append(data.Location + "<br />" + data.Rent);
            $(lastBox).attr("propertyid", data.PropertyId);
            $(lastBox).attr("pageindex", data.Page);
            $(lastBox).click(function () {
              location.href = '<%= Url.Action("Details", "Properties") %>/' + data.PropertyId;
            });

    }

    function addBoxToStart() {

        var firstBox = $("div.property-carousel-box:first");
        var leftId = parseInt($(firstBox).attr("pageindex"), 10);
        var jsonUrl = '<%= Url.Action("PreviousProperty", "Carousel") %>/' + leftId;

        var itemLeft = (parseInt($(firstBox).css("left"), 10) * 1) - boxWidth - spaceBetween;
        $("div#property-carousel-box-container").prepend("<div class='property-carousel-box property-carousel-box-jquery' style='left: " + itemLeft + "px;'><div class='property-carousel-box-frame'></div></div>");

        $.getJSON(jsonUrl, function(data) {
            if (data != null) {
                firstBox = $("div.property-carousel-box:first");
                $(firstBox).css("background", "url('" + data.ImageUrl + "') no-repeat");
                $("div.property-carousel-box:first > div.property-carousel-box-frame:first").append(data.Location + "<br />" + data.Rent);
                $(firstBox).attr("propertyid", data.PropertyId);
                $(firstBox).attr("pageindex", data.Page);
                $(firstBox).click(function() {
                  location.href = '<%= Url.Action("Details", "Properties") %>/' + data.PropertyId; 
            });
    }

    function scrollLeft() {
        // Add new box at the start
        addBoxToStart();

        $("div.property-carousel-box").each(function() {
            $(this).animate({ left: '+=' + (boxWidth + spaceBetween) }, 250);
        });

        // Now remove the box at the end
        $("div.property-carousel-box:last").remove();
    }

    function scrollRight() {
        // Add new box at the end
        addBoxToEnd();

        $("div.property-carousel-box").each(function() {
            $(this).animate({ left: '-=' + (boxWidth + spaceBetween) }, 250);
        });

        // Now remove the box at the start
        $("div.property-carousel-box:first").remove();
    }

    $(document).ready(function() {

        $("a#property-scroll-left").addClass("property-scroll-left-link");
        $("a#property-scroll-right").addClass("property-scroll-right-link");
        $("div#property-carousel-box-container").removeClass("property-carousel-box-container").addClass("property-carousel-box-container-jquery");
        $("div.property-carousel-box").addClass("property-carousel-box-jquery");

        var i = 0;
        $("div.property-carousel-box").each(function() {
            $(this).css('left', function() {
                var leftPos = (i * boxWidth) + (spaceBetween * (i + 1));
                return leftPos + 'px';
            });

            var propId = parseInt($(this).attr('propertyid'), 10);
            $(this).click(function() {
                location.href = '<%= Url.Action("Details", "Properties") %>/' + propId;
            });

            i++;
        });

        // Add an extra box at the start and end to have some time to load the new images
        // before they are moved into view.
        addBoxToEnd();
        addBoxToStart();


        $("a#property-scroll-left").click(function() {
            stopScrolling = true;
            scrollLeft();
            return false;
        });

        $("a#property-scroll-right").click(function() {
            stopScrolling = true;
            scrollRight();
            return false;
        });

        // Start the timer that performs the automatic scrolling
        $.timer(3000, function() {
            if (!stopScrolling)
                scrollRight();
            else {
                try {
                    timer.stop();
                } catch (Error) {
                    // Do nothing here...not sure why, but the timer plugin is still
                    // calling the timer.stop() command after the timer has been set to null.
                    // Not our code, so can't fix it.
                }
            }
        });
    });

</script>

where am i missing a bracket? thanks

Answer 1

Pay attention to your $.getJSON functions, they are missing } for the if (data != null) and }); for the $.getJSON , so

    var boxWidth = 133;
    var spaceBetween = 6;
    var stopScrolling = false;

    function addBoxToEnd() {

        var lastBox = $("div.property-carousel-box:last");
        var rightId = parseInt($(lastBox).attr("pageindex"), 10);
        var jsonUrl = '<%= Url.Action("NextProperty", "Carousel") %>/' + rightId;

        var itemLeft = (parseInt($(lastBox).css("left"), 10) * 1) + boxWidth + spaceBetween;
        $("div#property-carousel-box-container").append("<div class='property-carousel-box property-carousel-box-jquery' style='left: " + itemLeft + "px;'><div class='property-carousel-box-frame'></div></div>");

        $.getJSON(jsonUrl, function (data) {
            if (data != null) {
                var lastBox = $("div.property-carousel-box:last");
                $(lastBox).css("background", "url('" + data.ImageUrl + "') no-repeat");
                $("div.property-carousel-box:last > div.property-carousel-box-frame:first").append(data.Location + "<br />" + data.Rent);
                $(lastBox).attr("propertyid", data.PropertyId);
                $(lastBox).attr("pageindex", data.Page);
                $(lastBox).click(function () {
                    location.href = '<%= Url.Action("Details", "Properties") %>/' + data.PropertyId;
                });
            }
        });
    }

    function addBoxToStart() {

        var firstBox = $("div.property-carousel-box:first");
        var leftId = parseInt($(firstBox).attr("pageindex"), 10);
        var jsonUrl = '<%= Url.Action("PreviousProperty", "Carousel") %>/' + leftId;

        var itemLeft = (parseInt($(firstBox).css("left"), 10) * 1) - boxWidth - spaceBetween;
        $("div#property-carousel-box-container").prepend("<div class='property-carousel-box property-carousel-box-jquery' style='left: " + itemLeft + "px;'><div class='property-carousel-box-frame'></div></div>");

        $.getJSON(jsonUrl, function(data) {
            if (data != null) {
                firstBox = $("div.property-carousel-box:first");
                $(firstBox).css("background", "url('" + data.ImageUrl + "') no-repeat");
                $("div.property-carousel-box:first > div.property-carousel-box-frame:first").append(data.Location + "<br />" + data.Rent);
                $(firstBox).attr("propertyid", data.PropertyId);
                $(firstBox).attr("pageindex", data.Page);
                $(firstBox).click(function() {
                  location.href = '<%= Url.Action("Details", "Properties") %>/' + data.PropertyId;
                });
            }
        });
    }

    function scrollLeft() {
        // Add new box at the start
        addBoxToStart();

        $("div.property-carousel-box").each(function() {
            $(this).animate({ left: '+=' + (boxWidth + spaceBetween) }, 250);
        });

        // Now remove the box at the end
        $("div.property-carousel-box:last").remove();
    }

    function scrollRight() {
        // Add new box at the end
        addBoxToEnd();

        $("div.property-carousel-box").each(function() {
            $(this).animate({ left: '-=' + (boxWidth + spaceBetween) }, 250);
        });

        // Now remove the box at the start
        $("div.property-carousel-box:first").remove();
    }

    $(document).ready(function() {

        $("a#property-scroll-left").addClass("property-scroll-left-link");
        $("a#property-scroll-right").addClass("property-scroll-right-link");
        $("div#property-carousel-box-container").removeClass("property-carousel-box-container").addClass("property-carousel-box-container-jquery");
        $("div.property-carousel-box").addClass("property-carousel-box-jquery");

        var i = 0;
        $("div.property-carousel-box").each(function() {
            $(this).css('left', function() {
                var leftPos = (i * boxWidth) + (spaceBetween * (i + 1));
                return leftPos + 'px';
            });

            var propId = parseInt($(this).attr('propertyid'), 10);
            $(this).click(function() {
                location.href = '<%= Url.Action("Details", "Properties") %>/' + propId;
            });

            i++;
        });

        // Add an extra box at the start and end to have some time to load the new images
        // before they are moved into view.
        addBoxToEnd();
        addBoxToStart();


        $("a#property-scroll-left").click(function() {
            stopScrolling = true;
            scrollLeft();
            return false;
        });

        $("a#property-scroll-right").click(function() {
            stopScrolling = true;
            scrollRight();
            return false;
        });

        // Start the timer that performs the automatic scrolling
        $.timer(3000, function() {
            if (!stopScrolling)
                scrollRight();
            else {
                try {
                    timer.stop();
                } catch (Error) {
                    // Do nothing here...not sure why, but the timer plugin is still
                    // calling the timer.stop() command after the timer has been set to null.
                    // Not our code, so can't fix it.
                }
            }
        });
    });

Answer 2

You are missing closing bracket } for if condition and closing bracket, closing parenthesis and semicolon }); for your $.getJSON function call.

Answer 3

In each of the first two functions there are two closing brackets missing. In such a case, use an editor like Notepad++ or an IDE which has syntax highlighting and shows you corresponding brackets when you mark one of the pair to find where one is missing. This should do it:

function addBoxToEnd() {

        var lastBox = $("div.property-carousel-box:last");
        var rightId = parseInt($(lastBox).attr("pageindex"), 10);
        var jsonUrl = '<%= Url.Action("NextProperty", "Carousel") %>/' + rightId;

        var itemLeft = (parseInt($(lastBox).css("left"), 10) * 1) + boxWidth + spaceBetween;
        $("div#property-carousel-box-container").append("<div class='property-carousel-box property-carousel-box-jquery' style='left: " + itemLeft + "px;'><div class='property-carousel-box-frame'></div></div>");

        $.getJSON(jsonUrl, function (data) {
          if (data != null) {
            var lastBox = $("div.property-carousel-box:last");
            $(lastBox).css("background", "url('" + data.ImageUrl + "') no-repeat");
            $("div.property-carousel-box:last > div.property-carousel-box-frame:first").append(data.Location + "<br />" + data.Rent);
            $(lastBox).attr("propertyid", data.PropertyId);
            $(lastBox).attr("pageindex", data.Page);
            $(lastBox).click(function () {
              location.href = '<%= Url.Action("Details", "Properties") %>/' + data.PropertyId;
            });
          }
        }
    }

    function addBoxToStart() {

        var firstBox = $("div.property-carousel-box:first");
        var leftId = parseInt($(firstBox).attr("pageindex"), 10);
        var jsonUrl = '<%= Url.Action("PreviousProperty", "Carousel") %>/' + leftId;

        var itemLeft = (parseInt($(firstBox).css("left"), 10) * 1) - boxWidth - spaceBetween;
        $("div#property-carousel-box-container").prepend("<div class='property-carousel-box property-carousel-box-jquery' style='left: " + itemLeft + "px;'><div class='property-carousel-box-frame'></div></div>");

        $.getJSON(jsonUrl, function(data) {
            if (data != null) {
                firstBox = $("div.property-carousel-box:first");
                $(firstBox).css("background", "url('" + data.ImageUrl + "') no-repeat");
                $("div.property-carousel-box:first > div.property-carousel-box-frame:first").append(data.Location + "<br />" + data.Rent);
                $(firstBox).attr("propertyid", data.PropertyId);
                $(firstBox).attr("pageindex", data.Page);
                $(firstBox).click(function() {
                  location.href = '<%= Url.Action("Details", "Properties") %>/' + data.PropertyId; 
                });
            }
        }
    }