CODEWITHSUNDEEP
phpjavascriptjqueryt-sql
Andrew Weitzel
Andrew Weitzel

Reputation: 13

jQuery/PHP Post Failure

I've got slightly convoluted jQuery and PHP problem here. On my index.php, a call to a javascript function getCalls() is made.

function getCalls()
{
    $('#transportDiv').load('getCalls.php');
}

getCalls.php does a select from SQL database. It returns a table with the requested data, plus a dynamically generated form for each row, plus a dynamically generated jQuery post function for each dynamically generated form (these are being echo()'d, by the way):

 <tr>
   //Static table data here
 </tr>
<form id='form$id' action='update.php' method='post'> 
  <tr id='tr$id' style='{display: none;}'>
    <td class='$tdClass'>
      <input type='text' id='txt_municipality' name='municipality' value='$municipality'>
    </td>
    //a lot more inputs omitted
  </tr>
</form> 

  <script type="text/javascript">
  $("#submitButton'.$id.'").click( 
    function() 
    {
     $.post( $("#form'.$id.'").attr("action"), 
             $("#form'.$id.':input").serializeArray(), 
             function(info)
             {
              $("#responseDiv").html(info); 
             }
           );
     getCalls();
    }
  );
  </script>

$id is a PHP variable containing the unique identifier for each row in SQL (BTW, those '.$id.' lines are correct, they are within an echo with single quotes). All of this shows up as expected in my #transportDiv after getCalls() is invoked, so no problem there. When #submitButton is clicked, it calls update.php, but there is no post data in the $_POST array:

 echo $_POST['municipality'];

That's all I have it doing right now. #responseDiv is populated by the jQuery post with "Notice: Undefined index: municipality in C:\inetpub\wwwroot\comm\update.php on line 3". A var_dump() on $_POST prints "array(0)"

I've been stuck on this for days.. any thoughts?

UPDATE

gibberish suggested this change to the dynamic jQuery calls:

  <script type="text/javascript">
   $("#submitButton'.$id.'").click(function(){
    var url = $("#form'.$id.'").attr("action");
   alert("Is this url correct: " + url);
  $.ajax({
     type : "POST",
     url : url,
     data : "somevarname=Hello there",
     success: function(info) {
         $("#responseDiv").html(info); 
     }
  });
 });
</script>

This does successfully send the somevarname variable through. So I guess the question now is: how can I serialize the whole form and send it through? I guess that's a question for another thread.

Upvotes: 1

Views: 110

Answers (1)

cssyphus
cssyphus

Reputation: 40076

The .load() method does not do what you think it does.

Your question states getCalls.php does a select from SQL database -- but this won't happen if you use the jQuery .load() method, it will only work if you use AJAX. This is because the server must run the PHP, while .load() runs at the browser. The only way for the browser to request that PHP be executed (and data returned) is via AJAX.

I suspect what you really want to do is to use AJAX, like this:

function getCalls(){

    $.ajax(function() {
        type: "POST",
        url: 'getCalls.php',
        success: function(recd_data) {
            $('#transportDiv').html( recd_data );
        }
    });

}

Please see the links at bottom of this SO post for more AJAX examples.

Update:

Restructured AJAX code for test discussed in comments:

$("#submitButton'.$id.'").click(function(){
    var url = $("#form'.$id.'").attr("action");
    alert('Is this url correct: ' + url);
    $.ajax({
        type = "POST",
        url = url,
        data = 'somevarname=Hello there',
        success: function(info) {
            $("#responseDiv").html(info); 
        }
    });

});

Upvotes: 2

Related Questions