Question

I’m just trying to learn some ajax so I wrote some code for basically an address book to pull some data. My javascript is rubbish but I cannot seem to understand what I am doing wrong, the error points to function ajaxCall but I see no issue with that function either:

(function () {
    var searchForm = document.getElementById("search-form"),
        searchField = document.getElementById("q"),
        getAllButton = document.getElementById("get-all"),
        target = document.getElementById("output");

    var addr = {
        search: function (event) {
            var output = document.getElementById("output");

            //start ajax call
            ajaxCall("data/contacts.json", output, function (data) {
                var searchValue = searchField.value,
                addrBook = data.addressBook,
                count = addrBook.length,
                i;

                //stop default behavior
                event.preventDefault();

                //clear target
                target.innerHTML = "";

                if (count > 0 && searchValue !== "") {
                    for (i = 0; i < count; i++) {
                        var obj = addrBook[i],
                            isItFound = obj.name.indexOf(searchValue);
                        if (isItFound !== -1) {
                            target.innerHTML += '<p>' + obj.name + ', <a href="mailto:' + obj.email + '">' + obj.email + '</a><p>';
                        } //end if isItFound
                    } //end for loop
                } //end if count check
            }); //end ajax call
        }, //end method search

        getAllContacts: function () {
            var output = document.getElementById("output");
            ajaxCall("data/contacts.json", output, function (data) {
                var addrBook = data.addressBook,
                        count = addrBook.length,
                        i;

                target.innerHTML = "";

                if (count > 0) {
                    for (i = 0; i < count; i++) {
                        var obj = addrBook[i];
                        target.innerHTML += '<p>' + obj.name + ', <a href="mailto:' + obj.email + '">' + obj.email + '</a><p>';
                    } //end for loop
                } //end if
            }); //end ajax call
        }, //end method getAllContacts
        setActiveSection: function () {
            this.parentNode.setAttribute("class", "active");
        }, //end method setActiveSection
        removeActiveSection: function () {
            this.parentNode.removeAttribute("class");
        }, //end method removeActiveSection
        addHoverClass: function () {
            searchForm.setAttribute("class", "hovering");
        }, //end method addHoverClass
        removeHoverClass: function () {
            searchForm.removeAttribute("class");
        } //end method removeHoverClass
    }   //end addr object  
    searchField.addEventListener("keyup", addr.search, false);
    searchField.addEventListener("focus", addr.addActiveSection, false);
    searchField.addEventListener("blur", addr.removeActiveSection, false);
    getAllButton.addEventListener("click", addr.getAllContacts, false);
    searchForm.addEventListener("submit", addr.search, false);
    searchForm.addEventListener("mouseover", addr.addHoverClass, false);
    searchForm.addEventListener("mouseout", addr.removeHoverClass, false);
})(); //end anon function

function getHTTPObject() {
    var xhr;

    //in most cases this first if is executed
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    //otherwise support crappy IE6 and below
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    return xhr;
}

function ajaxCall(dataUrl, outputElement, callback) {
    //get ajax object
    var request = getHTTPObject();

    outputElement.innerHTML = "Loading...";
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            //good ajax response..now save it
            var contacts = JSON.parse(request.responseText);
                if (typeof callback === "function")
                    callback(contacts);
        }   //end upper if
    }   //end onreadystatechange

    request.open("GET", dataUrl, true);
    request.send(null);
}

The javascript development tools keeps giving me an unexpected token } on line 97 but that changes all so often. Am I missing a curly brace somewhere?

Answer 1

I did put your code to this fiddle and fixed the errors as far as i can.
You missed some curly braces and semicolons. Also, you used ajaxCall() and getHTTPObject() before they were declared. Check it out. Unfortunately, i dont know if the problem is already fixed, but now the code is valid at least 🙂

Btw: (in my opinion) such long Code-Samples are always better pasted into a fiddle. Not only because you can focus on the probably messy code here while referring to the complete code sample somewhere else, also because you can make sure that there are no syntax-errors as you can quickly validate you code using jsLint before asking the question here.