Confirm box not working with ajax

[selvaParticipant]

Hi,

I have a grid and jqxWindow(confirm Box). I select one row from grid and want to block that row.before that i want to show the confirmation using jqxWindow Confirm box. Suppose first i select on row then confirm box should appear but i click cancel. again i select another one record and click OK in confirm box but in ajax calling that row wont be blocked instead of first time selected row was blocked.

Here my code:

var source_language =
                        {
                            datatype: "json",
                            datafields: [
                                {name: 'client', type: 'string'},
                                {name: 'prdTyId', type: 'string'},
                                {name: 'prdTyName', type: 'string'},
                                {name: 'block', type: 'string'}
                            ],
                            id: 'id',
                            url: "getProductionType?client=" + $('#client_production').val()
                        };
                var dataAdapter_production = new $.jqx.dataAdapter(source_language);
                $("#jqxgrid_productionType").jqxGrid(
                        {
                            width: 500,
                            theme: theme_name,
                            height: 345,
                            source: dataAdapter_production,
                            filterable: true,
                            autoshowfiltericon: true,
                            sortable: true,
                            altrows: true,
                            columnsresize: true,
                            showtoolbar: true,
                            selectionmode: 'singlerow',
                            toolbarheight: 40,
                            rendertoolbar: function(toolbar) {
                                var me = this;
                                var container = $("<div style='margin: 5px;'></div>");
                                var span = $("<span style='float: left; margin-top: 5px; margin-right: 4px;'><font color='#fff' style='font:bold 14px Arial, Helvetica;'>Production Type</font></span>");
                                var addButton = $("<div style='float: right; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='jqx/images/add.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Add</span></div>");
                                var editButton = $("<div style='float: right; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='jqx/images/edit.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Edit</span></div>");
                                var blockButton = $("<div style='float: right; margin-left: 5px;'><img style='position: relative; margin-top: 2px;' src='jqx/images/block.png'/><span style='margin-left: 4px; position: relative; top: -3px;'>Block</span></div>");
                                toolbar.append(container);
                                container.append(span);
                                container.append(blockButton);
                                container.append(editButton);
                                container.append(addButton);
                                addButton.jqxButton({width: 60, height: 20, theme: theme_name});
                                editButton.jqxButton({width: 65, height: 20, theme: theme_name});
                                blockButton.jqxButton({width: 65, height: 20, theme: theme_name});
                                addButton.click(function(event) {
                                    clearProductionType();
                                    $("#prod_type_new").jqxWindow('open');
                                    $("#Cancel_production").jqxButton({theme: theme_name, disabled: true});
                                });
                                editButton.click(function(event) {
                                    var rowindexes = $("#jqxgrid_productionType").jqxGrid('getselectedrowindex');
                                    if (rowindexes !== -1) {
                                        $("#prod_type_edit").jqxWindow('open');
                                        $('#production_div_edit').html('');
                                        $("#clear_production").jqxButton({disabled: false});
                                        $("#update_production").jqxButton({disabled: false});
                                    } else {
                                        alert_popUp('Warning', "Please select a row to edit");
                                    }
                                });
                                blockButton.click(function(event) {
                                    var rowindexes = $("#jqxgrid_productionType").jqxGrid('getselectedrowindex');
                                    if (rowindexes !== -1) {
                                        if ($('#delete_production').val() === "L") {
                                            alert_popUp('Warning', "Not authorized to block");
                                            $("#jqxgrid_productionType").jqxGrid('clearselection');
                                        } else {
                                            deleteProductionType();
                                        }
                                    } else {
                                        alert_popUp('Warning', "Please select a row to block");
                                    }
                                });
                            },
                            columns: [
                                {text: 'Client', datafield: 'client', hidden: true},
                                {text: 'Production Id', datafield: 'prdTyId', width: 150},
                                {text: 'Production Name', datafield: 'prdTyName', width: 350},
                                {text: 'Block', datafield: 'block', hidden: true}
                            ]
                        });

function deleteProductionType() {
                var rowIndex = $('#jqxgrid_productionType').jqxGrid('getselectedrowindex');
                var productionId = $('#jqxgrid_productionType').jqxGrid('getcellvalue', rowIndex, 'prdTyId');
                alert(productionId);
                $('#confirm_container').css('display', 'block');
                $('#confirm_container').jqxWindow({maxHeight: 150, maxWidth: 420, minHeight: 30, minWidth: 250, height: 100, width: 400,
                    resizable: false, isModal: true, modalOpacity: 0.3, theme: theme_name,
                    okButton: $('#confirm_ok'),
                    cancelButton: $('#confirm_cancel'),
                    initContent: function() {
                        $('#confirm_ok').jqxButton({width: '65px', theme: theme_name});
                        $('#confirm_cancel').jqxButton({width: '65px', theme: theme_name});
                        $('#confirm_ok').focus();
                        $('#confirm_title_message').html('<img src="jqx/images/help.png" alt="" style="margin-bottom:-3px;"/>Confirmation');
                        $('#confirm_content_message').html("Do you want to Block?");
                        $('#confirm_ok').click(function() {
                            $.ajax({
                                type: "GET",
                                data: "productionId=" + productionId,
                                url: "deleteProduction",
                                success: function(response) {
                                    if (response === "S") {
                                        alert_popUp('Success', "Production type blocked successfully");
                                        $("#jqxgrid_productionType").jqxGrid('updatebounddata', 'cells');
                                        $("#jqxgrid_productionType").jqxGrid('clearselection');
                                    } else {
                                        alert_popUp('Warning', "Block failed");
                                        $("#jqxgrid_productionType").jqxGrid('clearselection');
                                    }
                                }
                            });
                        });
                        $('#confirm_cancel').click(function() {
                            $("#jqxgrid_productionType").jqxGrid('clearselection');
                        });
                    }
                });
}

<div id="confirm_container" style="display: none">
            <div id="confirm_title">
                <div id="confirm_title_message"></div> 
            </div>
            <div id="confirm_content">
                <div id="confirm_content_message"></div>
                <div style="float: right; margin-top: 15px;">
                    <input type="button" id="confirm_ok" value="OK" style="margin-right: 10px" />
                    <input type="button" id="confirm_cancel" value="Cancel" />
                </div>
            </div>
        </div>

[DimitarParticipant]

Hello selva,

The window initialization code should be called only once and not each time deleteProductionType() is invoked. In your case, when you call deleteProductionType() for the first time the window is initialized and initContent is called. But when you call deleteProductionType() a second time, the window has already been initialized and initContent is not called. My suggestion is that productionId be a global variable which you can change in deleteProductionType() and which will be accessible with its current value from the confirm_ok button click event handler.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts