Call a function with parameter, opens a modal dialog and send the content via ajax

Question

I have a DataList with IDs to be deleted, which I want to ask first WHY is being deleted, using a modal dialog. For that, there is this piece of code which repeats itself according to the number of records returned:

<asp:ImageButton runat="server" ID="deleteImageButton" ImageUrl="~/images/Delete.png" ToolTip="Baixar item!" OnClientClick='<%# String.Format("postDelete(\"{0}\")", Eval("OrcID")) %>' />

And here is the code to process it:

function postDelete(tempOrcID) {
        $.ajax({
            type: "GET",
            url: "Baixar_Teste.aspx",
            data: { paramorcID: tempOrcID, reasonText: $("#reasonText").val() }
        });
    };

It works perfectly.

However I would like to show an UI dialog when the user clicks the image in the 'asp' code up above. Then, a modal dialog would show and capture the parameter 'reasonText' from the code below, and finally, update the database.

<div id="dialogo" style="display: none">
    <asp:Label ID="Razao" Text="Razão" runat="server" />
    <asp:TextBox ID="reasonText" runat="server" />
</div>

I've tried this, but no success at all:

$("#dialogo").dialog({
        autoOpen: false,
        height: auto,
        width: auto,
        modal: true,
        buttons: {
            "Ok": function () {
                $.ajax({
                    type: "GET",
                    url: "Baixar_Teste.aspx",
                    data: { paramorcID: tempOrcID, reasonText: $("#reasonText").val() }
                }),
                $("#dialogo").dialog('close');
            },
            "No": function () {
                $("#dialogo").dialog('close');
            }
        }
    });

And to wrap it all, the first part of the function would be replaced by this:

function postDelete(tempOrcID) {
        $("#dialogo").dialog('open');
        };

and after pressing the 'OK' button inside modal dialog, the ajax code would work as it already does.

I'm afraid, nothing happens. I don't even see the modal dialog. Any help?

Regards.

Hi Eric. I came up with 2 approaches. The first is plain javascript, with the usual popups:

<script type="text/javascript">
    function ConfirmDelete(tempOrcID) {
        var reasonText = prompt("Por qual motivo?"); // For what reason?
        if (confirm("Dar Baixa nesse Registro?")) { // ok
            $.ajax({
                type: "GET",
                url: "Baixar_Via_AJAX.aspx",
                data: { paramorcID: tempOrcID, paramreasonText: reasonText } 
            })
        }
        else {
            $(this).submit(function (e) {
                e.preventDefault();
                $(this).unbind('submit').submit()
            });
        }
    };
</script>

The problem: 'paramreasonText: reasonText' didn't work in FIREFOX desktop by worked in Firefox for Android. Chrome (40+) for desktop and Android along with IE (10+) for desktop, worked fine.

The second approach was jQuery wise, following your inputs:

<script type="text/javascript">
    $(document).ready(function () {
        $('.delete_link').each(function () {
            $(this).click(function (e) {
                e.preventDefault(); // otherwise it doesn't stop in the modal
                orcID = $(this).data('orcid'); // here I get the respective ID that I'm about to delete. The reason is there is a DataList, that will repeat the same 'image button' along the way. The code is at the end.
                $("#reasonText").val("");
                $("#dialogo").dialog({
                    height: "auto",
                    width: "auto",
                    modal: true,
                    buttons: {
                        "Confirmar": function () {
                            $.ajax({
                                type: "GET",
                                url: "Baixar_Via_AJAX.aspx",
                                data: { paramorcID: orcID, paramreasonText: $("#reasonText").val() }
                            });
                            $("#dialogo").dialog('close');
                        },
                        "Cancelar": function () {
                            alert("Baixa cancelada!"); // Action cancelled
                            $("#dialogo").dialog('close');
                        }
                    }
                });
            });
        });
    });
</script>

Here is the HTML(ASP) code to apply over:

<body>
<div id="dialogo" title="Justifique a Baixa!" style="display: none">
    <label id='Razao'>Razão:</label>
    <input type="text" id='reasonText'/>
