MVC Deletemodal with extra options using jQuery

Question

In MVC I made a jQuery modal asking me if i'm sure if i want to delete it, and then make a postback with $.post I use this for all my 'Index views', which are quite a lot.

For most views, when I delete something, the row from the table is also delete with hide()

now, for some views, things do not really get deleted, but they get 'inactive'. So in that case i dont want to delete them from the table, I rather just give them the class 'rowinactive'

So this is what i've got:

Index.aspx

<script type="text/javascript">
    $(document).ready(function () {

        $(".delbtn").click(function () {
            var msg = "deelnemer \"" + $(this).parent().parent().find(".dlnVoornaam").text() + " "+$(this).parent().parent().find(".dlnNaam").text()+"\" ";
            deleteConfirmation(msg, this, true);
            return false;
        });
    });
</script>

The HTML table

            <th>
            </th>
            <th>
                Aanspreking
            </th>
            <th>
                Naam
            </th>
            <th>
                Voornaam
            </th>

            <th>
                Functie
            </th>
            <th>
                Creatiedatum
            </th>
            <th>
                Annulatiedatum
            </th>
            <th>

                Update
            </th>
            <th>
                Email
            </th>
            <th>
                Username
            </th>
        </tr>

        <tr class="rowinactive">

            <td>

            </td>
            <td>
                De heer
            </td>
            <td class="dlnNaam">
                Van der Straeten                                                                                                                                                                                                                                               
            </td>
            <td class="dlnVoornaam">
                Stefan                                                                                                                                                                                                                                                         
            </td>

            <td>
                Webdev                                                                                              
            </td>
            <td>
                29/09/2010
            </td>
            <td>
                29/09/2010
            </td>
            <td>


            </td>
            <td>
                xxx                                                                                                                                                                                                                                    
            </td>
            <td>
                Stefan.Van der Stra   
            </td>
        </tr>

        <tr class="">
            <td>


<a href='/2011-2012/Deelnemer/Edit/5?instID=3562'>
    <img src="/img/pencil.png" alt="Edit" width="16" /></a>

<a href='/2011-2012/Deelnemer/Details/5?instID=3562'>
    <img src="/img/application_view_detail.png" alt="Details"
        width="16" /></a>

<a class="delbtn" href='/2011-2012/Deelnemer/Delete/5?instID=3562'>
    <img src="/img/cancel.png" alt="Delete" width="16" /></a>

            </td>
            <td>

                De heer
            </td>
            <td class="dlnNaam">
                Van der Straeten                                                                                                                                                                                                                                               
            </td>
            <td class="dlnVoornaam">
                Stefan                                                                                                                                                                                                                                                         
            </td>
            <td>
                Webdev                                                                                              
            </td>

            <td>
                29/09/2010
            </td>
            <td>

            </td>
            <td>

            </td>
            <td>
                xxx                                                                                                                                                                                                                                    
            </td>

            <td>
                Stefan.VanderStraet   
            </td>
        </tr>

        <tr class="rowinactive">
            <td>

            </td>
            <td>
                De heer
            </td>

            <td class="dlnNaam">
                Van der Straeten                                                                                                                                                                                                                                               
            </td>
            <td class="dlnVoornaam">
                Stefan                                                                                                                                                                                                                                                         
            </td>
            <td>
                Webdev                                                                                              
            </td>
            <td>

                29/09/2010
            </td>
            <td>
                29/09/2010
            </td>
            <td>

            </td>
            <td>
                xxx                                                                                                                                                                                                                                    
            </td>

            <td>
                Stefan.VanderStraet1  
            </td>
        </tr>

        <tr class="">
            <td>

<a href='/2011-2012/Deelnemer/Edit/7?instID=3562'>
    <img src="/img/pencil.png" alt="Edit" width="16" /></a>

<a href='/2011-2012/Deelnemer/Details/7?instID=3562'>

    <img src="/img/application_view_detail.png" alt="Details"
        width="16" /></a>

<a class="delbtn" href='/2011-2012/Deelnemer/Delete/7?instID=3562'>
    <img src="/img/cancel.png" alt="Delete" width="16" /></a>

            </td>
            <td>
                De heer
            </td>
            <td class="dlnNaam">
                Van der Straeten                                                                                                                                                                                                                                               
            </td>

            <td class="dlnVoornaam">
                Stefan                                                                                                                                                                                                                                                         
            </td>
            <td>
                Webdev                                                                                              
            </td>
            <td>
                29/09/2010
            </td>
            <td>


            </td>
            <td>

            </td>
            <td>
                xxx                                                                                                                                                                                                                                     
            </td>
            <td>
                Stefan.VanderStraet2  
            </td>
        </tr>


    </table>

External JS File

function deleteConfirmation(msg, handler) {
    deleteConfirmation(msg, handler, false);
}

function deleteConfirmation(msg, handler, inactive) {
    var showIt = function (hash) {
        hash.w.find("#modaltekst").text(msg);
        $("#btnJa").data('handler', $(handler));
        $("#btnJa").data('inactive', inactive);
        $("#delmodal").show();
        return false;
    };

    $("#delmodal").jqm({ onShow: showIt }).jqmShow();

}

$(document).ready(function () {
    $("#btnJa").click(function () {
        $("#delmodal").jqmHide();
        setHighlight("Verwijderen...");
        $.post($(this).data('handler').attr('href'), null, function (data) {
            if (data.succes) {
                setHighlightOK("Verwijderd");
                if ($("#btnJa").data('inactive')==false) {
                    $("#btnJa").data('handler').parent().parent().fadeOut("slow");
                } else {
                    $("#btnJa").data('handler').parent().parent().addClass("rowinactive");
                }
            } else {
                if (data.error != "") {
                    setError(data.error);
                } else {
                    setError("Verwijderen mislukt.");
                }
            }
        }, "json");
    });

    $("#btnNee").click(function () {
        $("#delmodal").jqmHide();
    });
});

So to make it possible to make the row inactive rather than hide it, I added a boolean the var inactive.

Now, rather than adding the inactive var, i would like to send a function from my Index.aspx in the calling of deleteConfirmation. the function then would contain the code that needs to be executed on succes of the postback. I want this because i would like to hide the buttons of the inactive rows, eventhough i probably could do that with live() that doesnt look clean to me.

the additional question is: how would you optimize this code?

Answer 1

what i assume from ur code is that u want two things

1-distinguish inactive rows from others 2-disable delete and edit links

u can do this by writing some css and jquery. u can write a style for inactive rows

.inactive
{
   background-color:gray;

}

$("tr.inactive a").live("click",function(){
  return false;
});

and when u inactivate ur row using ajax call u can just add class "inactive" to corresponding tr and disable corresponding delete button like

$("tr.inactive .delBtn").attr("disabled","disabled");