JQuery , PHP and mySQL Help. I do not understand why this is not working

Question

Rookie coder here trying to learn from mistakes. :)

I have three files (jquery.js, php.php and html.html).

I am trying to fetch information from mySQL database name trial1. It has only one table called Score_Sheet.

Below is the code for html.html

<!DOCTYPE html>
<html> 
<head>
<script type="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src= "jquery.js" type = "text/javascript"></script>
</head>
<body>
    <button id = "button"> Click to see value from SQL table</button>
    <div id= "content"></div>
</body>
<html>

Below is the code for php.php

$link = mysqli_connect("localhost","root","","trial1");
$query = "SELECT * FROM Score_Sheet";
$show = mysqli_query($link, $query) or die ("Error");
echo "<table><tr><td>ID</td><td>UserID</td><td>Score</td></tr>";
    while ($row = mysqli_fetch_array($show)){
        echo "<tr><td>" . $row['ID'] . "</td><td>" . $row['UserID'] . "</td><td>" . $row['Score'] . "</td></tr>";
    }
echo "</table>";
}

Below is the code for jquery.js

$(document).ready(function(){
    $("#button").click(function(){
        function show_all(){
            $.ajax({
                type = "POST",
                url = "php.php",
                success: function (data){
                    $("#content").html(data);
                }
            });
        }
        // show_all();
    });
});

`// show_all();` why is that commented out? also did you check your browser console? checked for errors at all? using a webserver address or as `file:///`? — Funk Forty Niner, Nov 01 '17 at 19:04
`` that is what you used for a closing markup tag; you forgot the slash for it `` — Funk Forty Niner, Nov 01 '17 at 19:07
@Fred-ii- This is the webserver address. [link](http://localhost:8080/dashboard/trial1/html.html) — khadkd, Nov 01 '17 at 19:07
I did comment it out. Still not working. [Inline Link](http://localhost:8080/dashboard/trial1/html.html) — khadkd, Nov 01 '17 at 19:10
@muaaz The error is nothing happens when i click the button created on html.html. It was supposed to fetch data from database and display on div. — khadkd, Nov 01 '17 at 19:12
Just get rid of the function define of `function show_all()` around the ajax... and simply only have the $.ajax setup within that .click. — IncredibleHat, Nov 01 '17 at 19:12
`` <<< yoohoo; that too. >>> ``. I feel like I'm being trolled here. — Funk Forty Niner, Nov 01 '17 at 19:14
Another test, is to hit php.php in your web browser to see if its actually doing what it should directly. Or if you have any errors, or get a server 500. Check php logs for more if you are, and turn on full reporting and warnings with `ini_set('display_errors', true); error_reporting(E_ALL);` — IncredibleHat, Nov 01 '17 at 19:29
had a missing ?> on end of my php.php file. The page displayed the table data correctly. Nothing wrong in there i think. — khadkd, Nov 01 '17 at 19:32
Having that on the end is arbitrary. PHP ends normally without it... but its good practice to include it anyhow. Your problem still sounds like ajax isnt firing off in the first place... which you really should look to your web browsers developer tools for help, as it can shine big beaming lights on problems ;) — IncredibleHat, Nov 01 '17 at 19:33

Ilya Myasin · Answer 1 · 2017-11-01T19:20:02.710

0

This

{
            type = "POST",
            url = "php.php"
            //...
}

is not the way you should define object literals in JS. Try this:

{
  type: "POST",
  url: "php.php"
  //...
}

By the way, browser's debugging console is the best friend of any coder, not only the rookie one ;)

edited Nov 01 '17 at 19:20

answered Nov 01 '17 at 19:16

Ilya Myasin

151
1
6

**browser's debugging console is the best friend of any coder** has to be bolded due to how much that is a helpful tip! :) – IncredibleHat Nov 01 '17 at 19:19
Like Selenium IDE? – khadkd Nov 01 '17 at 19:22
Like F12 on your Windows or Alt+Cmd+I on your Mac :) You would find error message there: `Uncaught SyntaxError: Invalid shorthand property initializer` pointing to the line where the problem is. – Ilya Myasin Nov 01 '17 at 19:40
@IlyaMyasin I don't get any error. When I click on button, nothing happens. That's all. The page neither loads or looks like its doing anything. Nothing happens at all. – khadkd Nov 01 '17 at 19:45
@IlyaMyasin Turns out there was an error. Its fixed now. – khadkd Nov 01 '17 at 19:52
May be you are looking at the wrong place? :) The first code snippet you've posted must throw the error because it's syntactically incorrect. Read about [Chrome DevTools](https://developer.chrome.com/devtools) - it's really helpful. – Ilya Myasin Nov 01 '17 at 19:55
_Its fixed now_ - well, then you can try to find out what's wrong with other parts of your project ;) the simplest way to check if AJAX request is sent - just look at the "Network" tab of chrome console. It there's nothing there, try adding `console.log("i am here")` into each block of your code, so you will see (in the "Console" tab) which parts are ever executed, or even better use [breakpoints](https://developers.google.com/web/tools/chrome-devtools/javascript/breakpoints) . Also your php code doesn't actually need a POST request, so you can just open it in a new tab and debug separately :) – Ilya Myasin Nov 01 '17 at 20:04

score 0 · Accepted Answer · answered Nov 01 '17 at 19:51

0

Learned a good thing today. Thank you everyone. I had to use Developers tool to see what error was happening. Error was ReferenceError: $ is not defined. Then I googled the error and used this Inline Link forum to fix it.

answered Nov 01 '17 at 19:51

khadkd

1
4

JQuery , PHP and mySQL Help. I do not understand why this is not working

2 Answers2