</div>
<asp:DataList ID="DataListBaixa" runat="server" >
        <AlternatingItemStyle />
        <HeaderStyle />
        <HeaderTemplate>
            <table>
                <tr>
                    <th style="width: 50px">Ação</th>
                    <th style="width: 150px">Conta</th>
                    <th style="width: 150px">Grupo</th>
                    <th style="width: 180px">Item</th>
                    <th style="width: 120px">Data</th>
                    <th style="width: 80px">Por</th>
                    <th style="width: 100px">(R$)</th>
                </tr>
            </table>
        </HeaderTemplate>
        <ItemStyle />
        <ItemTemplate>
            <table>
                <tr>
                    <td style="width: 50px; text-align: center">
                        <input type="image" data-orcid='<%# Eval("OrcID") %>' class="delete_link" src="../images/Delete.png" id="deleteImage" />
                    </td>
                    <td style="width: 150px; text-align: center">
                        <Label ID="LabelTipo" Text='<%# Eval("Conta") %>' runat="server" />
                    </td>
                    <td style="width: 150px; text-align: center">
                        <Label ID="LabelGrupo" Text='<%# Eval("Grupo") %>' runat="server" />
                    </td>
                    <td style="width: 180px; text-align: center">
                        <Label ID="LabelItem" Text='<%# Eval("Item") %>' runat="server" />
                    </td>
                    <td style="width: 120px; text-align: center">
                        <Label ID="LabelData" Text='<%# Eval("Data", "{0:dd/MM/yyyy}") %>'
                            runat="server" />
                    </td>
                    <td style="width: 80px; text-align: center">
                        <Label ID="UserName" Text='<%# Eval("Por") %>' runat="server" />
                    </td>
                    <td style="width: 100px; text-align: center">
                        <Label ID="LabelValor" Text='<%# Eval("Valor","{0:N}") %>' runat="server" />
                    </td>
                </tr>
            </table>
        </ItemTemplate>
    </asp:DataList>

The approach was based on creating a class for the image (delete_link) and iterate through it using '$('#delete_link").each', getting the appropriate ID in order to delete it.

Problem: I used to have this code below to render the image (delete_link), to run a CommandArgument/OnCommand in c# code behind, because I want to update the DataList content, showing that a record was actually deleted/removed. Here it is:

<asp:ImageButton ID="deleteImageButton" runat="server" 
                            ImageUrl="~/images/Delete.png" ImageAlign="Top" 
                            CssClass="delete_link"
                            data-orcid='<%# Eval("OrcID") %>' 
                            CommandArgument='<%# Eval("OrcID") %>' OnCommand="BaixarDB_Click"/>

The second ASP part doesn't work (CommanArgument/OnCommand). As being a 'private void BaixarDB_Click', that is used for other purposes, I can't declare it 'pubic static void BaixarDB_Click' (WebMethod) to call it from jQuery.

Apart from it, the First javascript snippet works fine (with the ASP code mentioned right above) and the second one, almost there.

How can I sort this out?

Answer 1

Hi everyone that has been helping. I finally came up with the solution. The HTML(ASP) page has a DataList. So, the code below repeats itself as many times as necessary fo fulfill the request:

<input type="image" id="deleteImage"
                    data-orcid='<%# Eval("OrcID") %>'
                    class="delete_link"
                    src="../images/Delete.png" />

Then, I have the jQuery to deal with 'data-orcid' below:

<script type="text/javascript">
    $(document).ready(function () {
        $('.delete_link').each(function () {
            $(this).click(function (e) {
                e.preventDefault();
                orcID = $(this).data('orcid');
                $("#reasonText").val("");
                $("#dialogo").dialog({
                    modal: true,
                    height: "auto",
                    width: "auto",
                    buttons: {
                        "Confirmar": function () {
                            $.ajax({
                                type: "GET",
                                url: "Baixar_Via_AJAX.aspx",
                                data: { paramorcID: orcID, paramreasonText: $("#reasonText").val() }
                            });
                            $("#dialogo").dialog('close');
                            ("#MainContent_okImageButton").trigger("click");
                        },
                        "Cancelar": function () {
                            alert("Baixa cancelada!"); // Action cancelled
                            $("#dialogo").dialog('close');
                        }
                    }
                });
            });
        });
    });
</script>

I use jquery-1.9.1.js, jquery-ui-1.10.3.js and jquery-ui-1.10.3.min.css to achieve the results. Note the code ("#MainContent_okImageButton").trigger("click"); . It only exists because I have to run a code behind (c#) snippet(okImageButton_Click). Being a content page, using MasterPages (ASP.NET) I declared the id as 'MainContent'.

The 'okImageButton' is declared like this:

 <asp:ImageButton ID="okImageButton" runat="server" 
                    ImageUrl="~/images/Ok.png" ImageAlign="TextTop" OnClick="okImageButton_Click"/>

The dialog is declared like this:

<div id="dialogo" title="Justifique a Baixa!" style="display: none">
    <label id='Razao' style="font-family: Tahoma; font-size: 1.6em">Razão:</label>
    <input type="text" id='reasonText' style="font-family: Calibri; font-size: 1em; width: 400px" />
</div>

Answer 2

I think auto should be "auto". According to This

String: The only supported string value is "auto" which will allow the dialog height to adjust based on its content.

Also, you might get more info for debugging if you use the developer console which will display JS error messages. Should be F12 key for most browsers.