mimic alert box behaviour

Question

I Have a table of data in my webpage with certain number of rows. I'm giving an option to delete multiple rows in that table by clicking on the check box present on each row and finally click on Delete button. Deletion of each row requires certain inputs from the user and a click on OK or Delete button inside that inputs box.Now my question is how to hold the code from not showing the next input box until the user performs some operation in current one.Some thing like an alert box.Model boxes does not seem to help because they do not hold the execution.

possible duplicate of how to let javascript wait until certain event happens

making a function to wait an event before returning

If the answer is no not possible. Then how do you solve such GUI scenario.

Answer 1

The button click on your custom modal should actually do the processing and not the button click on the row.

The button click on the row should set a field with the data you want to delete. The button in the dialog does what you originally did with the row.

Other option is to use return window.confirm("Are you sure?");

Answer 2

1. Add IDs of selected rows to an array.
2. Clicking a Delete button calls a function that displays your custom confirmation dialog for the first selected row (first item in the array).
3. Clicking any of the buttons in your alert does what it is supposed to do and
   • closes the dialog
   • executes the second and third step for the next item in the array until the last element.

Here's a basic example:

Javascript

<script>
var itemsToDelete = new Array;
function updateItemsToDelete( row ) {
    var getIndex = itemsToDelete.indexOf( row.id );
    if ( getIndex == -1 ) {
        itemsToDelete.push( row.id );
    } else {
        itemsToDelete.splice( getIndex, 1 );
    }
}


function removeRow( rowID ) {
    var toDelete = document.getElementById( rowID );
    toDelete.parentNode.removeChild( toDelete );
    itemsToDelete.shift();
    requestConfirmation();
}
function nextPlease() {
    itemsToDelete.shift();
    requestConfirmation();  
}

function requestConfirmation() {
    if ( itemsToDelete.length == 0 ) {
        document.getElementById( "box" ).style.display = "none";
        return;
    }

    document.getElementById( "box" ).style.display = "block";
    document.getElementById( "message" ).innerHTML = "Remove " + itemsToDelete[0] + "?";
    document.getElementById( "yes_button" ).onclick = function() { removeRow( itemsToDelete[0] ); };
    document.getElementById( "no_button" ).onclick = nextPlease;
}
</script>

HTML

<div id="box" style="display:none;">
    <span id="message"></span>
    <input type="button" id="yes_button" value="yes" />
    <input type="button" id="no_button" value="no" />
</div>
<table>
    <tr id="row1">
        <td>
            <input type="checkbox" onclick="updateItemsToDelete( this.parentNode.parentNode );" />
        </td>
        <td>row 1</td>
    </tr>
    <tr id="row2">
        <td>
            <input type="checkbox" onclick="updateItemsToDelete( this.parentNode.parentNode );" />
        </td>
        <td>row 2</td>
    </tr>
    <tr id="row3">
        <td>
            <input type="checkbox" onclick="updateItemsToDelete( this.parentNode.parentNode );" />
        </td>
        <td>row 3</td>
    </tr>
    <!-- and so on... -->
</table>
<input type="button" onclick="requestConfirmation();" value="delete selected" />