lundi 13 juillet 2015

jQuery ajax doesn't replace of , but instead redirects browser to ajax url

I have a table of rows with checkboxes for the user to indicate which rows he wants to remove from the database. In < thead > I have a "Remove" button for jQuery to use ajax to 1) remove those records from the database; 2) query the database to make a new set of rows (the remaining data); and 3) replace the old set of rows in < tbody > with the new set of rows.

Instead, jQuery runs the url correctly, but fails to load the new rows into the < tbody >; and instead, just loads the ajax url into the browser, showing the raw new set of rows (again, not the original page). The records are indeed removed from the database, so I know the button is working and sending the correct POST data to remove.

I believe my problem may be that the "Remove" button is in the < thead > section, but the checkboxes are in the < tbody > section that jQuery is trying to replace....

Any other critique will be welcome.

Here is the jQuery:

$('#removie').click(function(event){    
    event.preventDefault();
    var remove = $("#remove[]").val(); // array of purchases to remove
    var owner = $("#owner").val();
    var dataString = 'remove='+ remove + '&owner='+ owner;

    $.ajax({
        type: "POST",
        url: "removePurch.php", // returns rows of remaining purchases
        data: dataString,
        cache: false,
        success: function(result){
            $("#stockstable > tbody").html(result);
        }
    });
    return false;
});

Here is the HTML (produced by PHP):

    // makes only the rows
public function makeStocksTBODY($stocks){

    foreach ($stocks as $s){
        $result .= "<tr>";
        $result .= "    <td>". $s['CompanyName'] . "</td>";
        $result .= "    <td>". $s['purchasedate'] . "</td>";
        $result .= "    <td>";
        $result .= "<input type=\"checkbox\" name=\"remove[]\" value=\"" . (string)$s['_id'] . "\">"; // CHECKBOX
        $result .= "    </td>";
        $result .= "</tr>";
    }
    return $result;
}

// makes the whole table (calls makeStocksTBODY() to populate the rows of data)
public function makeStocksTable($owner,$stocks){
    $result  = "";
    $result .= "<table id=\"stockstable\" class=\"center\">";
    $result .= "<thead>";
    $result .= "<tr>";
    $result .= "    <th colspan=\"2\">Purchas Details</th>";
    $result .= "    <th><form action=\"removePurch.php\" id=\"removie\" method=\"post\" enctype=\"multipart/form-data\">"; // for checkboxes
    $result .= "        <input type=\"hidden\" name=\"owner\" id=\"owner\" value=\"". $owner ."\" />";
    $result .= "        <button id=\"remove_button\">Remove</button></th>"; //                    The Remove BUTTON
    $result .= "</tr>";
    $result .= "<tr>";
    $result .= "    <th>Name</th>";
    $result .= "    <th>Purchase Date</th>";
    $result .= "    <th><input type=\"checkbox\" name=\"remove[]\" id=\"selectAll\" value=\"all\"></th>"; // CHECKBOX (main one)
    $result .= "</tr>";
    $result .= "</thead>";
    $result .= "<tbody>";

    $result .=      $this->makeStocksTBODY($stocks);

    $result .= "</tbody>";
    $result .= "</form>";
    $result .= "</table>";

    return $result;
} // end  makeStocksTable($owner,$stocks)




Aucun commentaire:

Enregistrer un commentaire