Difficulty using data from PHPMyAdmin Database using jquery AJAX calls, printing JSON data to table

I am having trouble with my database. I am creating a simple webform to practice AJAX calls using jquery, and have integrated a selector to withdraw data, and input lines to add new data. While I connect to the database without error, I can’t seem to get any data from or into it! And it doesn’t give any errors or crashes. The database was made in GoDaddy’s phpMyAdmin, and is very simple. I’m still new to web programming so bear with me.

I am following a code tutorial I found online to kind of get a feel for Ajax. (http://www.phpthis.com/blog/?p=121)

Here is my home page code (html)

As well as interact.js (my Ajax calls) and initialize.js, which I THINK is the file that is lacking something (but I’m still so green at this that I’m not completely sure)

INDEX

<html>
<head>
<LINK rel=stylesheet type="text/css" href="stuff.css">
https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
http://initialize.js
http://interact.js</head>

<body>
 <select name='selectuser' id='selectuser'></select>
 <table class="table1">
  <tr>
    <th>First</th>
    <th>Last</th>
    <th>UserID</th>
    <th>Cool</th>
    <th>Food</th>
    <th>Email</th>
    </tr>    
  <tr>
    <td>
filler
</td> <td>
filler
</td> <td>
filler
</td> <td>
filler
</td> <td>
filler
</td> <td>
filler
</td> </tr> </table><br/><br/> <h4>Add a New User</h4> <form action="" method="post"> <table class="table2"> <tr> <th>First</th> <th>Last</th> <th>UserID</th> <th>Cool</th> <th>Food</th> <th>Email</th> </tr> <tr> <td>
</td> <td>
</td> <td>
</td> <td>
</td> <td>
</td> <td>
</td></tr></table> <input type="submit" class="add_user" id="submituser" value="Add User"> </form> <pre id="result"></pre></body></html>

INTERACT

// Ajax drop down SELECT list
$("#selectuser").on("change", function() {

  var myVal=$("#selectuser").val();

  $.ajax({
url:"mysql_api.php"
+ '?actn=fetch'
+ '&id='
    + myVal,
    type: "GET",
dataType: "text",

    success: function(data)                        
    {

       data=$.parseJSON(data);

       var id = data[0]; 
       var userid = data[1];
       var firstname = data[2];
       var lastname = data[3];
       var email = data[4];  
       var food = data[5]; 
       var cool = data[6]; 

   var del_user = "<input id='delete' name='delete' type='button' value='DELETE' />";

var del_user = "<a href='mysql_api.php?actn=delete&id=" + myVal + "'>Delete</a>";

       //update HTML content in the "output" elements
       $('#output1').html(firstname); 
       $('#output2').html(lastname); 
       $('#output3').html(userid); 
       $('#output4').html(cool); 
       $('#output5').html(food);      
       $('#output6').html(email);   
       $('#output7').html(del_user);   
    }, 
  error: function (error) 
   {
         alert('error; ' + eval(error));
    }
    });
    });


   // The following plug-in credited to Tobias Cohen
   $.fn.serializeObject = function()
   {
   var obj = {};
   var a = this.serializeArray();
   $.each(a, function() {
       if (obj[this.name] !== undefined) {
          if (!obj[this.name].push) {
              obj[this.name] = [obj[this.name]];
         }
          obj[this.name].push(this.value || '');
       } else {
         obj[this.name] = this.value || '';
     }
  });
  return obj;
};


//Ajax FORM Submit
$('form').submit(function() {
$('#result').text(JSON.stringify($('form').serializeObject()));

    $.ajax({
       url: "mysql_api.php?actn=add",
       data: JSON.stringify($('form').serializeObject()),
       type: "method",
       success: function(data) {
         loadlist($('select#selectuser').get(0), 'mysql_api.php?actn=load','userid','id');
       }
    });

    return false;
});










//Ajaxify Delete Button
$("#delete").on("click", function() {

var myVal=$("#selectuser").val();

alert(myVal);

 $.ajax({
    type: "GET",
    url: "mysql_api.php?actn=delete&id=" + myVal,
    //data: "{}",
    dataType: "text",
    success: function(msg) {
        alert(myVal +" deleted");
    loadlist($('select#selectuser').get(0), 'mysql_api.php?actn=load','userid','id');
   }
   });

   });

INITIALIZE

//Retrieved from open source GitHub PHPTHIS

function loadlist(selobj,url,nameattr,idattr)
{
  $(selobj).empty();
  $.getJSON(url,{},function(data)
  {
      $.each(data, function(i,obj)
      {
          $(selobj).append(
               $('<option></option>')
                      .val(obj[idattr])
                      .html(obj[nameattr]));
      });
  });
}

$(function()
{ 
 loadlist($('select#selectuser').get(0), 'mysql_api.php?actn=load','userid','id');
});

Is there something here I need to add? I have my db connection, sql calls as well as my css on other files. The website comes up just fine, the display is good, but nothing goes in, and nothing comes out of that database!

Thank you all for your time! Hopefully this can be solved!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s