Sunday, November 4, 2012

jquery dialog box with jquery ui button


 <script type="text/javascript" src="js/jquery.1.7.min.js"></script>
    <script type="text/javascript" src="js/jquery.1.7.2.ui.min.js"></script>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/blitzer/jquery-ui.css" type="text/css" rel="Stylesheet" />
    <link href="css/indiashoponline.css" rel="stylesheet" type="text/css" />
    <script src="js/SpryEffects.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $('#purchasetable').dialog({ autoOpen: false, modal: true, title: "Enter Purchase Details", width: 500, resizable: false,
                buttons: {
                    'Continue Purchase': function () {
                        var invalidcount = 0;
                        $("#purchasetable :input[type=text]").each(function (index, element) {
                            if (customvalidation(element) == false)
                                invalidcount = invalidcount + 1;
                        });
                        if (invalidcount == 0) {
                            $('#userdetails').dialog('open');
                            $('.ui-widget-overlay').click(function () {
                                $('#userdetails').dialog('close');
                            });
                        }
                    }
                }
            });
            $('#userdetails').dialog({ autoOpen: false, modal: true, title: "Enter User Details", width: 500, resizable: false,
                buttons: {
                    'Complete Purchase': function () {
                        var invalidcount2 = 0;
                        $("#userdetails :input[type=text]").each(function (index, element) {
                            if (customvalidation(element) == false)
                                invalidcount2 = invalidcount2 + 1;
                        });
                        if (invalidcount2 == 0) {
                            $('.ui-dialog-buttonpane button:contains(Complete Purchase)').attr("id", "completepurchasebtn");
                            $('#completepurchasebtn').attr("disabled", true);
                        }
                        if (invalidcount2 == 0) {
                            $.ajax({
                                type: "post",
                                url: "Default5.aspx/saveUserDetails",
                                data: "{productId:'productxt',userName:'" + $("#nametxt").val() + "',bomEmailId:'" + $("#bomEmailtxt").val() + "',amazonEmailId:'" + $("#amazonEmailtxt").val() + "',phoneNumber:'" + $("#phoneNumbertxt").val() + "',firstName:'" + $("#firstNametxt").val() + "',middleName:'" + $("#middleNametxt").val() + "',lastName:'" + $("#lastNametxt").val() + "',homeName:'" + $("#houseNametxt").val() + "',street:'" + $("#streettxt").val() + "',city:'" + $("#citytxt").val() + "',state:'" + $("#statetxt").val() + "',country:'" + $("#countrytxt").val() + "',zipCode:'" + $("#ziptxt").val() + "',mobile:'" + $("#mobiletxt").val() + "',homePhone:'" + $("#homePhonetxt").val() + "'}",
                                async: true,
                                contentType: "application/json; charset=utf-8",
                                dataType: "json",
                                success: function (data) {
                                    if (data.d == "2") {
                                        alert('Purchase Successful, Check your email for more details');
                                        $('#purchasetable').dialog('close');
                                        $('#userdetails').dialog('close');
                                    }
                                    else if (data.d == "3") {
                                        alert('Purchase Completed, Error on Email Sending');
                                        $('#purchasetable').dialog('close');
                                        $('#userdetails').dialog('close');
                                    }
                                },
                                error: function () {
                                    alert('Problem');
                                }
                            });
                        }
                    }
                }
            });

            $("#purchasetable :input").blur(function () {
                var element = $(this);
                customvalidation(element);
            });
            $("#userdetails :input").blur(function () {
                var element = $(this);
                customvalidation(element);
            });
        });
        function purchasepopup() {
            $('#purchasetable').dialog('open');
            $('.ui-widget-overlay').click(function () { $('#purchasetable').dialog('close'); });
        }
function customvalidation(element) {
    isvalid = true;
    var classname = $(element).attr('class');
    var value = $(element).val();
    if (classname.indexOf("optional") == -1 && value == "") {
        $(element).next("span").text('Field Required');
        isvalid = false;
    }
    else {
        $(element).next("span").text('');
        if (classname.indexOf("requireddb") != -1) {
            $.ajax({
                type: "post",
                url: "Default5.aspx/checkAmazonId",
                data: "{amazonId:'" + value + "'}",
                async: false,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (data) {
                    if (data.d == "1") {
                        $(element).next("span").text('');
                    }
                    else if (data.d == "0") {
                        $(element).next("span").text('Purchased Already');
                        isvalid = false;
                    }
                    else if (data.d == "-1") {
                        $(element).next("span").text('SQL Error');
                        isvalid = false;
                    }
                    else {
                        $(element).next("span").text('Error');
                        isvalid = false;
                    }

                },
                error: function () {
                    alert('Problem');
                    isvalid = false;
                }
            });
        }
        if (classname.indexOf("phoneno") != -1) {
            var numpattern = /^\d{8,12}$/;
            if (value.match(numpattern)) {
                $(element).next("span").text('');
            }
            else {
                $(element).next("span").text('Invalid Number');
                isvalid = false;
            }
        }
        if (classname.indexOf("email") != -1) {
            //verify email start
            var pattern = /^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/;
            if (value.match(pattern)) {
                $(element).next("span").text('');
                if (classname.indexOf("emaildb") != -1) {
                    $.ajax({
                        type: "post",
                        url: "Default5.aspx/checkBomEmail",
                        data: "{emaiId:'" + value + "'}",
                        async: false,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            if (data.d == "2") {
                                $(element).next("span").text('');
                            }
                            else if (data.d == "1") {
                                $(element).next("span").text('Purchased Already');
                                isvalid = false;
                            }
                            else if (data.d == "0") {
                                $(element).next("span").text('Not Exist in Bom Tv');
                                isvalid = false;
                            }
                            else if (data.d == "-1") {
                                $(element).next("span").text('SQL Error');
                                isvalid = false;
                            }
                            else {
                                $(element).next("span").text('Error');
                                isvalid = false;
                            }

                        },
                        error: function () {
                            alert('Problem');
                            isvalid = false;
                        }
                    });
                }
            }
            else {
                $(element).next("span").text('Invalid Email');
                isvalid = false;
            }
            //verify email end
        }
    }
    return isvalid;
}
       
    </script>

No comments:

Post a Comment