Jump to content

Trouble w/Javascript deleting a row from MySQL Table


alan_k

Recommended Posts

I've been modifying my site and the script is supposed to get the id value stored in $row[id] field and then call delete_printer.php?id. This logic works fine for me modifying a record yet when doing a delete I get only the first row id for all rows on that page I try to delete. I've used this same line many times with no trouble and yet now it is broken and I cant see why.

JS:

<script type="text/javascript">$(document).ready(function(){$(document).on('click', '#del-row', function(e){e.preventDefault();var id = $("#delete-row").attr('data-id'); // get id from td element and store it in $id.window.location = 'printer_delete.php?id=' + id; // call printer_delete.php with $id value to delete row.});});</script>

PHP:

echo "<td><a class='one glyphicon glyphicon-edit' aria-hidden='true' data-toggle='tooltip' data-placement='bottom' title='Click Here to Edit' href='printer_update.php?id=" . $row['id'] . "'></a></td>";echo "<td><a class='one glyphicon glyphicon-trash delete-row' id='delete-row' data-toggle='modal' data-placement='bottom' title='Delete Printer Record' href='#' data-target='#myModal' aria-hidden='true' data-id='" . $row['id'] . "'></a></td>";

The first PHP line to modify a record works fine. This is the first time I've used the PHP in conjunction with the Javascript so I'm thinking in there lies the problem but being relatively new to JS I'm in need of some help. Any input would be welcome.

Edited by alan_k
Link to comment
Share on other sites

One problem is that it looks like you have multiple elements with the same ID, "delete-row". IDs need to be unique on a page. Maybe you should use a class instead.

var id = $("#delete-row").attr('data-id');
The other problem is that line gets the first element with the ID "delete-row" (if you change that to a class, it will get the first element with that class), not the element that the click handler is for. I believe that jQuery sets this to the element that was clicked on in the handler, so you can reference that if you want to get the element that was clicked on. You can check some jQuery examples for using click handlers if you want to verify that.
Link to comment
Share on other sites

I tell you I tried like a dozen different examples and none worked. If someone could help me out here and show me the jquery I need to get this to work I would be extremely grateful.Thanx...

Edited by alan_k
Link to comment
Share on other sites

OK when I did it like this:

<script type="text/javascript">        $(document).ready(function(){         $( "#del-row" ).click(function() {         $( this).remove();});});         </script>

That made the Delete Row on the modal disappear:( When I did this :

<script type="text/javascript">        $(document).ready(function(){         $( "#del-row" ).click(function() {         $( delete-row).remove();});});         </script>

Modal box does nothing when I click on delete row button. I'm confused to because I dont want to delete the row on this page but I want to get the $row[id} value so I can call the "window.location = 'printer_delete.php?id=' + id;" line and send it. Here is a link to pastebin with the code for the page: http://pastebin.com/pFR5itswmaybe this will help to see what I'm trying to accomplish.Thanks for yopur patience...

Link to comment
Share on other sites

This line is wrong:

$( delete-row).remove();

What you're doing here is subtracting the numeric value of row from the numeric value of delete and then passing that to jQuery. Since row is not defined and delete is an operator, this is a syntax error.

 

You usually pass strings to jQuery. But the string "delete-row" would not work either, because you have no <delete-row> elements on your page. jQuery uses CSS selectors, so if you're looking for a class name you need to prepend a dot "." to the selector, if you're looking for an id you need to prepend "#".

 

There might be other mistakes in your code, so check the Javascript console in your browser's developer tools to see what the error messages say and what line their on.

Link to comment
Share on other sites

I want to get the $row[id} value so I can call

I know that, and where is that value defined? In one of the attributes of the element you clicked on? Why did you add the remove method anyway? You're not trying to remove an element, you're trying to get the value of the attribute that was clicked on and then set window.location. So why are you messing around with the remove method?You literally only have to change a single thing in the code you posted in the first post. I'm trying to show you how to get the element that was clicked on. Think about what you're doing, don't just throw stuff together and hope it works.
Link to comment
Share on other sites

I'm sorry I'm getting a little punch drunk with this one. The original code segment is

<!--JavaScript for popup alert to Delete arow using Bootstrap modal

<script type="text/javascript">        $(document).ready(function(){        $(document).on('click', '#del-row', function(e){          e.preventDefault();        var id = $("#delete-row").attr('data-id'); // get id from td element and store it in $id.        window.location = 'printer_delete.php?id=' + id;   // call printer_delete.php with $id value to delete row.        });      });     </script> -->

And the poster who I got this from advised that the data-id value would have the current id from the row :

echo "<td><a class='one glyphicon glyphicon-trash delete-row' id='delete-row' data-toggle='modal' data-placement='bottom' title='Delete Printer Record' href='#' data-target='#myModal' aria-hidden='true' data-id='" . $row['id'] . "'></a></td>";

We now know that is wrong. Is there a correct way to assign the id var the current clicked id value so I can assign it and use it in the window.location command? Or perhaps you have a more elegant way? Thanks.

Link to comment
Share on other sites

Like I pointed out in my first response, it's not valid to have multiple rows with the same ID. The first thing you need to do is change the ID to a class for those elements

class='delete-row'
Then, like I've been trying to get you to understand, instead of selecting an element and getting the attribute like this:
var id = $("#delete-row").attr('data-id');
Just get the attribute from the element that was clicked on:
var id = $(this).attr('data-id');
  • Like 1
Link to comment
Share on other sites

Thanks I finally got it to work as follows:

js:

<!--JavaScript for popup alert to Delete arow using Bootstrap modal-->        <script type="text/javascript">        $(document).ready(function(){        $(document).on('click', '.delete-row', function(e){          e.preventDefault();        var id = $(this).attr('data-id'); // get id from td element and store it in $id.        window.location = 'printer_delete.php?id=' + id;   // call printer_delete.php with $id value to delete row.        });      });     </script>

PHP:

 echo "<td><a class='one glyphicon glyphicon-trash delete-row' data-toggle='modal' data-placement='bottom' title='Delete Printer Record' href='#' data-target='#myModal' aria-hidden='true' data-id='" . $row['id'] . "'></a></td>"; 

Now if you still have any patience left, that deletes the row fine the only thing is I would like the Bootstrap modal delete confirmation button to do the actual delete rather then the trashcan icon in the table. If you have any idea on how to proceed on that :

 

Bootstrap code:

<!-- Modal Code --><div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">  <div class="modal-dialog">    <div class="modal-content">      <div class="modal-header">        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>        <h4 class="modal-title" id="myModalLabel">Delete Row Confirmation</h4>      </div>      <div class="modal-body">        Are You Sure You Want To Delete This Row?      </div>      <div class="modal-footer">        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>        <button type="button" id="del-row" class="btn btn-primary">Delete Row</button>      </div>    </div>  </div></div>

Thanks again for your patience.

 

Link to comment
Share on other sites

Just wanted to share the code in case some other newbie ever needs it. This stores the $id variable then calls the modal box to delete the record. Part of my trouble was I had to read up on scopes. Declaring id as var id was making it a local variable, only accessible within that function. Removing the var part makes the id variable default to a Global variable and thus accessible outside the scope of the function. Anyhow here it is and please feel free to weigh in to improve the solution.

JS:

<!--JavaScript for popup alert to Delete a row using Bootstrap modal -->        <script type="text/javascript">        $(document).ready(function(){        $(document).on('click', '.delete-row', function(e){          e.preventDefault();        id = $(this).attr('data-id'); // get id from td element and store it in Global variable $id.        });        $(document).on('click', '#del-row', function(e){        window.location = 'printer_delete.php?id=' + id;   // call printer_delete.php with $id value to delete row.        });        });     </script>
Edited by alan_k
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...