Javascript & Chrome Debugger: "Uncaught SyntaxError: Unexpected token } "

Question

i'm writing a javascript file. I'm loading some data from a java jersey webservice which is running fine. The data is then parsed in a html table via javascript (s. fillSelect()- function). Now i Want the field "id" to become onclickable. When clicked the function "loadRegistrationForm" shall be started.

However when I click on the table's id field, Chrome debugger tells me: "Uncaught SyntaxError: Unexpected token } ". In Internet Explorer it looks to be the same issue. But for me it seems to be fine, I cant find any unexpected "}" ?

Could anyone please hint me in the right direction where I make the error?

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="style.css" type="text/css" rel="stylesheet" />
<title>Registrierung für ein Event</title>

<script type="text/javascript"  src="http://code.jquery.com/jquery-2.0.0.js">
</Script>
<script type="text/javascript">

var EventAPI = {
    newRequest: function(type, urlSuffix, data) {
        var request = {
            url: "http://192.168.3.205:8081/MarketingAppServer/rest/MarketingApp/" + urlSuffix,
            type: type,
            data: data ? JSON.stringify(data) : null,
            contentType: "application/json",
            dataType: "json",
        }
        return request;
    },

    addInvitation: function(Customer) {
        var request = EventAPI.newRequest("POST", "createInvitation", Customer);
        $.ajax(request).done(function(response) {
        //alert("Add Invitation Response Message" + response.text);
        });
    },

    getDonwloadLink: function(Customer) {
        var request = EventAPI.newRequest("GET", "getPassFile");
        $.ajax(request).done(function(response) {
        //alert("getDownloadLink Response Message: " + response.text);  
        });
    }
};

callService = function(Uri, successFunction) {
    $.ajax({
        cache: true,
        url: Uri,
        data: "{}",
        type: "GET",
        dataType: "json",
        error: ajaxCallFailed,
        failure: ajaxCallFailed,
        success: successFunction
    });
};

function Customer(Vorname, Name, Email, Firma) {
    this.vorname = Vorname;
    this.name = Name;
    this.emailAdresse = Email;
    this.firma = Firma;
}

function generateInvitation() {
    //generate customer
    var customer = new Customer($("#customer_Vorname").val(), $("#customer_Name").val(), $("#customer_Email").val(), $("#customer_Firma").val());
    EventAPI.addInvitation(customer);
    var displayDownloadLink;
    var fileName = customer.vorname + "_" + customer.name + "_" + customer.emailAdresse + "_" + customer.firma + "_" + "pass.pkpass";

    var xmlhttp;
    xmlhttp = new XMLHttpRequest();
    var url = "http://192.168.3.205:8081/MarketingAppServer/rest/MarketingApp/getPassFile/" + fileName;
    xmlhttp.open('GET', url, true);
    xmlhttp.send(null);
    xmlhttp.onreadystatechange = function() {

        if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
                var myOutput = "<br>Vielen Dank fuer Ihre Registrierung - Sie koennen ihre Einladung hier herunterladen: <a href='" + xmlhttp.responseText + "'> pass </a>";
                alert(myOutput);
                if (document.getElementById) {
                    document.getElementById("myOutput").clear;
                    document.getElementById("myOutput").innerHTML = myOutput;
                }
            } 
            else {alert("Error ->" + xmlhttp.responseText);}
        }
    };

}

