jQuery Modal Window pop up from datatable form

Hello,

I have an application that uses jQuery for the front end, and classic ASP for the back end.
I am using datatables for forms.  What I need to happen is when I double click on the row of data, I need a modal window to pop up and be able to edit, save, or delete the record.
I have been able to create an alert pop up but have not figured out how to bring up the row of data in a modal window.  I have attached the ASP file and the jQuery file to this letter.
Here is the code to get the alert to pop up. Thanks for the help.
capturetheflag

		$(document).on('dblclick','table.hoverStyle tr',function(){
			$('tr.selected').removeClass('selected');
			$(this).addClass('selected');
			alert('edit dialog displays');
		});

Open in new window

functions.js
tof.txt
LVL 1
capturetheflagAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Michel PlungjanIT ExpertCommented:
This is not trivial.

I suggest you remove the need for double clicking by

1

Adding a delete icon to the record

2

Edit in place
something like this (not tested)
<tr class="rowOdd">
            	<td><a href="#" class="edit"><img src="https://vsr.dev.fema.net/asd/images/icons/edit.png" class="icon" /></a></td>
            	<td><a href="#" class="delete"><img src="https://vsr.dev.fema.net/asd/images/icons/delete.png" class="icon" /></a></td>
              <td class="ID">1234</td>
              <td>SMITH, MARTY R.</td>
              <td>DOG, DEPUTY A.</td>
              <td>5/1/2013</td>
              <td>Virginia</td>
            </tr>

Open in new window


and
$(function() {
  $(".edit").on("click",function() {
    $('tr.selected').removeClass('selected');
    var $row = $(this).closest('tr');
    $row.addClass('selected');
    editRow($row);
  });
  $(".delete").on("click",function() {
    $('tr.selected').removeClass('selected');
    var ID = $(this).closest('td').siblings().find('.ID');
    if (confirm("Delete this row?")) {
      var $row = $(this).closest('tr');
      $.post("delete.asp",{"ID":ID},function(){
        $row.slideUp(1000, function() {
          $(this).remove();
        });
      });
    }
  });
});
var cellIDs = ["","","ID","name1","name2,"date","state"]
function editRow($row) {
   var $cells = $row.children('td');
   for (var i=2;i<$cells.length;i++) { // start at the 3rd cell
     $cells[i].html('<input type="text" id="'+cellIDs[i]+'" value="'+$cells[i].text()+'"/>')
   }
    // here we could swap the edit and delete for a save and cancel
}

Open in new window

capturetheflagAuthor Commented:
Hello mplungjan,

Thank you for responding to my jQuery/ASP question.  I am glad to take your approach to coding this way.
The reason I need a pop up modal widow after clicking on the record is because of space.
Due to our web rules, I can only display 5 fields on a data table, however, there are 10 fields to enter/update/delete for each record.  Is this possible with the code you have given me?
thanks for your help.

Mike
Michel PlungjanIT ExpertCommented:
Sure - you can hide the cells and only show them in the popup - I loop to end of cells regardless of visibility
CompTIA Security+

Learn the essential functions of CompTIA Security+, which establishes the core knowledge required of any cybersecurity role and leads professionals into intermediate-level cybersecurity jobs.

Learn More!
capturetheflagAuthor Commented:
Hello mplungjan,

I am somewhat new to jQuery and ASP would like to know,

How do I hide the cells and only show them in the popup and how do I loop to the end of the cells with the code you have given me?  I will take it from that point to read and learn.
I have increase the point value of the answer too.
I know it's not enough but thank you very much,

Mike
Michel PlungjanIT ExpertCommented:
Like this

<tr class="rowOdd">
            	<td><a href="#" class="edit"><img src="https://vsr.dev.fema.net/asd/images/icons/edit.png" class="icon" /></a></td>
            	<td><a href="#" class="delete"><img src="https://vsr.dev.fema.net/asd/images/icons/delete.png" class="icon" /></a></td>
              <td class="ID">1234</td>
              <td>SMITH, MARTY R.</td>
              <td>DOG, DEPUTY A.</td>
              <td>5/1/2013</td>
              <td>Virginia</td>
              <td class="hidden">(505)5551111</td>
              <td class="hidden">123234234</td>
            </tr>

Open in new window


and
var cellIDs = ["","","ID","name1","name2,"date","state","hiddencell1","hiddencell2"]

function editRow($row) {
   var $cells = $row.children('td');
   for (var i=2;i<$cells.length;i++) { // start at the 3rd cell and run to end !!!
     $cells[i].html('<input type="text" id="'+cellIDs[i]+'" value="'+$cells[i].text()+'"/>')
   }
}

Open in new window

capturetheflagAuthor Commented:
Would I be able to have the code like this? To use for multiple data tables in the app.
  How would I replace the alert part of the code> 

		  $(document).on('dblclick','table.hoverStyle tr',function(){
		 	$('tr.selected').removeClass('selected');
		  	$(this).addClass('selected');
		  	alert('edit dialog displays');
		  });

Open in new window

Michel PlungjanIT ExpertCommented:
Sure. Just change my

 $(".edit").on("click",function() {

to your

 $(document).on('dblclick','table.hoverStyle tr',function(){
capturetheflagAuthor Commented:
OK, I am a little slow about this, I tried this and it did not work.

    $(document).on('dblclick','table.hoverStyle tr',function(){
    $('tr.selected').removeClass('selected');
    var $row = $(this).closest('tr');
    $row.addClass('selected');
    editRow($row);
  })

Open in new window

Michel PlungjanIT ExpertCommented:
No, I was slow.

 $(document).on('dblclick','table.hoverStyle tr',function(){
    $('tr.selected').removeClass('selected');
    $(this).addClass('selected');
    editRow($(this));
  })

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
capturetheflagAuthor Commented:
Thanks for your help
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.