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);
        }
    });

Answer 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

Answer 2

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);
              }
        });                         
    });
});

Answer 3

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 )

Answer 4

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.