/**
*This function loads a list of available events
*/
function fillSelect() {
    var xmlhttp;
    xmlhttp = new XMLHttpRequest();
    var url = "http://192.168.3.205:8081/MarketingAppServer/rest/MarketingApp/getEventList";
    xmlhttp.open('GET', url, true);
    xmlhttp.send(null);

    xmlhttp.onreadystatechange = function() {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            //save returned data to variable
            var data = xmlhttp.responseText;
            alert(data);
            //create result table
            var customerList = '<table border="1">' + "<tr>" + "<th>ID</th>" + "<th>Event</th>" + "<th>Datum</th></tr>";

            //iterate result data & fill table with results
            var myObject = eval('(' + data + ')');
            for (i in myObject) {
                //Problem: Wenn es nur ein Object gibt, dann mdarf nur myObject["id"] aufgerufen werden -- wie kann das vermieden werden?
                var event = new Event(myObject[i]["id"], myObject[i]["eventName"], myObject[i]["eventDate"]);
                alert(event.eventName);
                alert(event.id);
                alert(event.eventDate);
                customerList = customerList.concat(
                "<tr><td id='" + event.id + "' onclick=loadRegistrationForm(" + event + ");return false;'><a href='#'>" + event.id + "</a></td>" + 
                "<td>" + event.eventName + "</td>" + 
                "<td>" + event.eventDate + "</td>" + "</tr>");
                alert(customerList);
            }
            //close data table
            customerList = customerList.concat("</table>");
            //make result table visible
            if (document.getElementById) {
                document.getElementById("myOutput").clear;
                document.getElementById("myOutput").innerHTML = customerList;
            }
        }
    };
}

function Event(id, eventName, eventDate) {
    this.id = id;
    this.eventName = eventName;
    this.eventDate = eventDate;
}

function loadRegistrationForm(Event) {
    alert("test");
//alert(Event.eventName);
}

</script>

</head>
<body>

    <div class="content">
        <img src="res/logo_jpg_klein.jpg" alt="tim_logo" />
        <ul id="Navigation">
            <li><a href="index.html">Wer ist hier </a></li>
            <li><a href="registerforEvent.html">Für Event registrieren </a></li>
        </ul>

        <h1>Hier können Sie sich für ein Event registrieren.</h1>
        <div id="myOutput" class="content"> 

            <form id="formular" name="formular"  action="rest/MarketingApp/createInvitation" method="post" enctype="application/x-www-form-urlencoded" onsubmit="return false;">
            <p>
                <label>Vorname: </label><input type="text" id="customer_Vorname" name="customer_Vorname" />
            </p>
            <p>
                <label>Name: </label> <input type="text" id="customer_Name" name="customer_Name" />
            </p>
            <p>
                <label>Email: </label> <input type="text" id="customer_Email" name="customer_Email" />
            </p>
            <p>
                <label>Firma: </label> <input type="text" id="customer_Firma" name="customer_Firma" />
            </p>
            <br>-------------------------------------------------------------------------<br>
            <p>
                <label>Event: </label> 
                <script type="text/javascript">
                    fillSelect();
                </script>
            </p>
            <select>
                <option value="email">Send pass as Email</option>
            </select>
            <input type="button" value="Fuer Event registrieren" onclick="generateInvitation()" />
            </form>
        </div>

    </div>

</body>
</html>

@Joum because a comma means that there is another property to follow but dataType is the last property. But I just realized that this line of code occures in several places. I'm talking about line 19. — basilikum
– basilikum, Commented Jun 4, 2013 at 9:25
@basilikum yeah that much I knew, that's why I wasn't getting it... just noted it as well... the one I saw first didn't have this problem, sorry! :) that is probably the _unexpected } the error is throwing... — Joum
– Joum, Commented Jun 4, 2013 at 9:28
ok, i fixed the problem regarding the unexpected "}". In fact i missplaced the ('). — user2450954
– user2450954, Commented Jun 4, 2013 at 9:30
ok, i fixed the problem regarding the unexpected "}". In fact i missplaced the ('). Yet the script isn't reacting on the "onclick" event — user2450954
– user2450954, Commented Jun 4, 2013 at 9:52

Alan Piralla · Accepted Answer · 2013-06-04 09:12:36Z

1

Most probably your xmlhttp.responseText contains a quote mark (') and it truncates your alert message. Check the generated page source and see if that's the problem. NOTE: I know this should be a comment and not an answer but I still can't comment OP's questions.

answered Jun 4, 2013 at 9:12

Alan Piralla

1,2062 gold badges11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2450954 Over a year ago

ok, i fixed the problem regarding the unexpected "}". In fact i missplaced the ('). Yet the script isn't reacting on the "onclick" event

Collectives™ on Stack Overflow

Javascript & Chrome Debugger: "Uncaught SyntaxError: Unexpected token } "

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related