Improve company productivity with a Business Account.Sign Up

Solved

jQuery Modal Window pop up from datatable form

Posted on 2013-06-10

jQuery
ASP

1 solution

Medium Priority

5,709 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

Comment

Question by:capturetheflag

10 Comments

LVL 75

Expert Comment

by:Michel Plungjan

ID: 392370392013-06-11

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

LVL 1

Author Comment

by:capturetheflag

ID: 392375122013-06-11

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

LVL 75

Expert Comment

by:Michel Plungjan

ID: 392375532013-06-11

Sure - you can hide the cells and only show them in the popup - I loop to end of cells regardless of visibility

LVL 1

Author Comment

by:capturetheflag

ID: 392377752013-06-11

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

LVL 75

Expert Comment

by:Michel Plungjan

ID: 392379192013-06-11

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

LVL 1

Author Comment

by:capturetheflag

ID: 392415082013-06-12

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

LVL 75

Expert Comment

by:Michel Plungjan

ID: 392415192013-06-12

Sure. Just change my

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

to your

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

LVL 1

Author Comment

by:capturetheflag

ID: 392415722013-06-12

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

LVL 75

Accepted Solution

by:Michel Plungjan

Michel Plungjan earned 2000 total points

ID: 392418742013-06-12

No, I was slow.

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

LVL 1

Author Closing Comment

by:capturetheflag

ID: 392596932013-06-19

Thanks for your help

Featured Post

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment Already a member? Login.

Delegation for dynamic elements using JQuery on()

Article by: Anthony

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…

jQuery

Chart.js - An Introduction

Article by: Rob

Introduction Chart.js, used properly, can visually add a difference to your charting applications. It engages your visitors and allows them to interact with data they otherwise wouldn't be able to without expensive and complicated systems. For this…

Introduction to jQuery (Part 1)

Video by: Jason

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)

Introduction to jQuery (Part 2)

Video by: Jason

The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…