Solved

jQuery Modal Window pop up from datatable form

Posted on 2013-06-10
10
4,658 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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
 
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

Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How to post data to an API using ASP Classic 3 51
Print a <div></div> only 5 55
bootstrap form validations! 1 41
Make New Browser Window Fully Functional 7 36
This demonstration started out as a follow up to some recently posted questions on the subject of logging in: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28634665.html and http://www.experts-exchange.com/Programming/…
This article discusses how to implement server side field validation and display customized error messages to the client.
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)

752 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