Now that you have WordPress installed, understand the interface, and know how to install new parts, let’s take a look at our recommended plugins.
Course Of The Month
11 days, 5 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
jQuery Modal Window pop up from datatable form
Posted on 2013-06-10
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
tof.txt
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');
});
tof.txt
[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
Active 2 days ago
This is not trivial.
I suggest you remove the need for double clicking by
something like this (not tested)
and
I suggest you remove the need for double clicking by
1
Adding a delete icon to the record2
Edit in placesomething 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>
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
}
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
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
Active 2 days ago
Sure - you can hide the cells and only show them in the popup - I loop to end of cells regardless of visibility
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
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
Active 2 days ago
Like this
and
<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>
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()+'"/>')
}
}
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>
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');
});
Active 2 days ago
Sure. Just change my
$(".edit").on("click",func
to your
$(document).on('dblclick',
$(".edit").on("click",func
to your
$(document).on('dblclick',
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);
})
Active 2 days ago
No, I was slow.
$(document).on('dblclick',
$('tr.selected').removeCla
$(this).addClass('selected
editRow($(this));
})
$(document).on('dblclick',
$('tr.selected').removeCla
$(this).addClass('selected
editRow($(this));
})
Featured Post
The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.
One of a set of tools we're offering as a way of saying thank you for being a part of the community.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
The most up-to-date version of this article is on my Blog
https://iconoun.com/blog/
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to dynamically set the form action using jQuery.
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…
Suggested Courses
Earn Certification
HTML5 Specialist - Certification
Free withPremium
Course of the Month11 days, 5 hours left to enroll
631 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.