Syntax Error on Javascript?

Question

Hey what am I doing wrong? My JS file stopped working, I've tried different ways but it doesn't work. I want to start the function with a button click with "id".

$(document).ready(function () {
    $("#paybutton").click(function () {}
    var params = ("projectpaymentoption=1197&id=");
    var usernamepay = window.localStorage.getItem("username");
    var paymenturl = params + usernamepay;
    }

    $.ajax({
        type: 'post',
        url: 'http://www.bla.de/phone/encode.php',
        data: {
            data: {
                "usernamepay": usernamepay
            },
        }
        success: function (result) {
            console.log(result);
        }
    });

Try jshint.com. Hint: Indent your code properly to spot syntax errors. — elclanrs
– elclanrs, Commented Jun 29, 2015 at 22:23
Use some sane indentation, and the extra } will probably be easier to spot. ...actually, I see three I think. It's just all wrong. ...oh wait, maybe just two. but no closing bracket and paren. So hard to read like that. — user1106925
– user1106925, Commented Jun 29, 2015 at 22:24
@tne No. Code review is for code that works. It's not a debugging service. — JJJ
– JJJ, Commented Jun 29, 2015 at 22:26

Patrick Murphy · Accepted Answer · 2015-06-30 01:36:33Z

1

Issues:

You did not close all of your brackets, I assumed you closed the click callback function too early. You did not properly end your brackets. Your ajax call was outside of the scope of the click handler and the ready function.

Note: You need to learn to use indentation, bracket placement and comments to help you see code blocks as different sections of the execution so you can spot things like the ajax call only being fired once (without the correct variables) rather than in that click handler that would allow it to happen multiple times.

You did not need the parenthesizes around your strings in variable assignments.

Edit: This next part is angular specific, not jquery, but not invalid .ajax() requires data in the post request to be in a string format not in the format of a object.

Solutions:

Reorganized code to show indentation and correct the closures, including the ending }); that was needed.

Removed Parenthesizes, and combined variable declarations into one var statement (readability and efficiency / file size)

It is also a good idea to use 'use strict'

I used $.param(obj) to format the data being passed.

Code:

'use strict';
$(document).ready( function() {
  $("#paybutton").click(function() {
    var params = "projectpaymentoption=1197&id=",
                usernamepay = window.localStorage.getItem("username"),
                paymenturl = params + usernamepay;

    $.ajax({
      type: 'POST',
      url: 'http://www.bla.de/phone/encode.php',
      data: $.param({"usernamepay": usernamepay}),
      success: function(result) {
        console.log(result);
      }
    }); // end of ajax call
  }); // end of #payButton click handler
}); // end of document.ready function

edited Jun 30, 2015 at 1:36

answered Jun 29, 2015 at 22:40

Patrick Murphy

2,33916 silver badges17 bronze badges

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

3 Comments

Mark Amery Over a year ago

.ajax() requires data in the post request to be in a string format not in the format of a object - false. Per the docs, data can have type PlainObject or String or Array.

user1106925 Over a year ago

@MarkAmery was correct below. You need to be able to figure these things out if you're going to do programming. Neatly formatted code is the first step. You'll never learn a thing if you don't solve this stuff for yourself.

Patrick Murphy Over a year ago

Mav, I agree you need to learn how to find syntax issues, @MarkAmery Yep you are right was confused with angular stackoverflow.com/q/31096056/4705221

Sudhansu Choudhary · Accepted Answer · 2015-06-29 22:59:52Z

0

Formatted Code below. Please use some IDE from next time.

$(document).ready(function... function has been closed with }); at the bottom. $("#paybutton").click(function(){.. has been closed appropriately with });

Removed extra data: { declaration, put a , before success: function(). Corrected other indentations as well.

$(document).ready( function() {
    $("#paybutton").click(function() {
        var params = ("projectpaymentoption=1197&id=");
        var usernamepay = window.localStorage.getItem("username");
        var paymenturl = params + usernamepay;
        $.ajax({
             type: 'post',
             url: 'http://www.bla.de/phone/encode.php',
             data: {"usernamepay": usernamepay},
             success: function(result) {
             console.log(result);
              }
        });                         
    });
});

edited Jun 29, 2015 at 22:59

answered Jun 29, 2015 at 22:30

Sudhansu Choudhary

3,3903 gold badges21 silver badges33 bronze badges

2 Comments

user1106925 Over a year ago

This indentation is as bad as the original and the code isn't totally correct. If you're going to leave an answer, make it clean and explain exactly what you changed.

Sudhansu Choudhary Over a year ago

That's fair! So be it from next time!! No worries :)

Dekel · Accepted Answer · 2015-06-29 22:35:26Z

-1

You should use some IDE (or at least some program that can help you with syntax coloring and brackets matching - notepad++ can be great) and add some indentation to your code

Here is your code indented, plus some comments I added there.
This way you can see where your problems are and how to fix them.

$(document).ready( function() {
    $("#paybutton").click(function() {
            // Nothing here
        } // <-- Here you should close the click function (from two lines above), missing )
        var params = ("projectpaymentoption=1197&id=");
        var usernamepay = window.localStorage.getItem("username");
        var paymenturl = params + usernamepay;
    }

    $.ajax({
        type: 'post',
        url: 'http://www.bla.de/phone/encode.php',
        data: {
            data: {"usernamepay": usernamepay},
        } // <-- Here you should have a comma. Elements of object are separated with commas, just like your previous lines
        success: function(result) {
            console.log(result);
        }
    });

// <-- Here you should close the ready function (from the first line), missing )

answered Jun 29, 2015 at 22:35

Dekel

62.9k12 gold badges109 silver badges130 bronze badges

6 Comments

mav Over a year ago

Thanks for your help but does not work :( When i insert the function in my fully working js file where are other functions, the other functions stop working.

Mark Amery Over a year ago

This is more effort than the question asker deserves. It will never help anyone but them, and if their response to a syntax error is to helplessly dump their code on the internet for others to fix, then they are beyond help (as their reply to you shows). Your time is your own (and I am not the downvoter), but I'm sure there are more worthwhile things you could be doing than helping the likes of this question's author.

Dekel Over a year ago

@squint, not sure what exactly is "still not right". The code is not the "final piece that should work". There is an explanation of how to make it work and hints for where he should put things. the ajax call might be inside the click and it might be on page load. This is something I cannot know ahead - the code owner should know where to put it. mav, maybe you should remove parts of your code and check when and what exactly works.

user1106925 Over a year ago

@Dekel: It's your answer so I think you should be able to figure it out... but anyway, there's still an extra } you haven't noted and you didn't note the final missing } before the final missing ), which you did note. Furthermore, do you really think that the OP wanted an empty click handler? That's beyond the syntax question, but still...

Dekel Over a year ago

@squint, There isn't extra } - it exists in the 5th line. I really don't think we should change the code to do what we think the OP wanted - the idea is to help and explain what is the problem in order for the OP to understand and have the ability to fix it on his own. As for the "not working" - the problem there is not missing brackets, but wrongly put code inside functions :) (the OP code)

|

John Hoyer · Accepted Answer · 2015-06-29 22:36:51Z

-3

You need a comma before the 'success' field. Not required if in code, but in a data object literal, it will be necessary. This is one problem, but there may be more.

answered Jun 29, 2015 at 22:36

John Hoyer

1

Collectives™ on Stack Overflow

Syntax Error on Javascript?

4 Answers 4

Issues:

Solutions:

Code:

3 Comments

2 Comments

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Issues:

Solutions:

Code:

3 Comments

2 Comments

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related