CODEWITHSUNDEEP
javascriptjquery
no9
no9

Reputation: 6544

Adding a simple confirm/cancel dialog in jQuery 1.4.2

I have put a clickable span into every list item and it works fine. For the moment it invokes a simple alert.

Now I would like to add a simple cancel/confirm dialog. Each selection should call a function.

Here is my code (note the alert where the span click invokes):

<%@ Reference Control="~/KPIP/Controls/MultiUpload.ascx" %>
<%@ Register Src="~/KPIP/Controls/MultiUpload.ascx" TagName="MultiUpload" TagPrefix="tetrada" %>

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Entry.aspx.vb" Inherits="KPIP_Entry" %>


        var barcodes = { <%# BarcodeArray %> }



        kpip.viewAttachment = function (url) {
            $("#entryViewer").attr("src", "../Viewer.aspx?image=" + url);
        }


        function resizeViewer() {
            $("#entryViewer").hide();
            $("#attachments").hide();
            $("#entryViewer").width($("#entryForm").width() - 320 - 4);
            $("#entryViewer").height($("#entryForm").height() - $("#header").height() - 4);
            $("#attachments").height($("#entryForm").height() - $("#header").height() - 4);
            $("#attachments").show();
            $("#entryViewer").show();
        }

        $(function () {
            $.each(barcodes, function(key, value) {
                $("#barcodesList").append("<li>" + key + "</li>");
            });

            deleteButton = $('<span />').addClass('deleteButton').text('Delete');
            $('ul#barcodesList li').append(deleteButton);


            if ($("#barcodesList").children().size() > 0) {
                $("#barcodesList").after('<div id="barcodesShadow" class="cc_panelShadow"></div>');
            }


            $("#barcodesList > li").click(function () {
                $(this).children(".children").toggle();
                $("#barcodesList > li").removeClass("clicked");
                $(this).addClass("clicked");
                $("#selectedBarcode").val($(this).text());

                var params = '{ barcode : "' + $(this).text() + '", path : "' + barcodes[$(this).text()] + '" }';
                $.ajax({
                    type: "POST",
                    contentType: "application/json; charset=utf-8",
                    url: "Entry.aspx/Attach",
                    dataType: "json",
                    data: params,
                    success: function () {
                        $("#dummyPostbackButton").click();
                    },
                    error: function (request, status, error) {
                        alert("Error attaching barcode file.");
                    }
                });
            });

            $("#barcodesList > li > span").click(function(e) {
               e.stopPropagation();
               var partxt = $(this).parent().clone().children().remove().end().text();
               alert(partxt);
            });

            $(window).bind("resize", function () {
                setTimeout(function () { resizeViewer(); }, 10);
            });
            setTimeout(function () { resizeViewer(); }, 10);

            $("#barcodesList > li").each(function () {
                if ($(this).text() != $("#selectedBarcode").val()) { return; }
                $(this).addClass("clicked");
            });
        });

    </script>
</head>
<body>
    <form id="entryForm" runat="server">
    <div id="header" class="ContentHeader">
        <asp:Label runat="server" CssClass="ContentHeaderLabel" Text="<%$ Resources: Header.Text %>"/>
    </div>
    <div id="attachments">
        <asp:Label class="tetradaGroupLabel" runat="server" Text="<%$ Resources: AttachmentsPanel.Text %>" />
        <tetrada:MultiUpload ID="upload" runat="server" />
        <asp:Panel ID="BarcodesListPanel" runat="server">
            <asp:Label class="tetradaGroupLabel" runat="server" Text="<%$ Resources: BarcodesPanel.Text %>" />
            <ul id="barcodesList"></ul>
        </asp:Panel>
        <asp:HiddenField ID="selectedBarcode" runat="server" />
        <asp:Button ID="dummyPostbackButton" runat="server" CausesValidation="false" />
    </div>
    <iframe id="entryViewer" frameborder="0" runat="server"></iframe>
    </form>
</body>
</html>

I tried putting dialog in several places and opening it in click event, but nothing happens. Can some one please help me out here?

Best regards, no9.

Upvotes: 0

Views: 1861

Answers (3)

raam86
raam86

Reputation: 6871

If bu simple you mean native,use confirm instead of alert;

confirm("Your Text")//Return true if user pressed ok
// false otherwise

so you can do something like:

if(confirm("Your Text")){
//do stuff
}

Upvotes: 2

HTTP
HTTP

Reputation: 1724

If you want to add a confirm dialog box to your code

It looks like

var choice = confirm("Are you sure?");

And validates if the user clicks yes || no

if(choice == true) { //then do something here }

Hope it helps..

Upvotes: 1

Moritz Petersen
Moritz Petersen

Reputation: 13057

There is a plugin for that: Simple Confirm Dialog (many other similar plugins are out ther, too, I guess).

Upvotes: 1

Related Questions