I have a MySQL database with a PHP front end. Once the user's records are queried from the database, they are displayed in a table. I created a CRUD where the user can SELECT (to view additional details), DELETE, or EDIT. The CRUD uses Javascript up to the point that the client sends the query to the DB, then redraws the index page to reflect the changes in the DB.
I currently use a Javascript $_GET, but want to change it to a $_POST to hide the MySQL table id. I want to use something like jQuery PostLink. I only had a class in Java, I understand Javascript, but I am not thge best JS programmer.
Here is the script:
<script src="http://postlink.googlecode.com/svn/trunk/jquery.postlink.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function() {
$('a').postlink();
});
</script>
Here is the PHP code that draws my table:
foreach ($query as $row){
$id = $row['document_id'];
echo ('<tr>');
echo ('<td>' . $row [clientName] . '</td>');
echo ('<td>' . $row [documentNum] . '</td>');
echo "<td><a href='editDocument.php?tableau={$id}'>Edit</a>";
echo " / ";
echo "<a href='#' onclick='deleteDocument( {$id} );'>Delete</a></td>";
// this calls Javascript function deleteDocument(id) stays on same page
echo ('</tr>');
} //end foreach
I do not want to have to add form tage (<form> </form>) either. I want to call a script (like jQuery PostLink) that will work with the code that I have and convert href $_GET link into a $_POST. I want it to redirect to editDocument.php and have $_POST[tableau]=$id. I have been (unsuccessfully) trying to do this by "class:"
echo "<td><a class='postlink' href='editDocument.php?tableau={$id}'>Edit</a>";
I am having 2 problems with PostLink:
<a> to a $_POST (including the DELETE link).Any thoughts???
Thank you in advance.
Change the code to select only the link you are interested in. If this is the HTML code:
echo <a class='postlink' href='editDocument.php?tableau={$id}'>Edit</a>;
You can change the Javascript snippet to this:
$(document).ready(function() {
$('.postLink').postlink();
});
The plugin does not seem to be very used and is very old (2010). I would proceed with caution.
I would actually suggest to change your approach, if you really want to hide the table ID. Even if you change the code to fire a POST with javascript, anyone can just look at the network requests with some browser developer tool like Firebug.
One approach would be to change the MySQL table to store an extra key and change the PHP code to pass and accept the key as input. But the approach chosen depends on your specific implementation and use case.
If you want the user to click a link, and redirect the browser with POST information without using a form tag, you are in a dead end.
You can POST using AJAX, but the page will return as an AJAX response. Your app would need to store the table ID in a session, this way the user can visit the page with no GET information and still see the correct information.
<script>
function editDocument( id, page ){
var params = "edit_id=" + id;
postOnClick( params, page );
}
function deleteDocument( id, page ){
var params = "delete_id=" + id;
postOnClick( params );
}
function postOnClick( params, page )
{
var http = new XMLHttpRequest();
http.open("POST", page, true);
http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
http.setRequestHeader("Content-length", params.length);
http.setRequestHeader("Connection", "close");
http.onreadystatechange = function() {
if (http.readyState == 4 && http.status == 200) {
document.documentElement.innerHTML = http.responseText;
}
}
http.send(params);
}
</script>
<?php
foreach ($query as $row){
$id = $row['document_id'];
echo ('<tr>');
echo ('<td>' . $row [clientName] . '</td>');
echo ('<td>' . $row [documentNum] . '</td>');
echo "<td><a href='#' onclick='editDocument( {$id}, 'editDocument.php' );'>Edit</a>";
echo " / ";
echo "<a href='#' onclick='deleteDocument( {$id}, 'index.php' );'>Delete</a></td>";
echo ('</tr>');
}
?>
Example of links:
<a href='#' onclick='editDocument( 1, "editDocument.php" );'>Edit</a>
<a href='#' onclick='deleteDocument( 1, "index.php" );'>Delete</a></td>
No way to do a post without a form tag. You could use AJAX like this.. A more convoluted solution involves creating a dynamic form tag on the fly - but if you're doing that, why not just create the form in the first place...
Try something like this..
<a class='post_link' href='/action_url' data-action-id="12345">Delete</a>
And then
$(function() {
$('.post_link').on("click", function() {
var id = $(this).data("action-id");
$.ajax({
method: 'post',
url: $(this).prop("href"),
data: {
'id': id
},
success: function() {
// reload the page or whatever -
}
});
});
});
If you're trying to avoid bookmarking, etc - it sounds like you'd be better served with better error handling on the backend side more than anything this is going to serve..