Question

I have a problem with following script. It generates a list of places which are editable, deletable or you can even create a new one.

I want to send a $.post request when creating a new place to a php file which makes an entry into a database (MySQL) and then lists this entryes in html. Now why doesn’t even the $.post send an alert message to notifi me that the data is been send?

The script isn’t finished yet how you can see, but it would be great if you could give me a hand!

JS-Script

 $(function() {
      $(".edit").click(function() {
        $(this).css("display","none").prevAll(".place_name").css("display","none").prevAll(".inputfield_td").css("display","block").nextAll(".cancel").css("display","block").nextAll(".save").css("display","block").prevAll(".inputfield_td").css("display","block");
      });
      $(".cancel").click(function() {
        $(this).css("display","none").prevAll(".edit").css("display","block").prevAll(".place_name").css("display","block").prevAll(".inputfield_td").css("display","none").nextAll(".save").css("display","none");
      });
      $(".save").click(function() {
        var myvariable1 = $(this).siblings().find("input[type=text]").val();
        var myvariable2 = $(this).prevAll("td:last").attr("id");
        $(this).css("display","none").prevAll(".cancel").css("display","none").prevAll(".edit").css("display","block").prevAll(".place_name").css("display","block").prevAll(".inputfield_td").css("display","none");
        alert("save name: "+myvariable1+" save id: "+myvariable2);    
      });
      $(".delete").click(function() {
        var myvariable3 = $(this).prevAll("td:last").attr("id");
        alert(myvariable3);
      });
      $(".new").click(function() {
        var myvariable4 = $(this).prevAll("input[type=text]").val();
          $.post("place_list.php", {action: "create", name: myvariable4}, function(data){
            alert("Data Loaded: " + data);
          },"html");
        alert(myvariable4);
      });
    }); 

PHP-File

<?php
  require_once "../../includes/constants.php";
  // Connect to the database as necessary
  $dbh = mysql_connect(DB_SERVER,DB_USER,DB_PASSWORD)
    or die ("Unaable to connnect to MySQL");

  $selected = mysql_select_db(DB_NAME,$dbh)
    or die("Could not select printerweb");

    echo "<table><tbody>";
    $result = mysql_query("SELECT * FROM place");
    while ($row = mysql_fetch_array($result)) {
      echo "<tr><td id=".$row["id"]." class=inputfield_td><input class=inputfield_place type=text value=".$row["name"]." /></td><td class=place_name>".$row["name"]."</td><td class=edit>edit</td><td class=cancel>cancel</td><td class=delete>delete</td><td class=save>SAVE</td></tr> \n";
    }
    echo "</tbody>";
    echo "</table>";
    echo "<input type=text class=inputfield_visible />";
    echo "<button class=new>New</button>";
?>

Answer 1

Have you got firefox and firebug installed?
If so you can view the net tab and see if the post request gets made to place_list.php and also what the response is. I suspect it is 404’ing as the path maybe incorrect. You can always use the .ajax method rather than .post. This allows you to specify an error method that gets called upon a failed ajax request.

e.g

$.ajax({
  url : "place_list.php",
  data : {action: "create", name: myvariable4},
  cache : false,
  error : function(XMLHttpRequest, textStatus, errorThrown){
     //console.log or alert error
     alert(errorThrown);
  },
  success: function(html){
     alert("Data Loaded: " + data);
  }
});