StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>I notice a few things right off the bat. </p> <h1>jQuery Syntax</h1> <p>First of all, your JavaScript syntax is off. In your first file (<code>index.php</code>) you have the following line:</p> <pre><code> $("#add").load("add.php") { </code></pre> <p>That's not the proper syntax of the <a href="http://api.jquery.com/load/" rel="nofollow"><code>.load()</code></a> method. Basically, you have this:</p> <pre><code>$("#add").load("add.php") { // ... stuff to happen after add.php loads } </code></pre> <p>What you <em>should</em> have is this:</p> <pre><code>$("#add").load("add.php", function() { // .. stuff to happen after add.php loads }); </code></pre> <p>Remember, you need to add this extra functionality in the form of a <em>callback</em> otherwise it's not going to work.</p> <h1>Inconsistent calls</h1> <p>In the first code block I addressed, it looks like you're trying to load <code>add.php</code> and then fire some JavaScript commands after you've loaded it. But looking at the source of your <code>add.php</code> file, you don't want to do this. Your <code>add.php</code> file contains the server-side code to process adding a record to the database ... you don't load it directly, you just submit POST requests to it.</p> <h1>Invalid data</h1> <p>You're not sending your data to the server properly. With the add routine, you're first creating a data string:</p> <pre><code>var dataString = 'ID=' + id 'name='+ name + '&username=' + type + '&password=' + rating + '&gender=' + release; </code></pre> <p>Then you're sending that in your data package via AJAX:</p> <pre><code>$.ajax({ type: "POST", url: "add.php", data: dataString, success: function(){ $('.success').fadeIn(200).show(); $('.error').fadeOut(200).hide(); } }); </code></pre> <p>The problem here is two-fold. Firstly, you're not encoding the data right. <code>'ID=' + id 'name='</code> is missing a <code>+</code> character and will break. But even with that fixed, you'd be concatenating data improperly. Your <code>dataString</code> variable would end up looking like:</p> <pre><code>ID=1name=Bob&username=my_user&password=password&gender=male </code></pre> <p>You see how you're missing a <code>&</code> symbol? This is an easy mistake to make, so instead send a data <em>object</em>. You're less likely to miss characters:</p> <pre><code>$.ajax({ type: "POST", url: "add.php", data: { }, success: function(){ $('.success').fadeIn(200).show(); $('.error').fadeOut(200).hide(); } }); </code></pre> <h1>Data mismatch</h1> <p>Next, you're passing data to the server but checking for different values. Your JavaScript to add data looks like it wants to send:</p> <ul> <li>ID</li> <li>name</li> <li>username</li> <li>password</li> <li>gender</li> </ul> <p>But your <code>add.php</code> is checking for:</p> <ul> <li>Submit</li> <li>name</li> <li>type</li> <li>score</li> <li>Yreleased</li> </ul> <h1>Missing Data</h1> <p>With your delete routine, you're checking for the value of "ID" in a GET. That means this value needs to be passed as a <em>query argument</em> appended to the URL. For example: <code>delete.php?ID=5</code> to delete a game with the ID of 5.</p> <p>You're checking for this just fine in the PHP, but you're not actually sending the data in your AJAX request. Your code <em>should</em> look more like this:</p> <pre><code>$("a.deletebutton").click(function(){ var del_id = $(this).attr("id"); var info = 'id=' + del_id; var parent = $(this).parent(); if(confirm("Sure you want to delete this game? !")){ $.ajax({ type: "get", url: "delete.php?" + info, context: document.body, success: function(){ $('.p'+del_id).html('deleted'); } }); } return false; }); </code></pre> <p>See <code>url: "delete.php"</code> becomes <code>url: "delete.php?" + info</code>? This will append your ID to the url and make <code>$_GET['id']</code> available in PHP.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload