Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Łukasz Czuliński
Łukasz Czuliński
8,646 Points

Applying dynamic values to custom confirm overlay.

I have a web app that includes a <table>, in which the user can delete any row themselves through a <button class="deletedata"> in each row. This is working just fine, as each row is it's own <form> with an invisible input corresponding to a primary key in the database.

My problem is within the confirm overlay, I cannot figure out how to apply the action of the specific <button class="deletedata"> to the <button id="yesdelete"> in the overlay.

I have tried various things, like storing the <button class="deletedata">'s attributes in a variable and trying to apply them to the overlay. This is probably not working because the overlay has nothing to do with the row's <form>. I'm pretty stumped after spending a few hours on this and poring through jQuery's API.

A point or hint in the right direction would be huge.

Here's my Javascript for the overlay:

var $overlay = $('#overlayblack');

//produce the #deleteconf overlay
$('.deletedata').click(function(event){
    event.preventDefault();
    $overlay.fadeIn('fast');
    $("#deleteconf").show();
});

//actions within #deleteconf
$('#nodelete').on("click", function(){
    $overlay.fadeOut('fast');
});

$('#yesdelete').on("click", function(){
    //here I want to do the default action of the specific .deletedata that was clicked
});

If necessary, I can post some of the PHP for creating and/or deleting each table row. It's working just fine without the JS overlay, though.

3 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Lukasz,

I think jQuery's .submit() method might help you out here. http://api.jquery.com/submit/

Particularly the third form of it which accepts no arguments. This will trigger the submit event on an element. Also, take a look at the very last example on that page. Which shows how to trigger it for the first form element.

I think this could work out for you but you need to save the form element that the clicked button belongs to. Then call the submit method on that form element in your "yesdelete" click handler in order to trigger the form submit.

Łukasz Czuliński
Łukasz Czuliński
8,646 Points

Thanks Jason. This seems really promising and the most logical potential solution, but so far all my attempts have failed. It seems my problem is re-enabling the default action of the .deletedata button.

Here's my most recent try where I store .deletedata in a variable (I think I must do this since each .deletedata class corresponds to a different row) :

var $overlay = $('#overlayblack');
var $deleteData = $('.deletedata');
var $lastDelete = "";


//produce the #deleteconf overlay;
$deleteData.click(function(){
    $lastDelete = $(this);
//I call prop() here instead of preventDefault() since restoring default seems murkier than removing "disabled" attribute. 
//I have tried both prop() and attr() here without luck.
    $lastDelete.prop("disabled", true);
    $overlay.fadeIn('fast');
    $("#deleteconf").show();
});

//actions within #deleteconf
$('#nodelete').on("click", function(){
    $overlay.fadeOut('fast');
});


$('#yesdelete').on("click", function(){
//still nothing happens on clicking #yesdelete
    $lastDelete.removeAttr("disabled");
    $lastDelete.submit();
});
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

I don't think you need to do anything with the delete data button. The .submit() method needs to be called on the form element, not the delete button.

Now that you have posted what the html looks like I can see that each form has a class.

So if you were to do $('.archiverow').submit(); for example, then I think it would select every single form and submit all of them. Obviously you don't want to do that but that's the general idea of what you would do in your "yesdelete" handler. You need to be able to uniquely select the form that the delete button click originated from.

I would go back to your jQuery code in your question and work off of that.

I would do a few things first before trying to progress farther with this. Your html output is invalid. I would enclose the entire form in the last td. Presumably your form is a direct child of a tbody or table element which it can't be. And the input element can't be a direct child of a tr I would recommend that you update your php to produce a valid table.

Something like this:

                      <tr>
                          <td class="tdate">'.$row['tdate'].'</td>
                          <td class="data1">'.$row['data1'].'</td>
                          <td class="data2">'.$row['data2'].'</td>
                          <td class="data3">'.$row['data3'].'</td>
                          <td class="delete">
                            <form class="archiverow" method="post" action="edit.php">
                              <input type="hidden" name="row_id" value ="'.$row['id'].'">
                              <button class="deletedata" type="submit">Del</button>
                            </form>
                          </td>
                      </tr>

Maybe the easiest way to save which form should be submitted would be to give each form a unique id. This could be based off the row id and perhaps precede it with "form" or "row" <form id="form1" ... or <form id="row1" ... So each form would have some unique id attribute.

Then the general process would be that when you click on a delete button you would prevent the default form submit like you have in your original code. Then use jQuery to save the id of that particular form in a global variable.

Then in your "yesdelete" handler you can use that saved form id to uniquely select that form and call the submit() method on that form. This should then submit that form. There should be no need to do anything with the delete button.

I can help you later with the jQuery code for this if you need it.

Łukasz Czuliński
Łukasz Czuliński
8,646 Points

Yes! Finally got it. Thanks yet again, Jason.

Why you say the HTML output is invalid, do you mean semantically? I see my errors that you pointed out and will look out for them, but the form was being displayed just fine.

Here's the working jQuery:

//DELETE BUTTON

var $overlay = $('#overlayblack');
var $deleteData = $('.deletedata');
var $formWithRowID = "";

//produce the #deleteconf overlay;
$deleteData.click(function(event){
    $formWithRowID = $(this).parent();
    event.preventDefault();
    $overlay.fadeIn('fast');
    $("#deleteconf").show();
});


//actions within #deleteconf
$('#nodelete').on("click", function(){
    $overlay.fadeOut('fast');
});


$('#yesdelete').on("click", function(){
    $deleteData.unbind('click');
    $formWithRowID.submit();
    $overlay.fadeOut('fast');
});
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Glad you got it working.

What I meant about the invalid html is that it would not pass the validator at the w3c. It's not really about semantics but about following the rules in the html specification. Browsers are generally pretty forgiving with the html we write but it's better not to take a chance.

For example, if you take a look at the <tr> element here: http://www.w3.org/TR/html5/tabular-data.html#the-tr-element

In particular the "Contexts in which this element can be used:" and the "Content model:" Those tell you how you can use the tr element in relation to other elements.

From that we can see that a tr can't be a child of a form and the tr can't contain a input because it can only contain tds or ths or script supporting elements.

I hope that helps clear up for you what I meant by invalid html.

If you're ever in doubt then you can always run your output html through the validator at the w3c.

http://validator.w3.org/

Michael Collins
Michael Collins
433 Points
Michael Collins
Michael Collins
433 Points

Okay, I hear you need to delete the record from the DB model on the server. Here's some adjustments based on that. What I'm trying to do here is remove the whole button click and prevent default. I've included the Modal Dialog Confirmation and an Ajax handler and server side Ajax listener.

Here's the revised HTML code. BTW, this should be a working example. I've tested it on my dev server.

<html>
<head>

  <title>Take Evasive Action</title>
  <link rel="stylesheet" href="css/jquery-ui.min.css" type="text/css" media="screen" title="no title" charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
  <script src="js/app.js" type="text/javascript" charset="utf-8"></script>
  <style>
    div#dialog-confirm {
      display: none;
    }
  </style>
</head>
<body>

<table id="customizable">
  <tr id="237">
    <td>First Name</td>
    <td>Last Name</td>
    <td class="deletedata">x</td>
  </tr>
    <tr id="238">
    <td>First Name</td>
    <td>Last Name</td>
    <td class="deletedata">x</td>
  </tr>
    <tr id="239">
    <td>First Name</td>
    <td>Last Name</td>
    <td class="deletedata">x</td>
  </tr>
    <tr id="240">
    <td>First Name</td>
    <td>Last Name</td>
    <td class="nodelete">x</td>
  </tr>

</table>

<p>Dialog</p>


<div id="dialog-confirm" title="Empty the recycle bin?">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>These items will be permanently deleted and cannot be recovered. Are you sure?</p>
</div>


</body>
</html>

Here's the revised JavaScript Code

confirm_delete = function(obj) {

  var record_id = obj.parent().attr('id');

$("#dialog-confirm").dialog({
  resizable: false,
  height:140,
  modal: true,
  buttons: {
    "Delete all items": function() {
      $( this ).dialog( "close" );
        $("tr#" + record_id).remove();
        send_data({
          'action' : 'delete',
          'record_id' : record_id
        });
      },
      Cancel: function() {
         $( this ).dialog( "close" );
      }
    }
 });

}


send_data = function(command) {

   $.ajax({
      url: "/test/index.php",
            dataType: "json",
            data: {'action' : command.action, 'record_id' : command.record_id},
            type: "POST",
            cache: false

    }).done(function(data, status, xml) {

         var obj = jQuery.parseJSON(data);
         alert(obj.message);

        }).fail(function(jqXHR, textStatus, errorThrown) {


        }).always(function() {


        });

}




$(document).ready(function() {

  $("table#customizable tr td.deletedata").on('click', function() {

      confirm_delete($(this));

  });


});

And, here's the Ajax Listener in PHP

<?php


$action = $_REQUEST['action'];
$record_id = $_REQUEST['record_id'];

// Check for Session Info and Roles and Permissions before proceeding.


if ($action == 'delete') {
    // This is where you delete your record and 
    // possibly generate a message to send back

    $message = "Record # " . $record_id . ": was deleted";
}

header('Content-Type: application/json');
print json_encode('{"message" : "' . $message . '" }');


?>
Łukasz Czuliński
Łukasz Czuliński
8,646 Points

Thanks so much for the help Michael. I didn't make it to here because I worked through Jason's first and solved it.

So far I haven't touched on object-oriented Javascript (or Ajax), but I really want to after looking at your lovely code.

Michael Collins
Michael Collins
433 Points
Michael Collins
Michael Collins
433 Points

Here's a slightly different arrangement of what I think you are trying to do. I'm not clear if you are passing row IDs to PHP to modify code stored on the server ...

<!DOCTYPE html>
<html>
<head>

  <title>Take Evasive Action</title>
  <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" title="no title" charset="utf-8">
  <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
  <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
  <script src="js/app.js" type="text/javascript" charset="utf-8"></script>

</head>
<body>

<table id="customizable">
  <tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td class="deletedata">x</td>
  </tr>
    <tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td class="deletedata">x</td>
  </tr>
    <tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td class="deletedata">x</td>
  </tr>
    <tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td class="nodelete">x</td>
  </tr>

</table>
</body>
</html>

and the jQuery to go with it. I'm just storing the row element in delete_cue. delete_cue could also be an array if you want to let people select multiple rows before confirming their deletion. 

$(document).ready(function() {

  var delete_cue = '';

  $("table#customizable tr td.deletedata").on('click', function() {

      delete_cue = $(this).parent();
      delete_cue.remove();

  });

// make sure your dialog confirmation is defined in the scope where delete_cue is available

});
Łukasz Czuliński
Łukasz Czuliński
8,646 Points

Thanks for the reply. I don't think this will work, however, since the delete button submission sends an SQL query that actually deletes the row from the database, rather than simply try to remove the row from the DOM. The table is populated on each page load from a database query like so (also how the delete button is created):

        <?php
        $query = "SELECT * FROM tally ORDER BY tdate DESC";
        $tabledata = mysqli_query($con, $query);
        while($row = mysqli_fetch_array($tabledata)){
          echo '<form class="archiverow" method="post" action="edit.php">
                      <tr>
                          <td class="tdate">'.$row['tdate'].'</td>
                          <td class="data1">'.$row['data1'].'</td>
                          <td class="data2">'.$row['data2'].'</td>
                          <td class="data3">'.$row['data3'].'</td>
                          <input type="hidden" name="row_id" value ="'.$row['id'].'">
                          <td class="delete"><button class="deletedata" type="submit">Del</button></td>
                      </tr>
                 </form>';
           }
          ?>