Solved

jQuery Modal Window pop up from datatable form

Posted on 2013-06-10
10
4,277 Views
Last Modified: 2013-06-19
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
0
Comment
Question by:capturetheflag
  • 5
  • 5
10 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39237039
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

0
 
LVL 1

Author Comment

by:capturetheflag
ID: 39237512
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
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39237553
Sure - you can hide the cells and only show them in the popup - I loop to end of cells regardless of visibility
0
 
LVL 1

Author Comment

by:capturetheflag
ID: 39237775
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
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39237919
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

0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 1

Author Comment

by:capturetheflag
ID: 39241508
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

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 39241519
Sure. Just change my

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

to your

 $(document).on('dblclick','table.hoverStyle tr',function(){
0
 
LVL 1

Author Comment

by:capturetheflag
ID: 39241572
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

0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 39241874
No, I was slow.

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

Author Closing Comment

by:capturetheflag
ID: 39259693
Thanks for your help
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

I was asked about the differences between classic ASP and ASP.NET, so let me put them down here, for reference: Let's make the introductions... Classic ASP was launched by Microsoft in 1998 and dynamically generate web pages upon user interact…
Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

910 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now