capturetheflag
asked on
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
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');
});
functions.jstof.txt
ASKER
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
Sure - you can hide the cells and only show them in the popup - I loop to end of cells regardless of visibility
ASKER
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
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()+'"/>')
}
}
ASKER
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');
});
Sure. Just change my
$(".edit").on("click",func tion() {
to your
$(document).on('dblclick', 'table.hov erStyle tr',function(){
$(".edit").on("click",func
to your
$(document).on('dblclick',
ASKER
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);
})
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for your help
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)
Open in new window
and
Open in new window