javascripthtmlcssdatatablepopup

A confirmation popup and Subsequent action


I have a dataTables HTML table on Apache that is generated daily showing all the VMs in a proxmox cluster.

The table is generated dynamically everyday by API calls to Proxmox. I want to be able to shutdown or reboot a VM by clicking a link, button, image, whatever for that VM in its row in the HTML table.

I am able to do this by creating a link in a cell in each row, pointing to a html page that calls a bash script in cgi-bin,

The link looks like this for reboot, for exanple:

<a href=$VMNAME-reboot.html ><img src="rebootIcon.png"</a>

Basically there is an icon for reboot that you click and it just links to another html page.

So for a VM named MYDC01, the link points to MYDC01-reboot.html. This html file loads an iframe in which there is a call to a cgi-bin script :

cgi-bin/reboot.sh?MYDC01

The reboot script takes the ${QUERY_STRING} and does an API call to proxmox and reboots the VM.

This works .. but ..... there is no confirmation pop up.

What I want is to click the reboot link, get a pop up that says "are you sure?" OK/Cancel.

I was looking at something like : https://www.cssscript.com/confirmation-popup-dialog/

I was able to copy the source to my Apache and just create a dummy page, and I get the pop up with OK and Cancel.

But I don't know enough about Javascript to know how to make the "OK" button actually do something.

And of course I need something dynamic because there is a different VMname in each row of the table and a number of different functions (Reboot, Reset, Start, Shutdown etc).

There could conceivably be custom code for each VM in each row of the table if need be as the table is being created daily.

Currently I get all the VMs into a csv file, then loop through the VMs and build a table row per VM.

# Create html rows
TROW="
<tr><td>$CLUSTER</td>
<td><a href=https://$NODE:8006 target=_blank>$NODE</a></td>
<td>$VMNAME</td>
<td><a href=$VMNAME-reboot.html><img src="rebootIcon.png"></a></td>
</tr>

Thinking about how this would work, I click on a reboot icon in the row for MYDC01, I get a pop up, I choose OK .. and that would then have to know to action on MYDC01.

Alternatively each row, could have a checkbox, I select a row, and then click a reboot icon somewhere on the page, get a pop up and then "OK" would reboot that VM, but I don't know how to do that.

Any help or ideas would be greatly appreciated.

thanks


Solution

  • It would be better to use addEventListener() instead of inline Javascript, but here is a quick and dirty way of doing it. You should be able to extrapolate from there a more permanent implementation.

    <td><img src="rebootIcon.png" onclick="if( confirm('You sure?') )  location.href = 'MYDC01-reboot.html' "> </td>