JQuery JSON updating sql

JavaScript
1

I am updating a league table (MySQL) with match scores. This is what I have so far:

document.getElementById("Home1Goals").innerText = 0;
document.getElementById("Away1Goals").innerText = 0;
$(document).on("click", "#Week1Game1Start", function() {
$.ajax({
                method: "POST",
                url:    "Operations.php",
                data: {"Week1Game1Home": "Home1Goals", "Week1Game1Away": "Away1Goals"},
                dataType:"json",
                success: function(data)
                {
                    var result = JSON.parse(data);
                    if(data.statusCode==200)
                    {
                        alert('success');                           
                    }
                }
                });
            });

Any help appreciated. I didn’t see any tags for code.

2

I’m not sure I understand the question. It looks like you’ve got the ajax call kinda set up (the data looks incomplete) but that’s about it.

The code tag is wrapping the code with three `

```
some code goes here
```

Or you can also highlight the code and hit this button on the editor. image

3

The data is complete, just want to verify that the data has been sent, not getting any alerts that data is sent.

4

Then you’re not getting a status 200, which means there’s an error.

There’s a couple issues with the call. First off, a post method doesn’t make a post call like from an HTML form - all that means is the data is passed as a form object instead of as a URL querystring that comes with a GET.

Personally, I prefer the more common ajax method call with the done and fail event handlers attached to them. Top of my head and obviously without testing but this should be closer…

let homeGoals =  document.getElementById("Home1Goals").innerText;
let awayGoals =  document.getElementById("Away1Goals").innerText;
$.ajax({
                method: "POST",
                url:    "Operations.php",
                data: {"Week1Game1Home": homeGoals, "Week1Game1Away": awayGoals},
                dataType:"json"
      })
      .done(function() {
                alert("success");
            })
      .fail(function() {
                alert("failure");
            })'
5

Thanks @DaveMaxwell, it is certainly cleaner and simpler looking.

6

@DaveMaxwell That code is working although it says failure, as oppose to success. I’m using wamp and since all the files I’m using are in the same folder, is the file name enough for the url?

7

OK, so now you’re one step closer. Now you need to extend the .fail() function to include the error message. Something like this (again, not tested)

.fail(function(jqXHR, textStatus ) {
  alert( "Failure: " + textStatus );
}

If that doesn’t give you enough information, you can extend the error handling further by delving into the properties of the jgXHR object. Might I suggest you read the JQuery ajax documentation a bit to understand how it works and how to take advantage of the built in functionality?

https://api.jquery.com/jquery.ajax/

8

Failure: parsererror

10

As far as I remember the option method is called type in .ajax or?

11

OK. So that gives you next steps. A quick google search for parsererror says that you’re not returning json from the form. So if you set the datatype as json, you need to return json in the form…

12

Ok, I commented out dataType and success.

13

@DaveMaxwell I am getting success using POST, however as its sending the data via url, I should be using GET, not POST. So I changed the method to GET with success. Now I should be able to verify the data in my php file using a vardump(), but its not executing. That’s a question for the PHP forum.

14

??? Not sure exactly what you’re trying to say there.

A POST method on an ajax call acts like an html form submission where the variable data is in the post object. A GET will add the variable data to a querystring. They both require a URL to send to.

A POST is by nature more secure than a GET but the both do the same thing in slightly different ways. But if you’re performing a form based operation, POST is the correct pattern to follow.

15

If the ajax call succeeded, vardump($_POST) in the php file should verify the data, but its not executing, wondering why?

16

Because your POST data is not a form data.

You can check the post data in your case with

var_dump(file_get_contents(‘php://input’));

17

That’s confusing. How do I make it form data?

18

Depends on your design.

If you have your elements already wrapped into a form element then you can just use

var form = $('yourFormName')[0]; // You need to use standard javascript object here
var formData = new FormData(form);

$.ajax({
    url: 'Your url here',
    data: formData,
    type: 'POST'
    // ... Other options like success and etc
});

Otherwise you can also create your own form data

var formData = new FormData();
formData.append('Week1Game1Home', yourData);
19

The latter as there are no actuals forms for submit buttons on the webpage. Thanks.

20

I tried this

var formData = new formData();
formData.append("Week1Game1Home", document.getElementById("Home1Goals").innerText);
formData.append("Week1Game1Away", document.getElementById("Away1Goals").innerText);

No success or failure.
Tried this:

var homeGoals = document.getElementById("Home1Goals").innerText;
var awayGoals = document.getElementById("Away1Goals").innerText;
$.ajax({
        method: "POST",
        url:    "Operations.php",
        data: {"Week1Game1Home": homeGoals, "Week1Game1Home": awayGoals}
})

success, but no form data as vardump didn’t execute.

21

You should learn to use the browsers development tools. There you can see what your request looks like and what it returns. It makes no sense to try and error.