jQuery UI Widgets Forums Dialogs and Notifications Window How to refresh the jqxWindow items on close and cancel button.

This topic contains 6 replies, has 2 voices, and was last updated by  Apeksha Singh 11 years ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • Apeksha Singh
    Participant

    Hi,

    I am using window in my project and the window is displaying a grid with some data from the previous page.

    When I close it and without refreshing the page I open the window again on click of a button the grids get disturbed its not displaying properly.

    I am using jquery-1.8.2.min.js and jQWidgets v2.6.1 Release.

    Please guide me regarding this as soon as possible.

    Thanks & Regards,

    Apeksha


    Dimitar
    Participant

    Hello Apeksha,

    We cannot verify an issue with a previous version of jQWidgets. Please, update to version 2.8.3 and try again. If the issue persists, please post a sample code which demonstrates the reported behaviour.

    Best Regards,
    Dimitar

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


    Apeksha Singh
    Participant

    Hi Dimitar,

    I can’t update my project to latest version because I have done a lot of changes in .css files.
    Can you just give me any function that can refresh the jqxWindow items on the Close and Cancel buttons of window.

    For example I have a grid in jqxWindow I update some rows in that but didn’t save it and close the window.
    Now if I again open it from the same source without refreshing the page it show me the unsaved updated row.

    Here is my Code that open a window on button click :-

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>Some code</title>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = $.data(document.body, 'theme', theme);
    if (theme == undefined) theme = '';
    addEventListeners_new_tax();
    createElements_new_tax(theme);
    });
    function addEventListeners_new_tax() {
    //Closed event
    $('#new_tax').bind('close', function (event) {
    displayEvent(event);
    });
    //Dragstarted event
    $('#new_tax').bind('moved', function (event) {
    displayEvent(event);
    });
    //show
    $('#new_tax_button').click(function () {
    $('#new_component_div').html(new_component);
    $('#new_tax').jqxWindow('show');
    });
    }
    function createElements_new_tax(theme) {
    $('#new_tax').jqxWindow({ autoOpen: false, height: '300px', width: '47%',
    theme: 'ui-start', resizable: false, isModal: true,position: { x: 300, y: 100 }, modalOpacity: 0.3,
    cancelButton: $('#new_tax_cancel'),
    okButton: $('#new_tax_save'),
    initContent: function () {
    $('#new_tax_save').jqxButton({ theme: 'ui-le-frog', width: '70px',height:'28px' });
    $('#new_tax_cancel').jqxButton({ theme: 'ui-smoothness', width: '70px',height:'28px' });
    }
    });
    }
    // END:- jqxWindow widgets for new tax rate popup form.
    // Create a jqxInput
    $("#name").jqxInput({width:'150px',height:'18px',theme: 'ui-start'});
    $("#component_1").jqxInput({ width:'160px',height:'18px',theme: 'ui-start'});
    $("#rate_1").jqxInput({ width:'56%',height:'18px',theme: 'ui-start'});
    $("#component_2").jqxInput({ width:'160px',height:'18px',theme: 'ui-start'});
    $("#rate_2").jqxInput({ width:'56%',height:'18px',theme: 'ui-start'});
    $("#component_3").jqxInput({ width:'160px',height:'18px',theme: 'ui-start'});
    $("#rate_3").jqxInput({ width:'56%',height:'18px',theme: 'ui-start'});
    $("#component_4").jqxInput({ width:'160px',height:'18px',theme: 'ui-start'});
    $("#rate_4").jqxInput({ width:'56%',height:'18px',theme: 'ui-start'});
    $("#component_5").jqxInput({ width:'160px',height:'18px',theme: 'ui-start'});
    $("#rate_5").jqxInput({ width:'56%',height:'18px',theme: 'ui-start'});
    $("#component_6").jqxInput({ width:'160px',height:'18px',theme: 'ui-start'});
    $("#rate_6").jqxInput({ width:'56%',height:'18px',theme: 'ui-start'});
    // Create a jqxButton widget for ADD COMPONENT INPUT FIELDS.
    $("#add_component").jqxButton({ width: '140', theme: 'ui-redmond' });
    // Subscribe to Click events.
    var i=0;
    $("#add_component").bind('click', function (){
    i++;
    switch (i) {
    case 1:
    $('#new_tax').jqxWindow({ autoOpen: false, height: '430px'});
    $("#display_check_box").css("display","inline-block");
    $("#delete_component").css("display","inline-block");
    $(".display_base_total").css("display","inline-block");
    $(".total_tax").css("margin-left", "57%");
    $("#display_repeat_field1").css(" width", "99%");
    $("#display_repeat_field1").css("display","inline-block");
    break;
    case 2:
    $("#display_repeat_field2").css(" width", "99%");
    $("#display_repeat_field2").css("display","inline-block");
    break;
    case 3:
    $("#display_repeat_field3").css(" width", "99%");
    $("#display_repeat_field3").css("display","inline-block");
    break;
    case 4:
    $("#display_repeat_field4").css(" width", "99%");
    $("#display_repeat_field4").css("display","inline-block");
    break;
    case 5:
    $("#display_repeat_field5").css(" width", "99%");
    $("#display_repeat_field5").css("display","inline-block");
    break;
    default:
    $('#add_component').jqxButton({disabled: true });
    }
    });
    //To unselect the selected radio button
    $("input[type='radio']").click(function()
    {
    var previousValue = $(this).attr('previousValue');
    var name = $(this).attr('name');
    if (previousValue == 'checked')
    {
    $(this).removeAttr('checked');
    $(this).attr('previousValue', false);
    }
    else
    {
    $("input[name="+name+"]:radio").attr('previousValue', false);
    $(this).attr('previousValue', 'checked');
    }
    });
    // Create a add and deleteButton
    $("#new_tax_button").jqxButton({width: '110px',height: '29px',theme:'ui-redmond'});
    var tax = [
    "Sales Tax",
    "Service Tax",
    "Other Tax"
    ];
    $("#tax_type_id").jqxComboBox({ source: tax, selectedIndex: 1, width: '120', height: '20', theme: 'ui-start' });
    </script>
    </head>
    <body>
    <div class="form_heading"><label>Tax Rates</label></div> <!--Code for main heading -->
    <!-- START: code for main content -->
    <div class="settings_main_content">
    <div class="settings_main_buttons">
    <div style="width:120px;">
    <input type="button" value="New Tax Rate" id='new_tax_button' />
    </div>
    </div>
    </div>
    <!-- END: code for main content -->
    <!--START :add new tax rate popup form -->
    <div id="new_tax">
    <div>Add New Tax Rate</div>
    <div style="overflow-y: hidden;">
    <form style="overflow-y: hidden;">
    <div style="margin-left: 10px;">
    <label style="font-weight:bold;">Tax Rate Display Name</label>
    <label style="font-weight:bold;float:right;margin-right:2%;">Tax Type</label>
    </div>
    <div style="margin-left: 10px;">
    <label style="color:#8E8B84;">The name as you would like it to appear in Xero (limited to 50 characters)</label>
    </div>
    <div style="margin-left: 10px;margin-top:1%;">
    <input name="name" type="text" id="name"/>
    <div style="float:right;margin-right:2%;" id="tax_type_id"></div>
    </div>
    <div style="margin-left: 10px;margin-top:2%;"><label style="font-weight:bold;">Base Rate</label></div>
    <div id="new_component_div" class="component_div">
    <div id="new_component" class="component_div_section">
    <div style="float:left;margin-left:10px;margin-top:3px;">
    <input name="component_1" type="text" id="component_1"/>
    </div>
    <div id="display_check_box" class="radio_button" style="display:none;">
    <label><input type='radio' name='compound' value='Compound1'/>Compound</label>
    </div>
    <div class="tax_components_rate">
    <input name="rate_1" type="text" id="rate_1"/><label style="color:#8E8B84;">%</label>
    </div>
    <div id="delete_component" style="cursor:pointer;display:none;">
    <img src='images/close.png' alt='Delete this tax component' style='margin-top:1%;'>
    </div>
    </div>
    </div>
    <div id="display_repeat_field1" class="component_div" style="display:none;">
    <div class="component_div_section">
    <div style="float:left;margin-left:10px;margin-top:3px;">
    <input name="component_2" type="text" id="component_2"/>
    </div>
    <div class="radio_button">
    <label><input type='radio' name='compound' value='Compound2'/>Compound</label>
    </div>
    <div class="tax_components_rate">
    <input name="rate_2" type="text" id="rate_2"/><label style="color:#8E8B84;">%</label>
    </div>
    <div style="cursor:pointer;">
    <img src='images/close.png' alt='Delete this tax component' style='margin-top:1%;'>
    </div>
    </div>
    </div>
    <div id="display_repeat_field2" class="component_div" style="display:none;">
    <div class="component_div_section">
    <div style="float:left;margin-left:10px;margin-top:3px;">
    <input name="component_3" type="text" id="component_3"/>
    </div>
    <div class="radio_button">
    <label><input type='radio' name='compound' value='Compound3'/>Compound</label>
    </div>
    <div class="tax_components_rate">
    <input name="rate_3" type="text" id="rate_3"/><label style="color:#8E8B84;">%</label>
    </div>
    <div style="cursor:pointer;">
    <img src='images/close.png' alt='Delete this tax component' style='margin-top:1%;'>
    </div>
    </div>
    </div>
    <div id="display_repeat_field3" class="component_div" style="display:none;">
    <div class="component_div_section">
    <div style="float:left;margin-left:10px;margin-top:3px;">
    <input name="component_4" type="text" id="component_4"/>
    </div>
    <div class="radio_button">
    <label><input type='radio' name='compound' value='Compound4'/>Compound</label>
    </div>
    <div class="tax_components_rate">
    <input name="rate_4" type="text" id="rate_4"/><label style="color:#8E8B84;">%</label>
    </div>
    <div style="cursor:pointer;">
    <img src='images/close.png' alt='Delete this tax component' style='margin-top:1%;'>
    </div>
    </div>
    </div>
    <div id="display_repeat_field4" class="component_div" style="display:none;">
    <div class="component_div_section">
    <div style="float:left;margin-left:10px;margin-top:3px;">
    <input name="component_5" type="text" id="component_5"/>
    </div>
    <div class="radio_button">
    <label><input type='radio' name='compound' value='Compound5'/>Compound</label>
    </div>
    <div class="tax_components_rate">
    <input name="rate_5" type="text" id="rate_5"/><label style="color:#8E8B84;">%</label>
    </div>
    <div style="cursor:pointer;">
    <img src='images/close.png' alt='Delete this tax component' style='margin-top:1%;'>
    </div>
    </div>
    </div>
    <div id="display_repeat_field5" class="component_div" style="display:none;border-bottom:1px solid #CCCCCC;">
    <div class="component_div_section">
    <div style="float:left;margin-left:10px;margin-top:3px;">
    <input name="component_6" type="text" id="component_6"/>
    </div>
    <div class="radio_button">
    <label><input type='radio' name='compound' value='Compound6'/>Compound</label>
    </div>
    <div class="tax_components_rate">
    <input name="rate_6" type="text" id="rate_6"/><label style="color:#8E8B84;">%</label>
    </div>
    <div style="cursor:pointer;">
    <img src='images/close.png' alt='Delete this tax component' style='margin-top:1%;'>
    </div>
    </div>
    </div>
    <div style="width:99%;height:60px;">
    <div class='add_component'>
    <input type="button" value="Add a Component" id='add_component' />
    </div>
    <div class="base_rate display_base_total" style="display:none;">
    <label>Effective tax rate :</label>
    <label>0.00%</label>
    </div>
    <div class="base_rate total_tax">
    <label>Total tax rate : </label>
    <label>0.00%</label>
    </div>
    </div>
    <div style="float: left; margin-top:20px;margin-left: 10px;">
    <input type="button" id="new_tax_save" value="Save" style="margin-right: 10px" />
    <input type="button" id="new_tax_cancel" value="Cancel" />
    </div>
    </form>
    </div>
    </div>
    <!--END :ADD new tax rate popup form -->
    </body>
    </html>

    Please reply as soon as possible.

    Thanks & Regards,
    Apeksha


    Dimitar
    Participant

    Hi Apeksha,

    We strongly recommend always using the latest version of jQWidgets. As for CSS modification, we suggest creating a custom theme, which overwrites the classes from base.css as opposed to modifying base.css. You may learn how to achieve that in each widget’s Styling and Appearance documentation entry.

    Here is an example with window and editable grid, which uses version 2.8.3:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title>jQuery Window CSS Styling Sample</title>
    <link rel="stylesheet" href="../../2.8.3/jqwidgets/styles/jqx.base.css" type="text/css" />
    <link rel="stylesheet" href="../../2.8.3/jqwidgets/styles/jqx.summer.css" type="text/css" />
    <script type="text/javascript" src="../../2.8.3/scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../2.8.3/jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    $("#jqxwindow ").jqxWindow({ autoOpen: false, height: 90, width: 150, theme: 'summer' });
    // prepare the data
    var data = new Array();
    var firstNames =
    [
    "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene"
    ];
    var lastNames =
    [
    "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier"
    ];
    var productNames =
    [
    "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist"
    ];
    var priceValues =
    [
    "2.25", "1.5", "3.0", "3.3", "4.5", "3.6", "3.8", "2.5", "5.0", "1.75", "3.25", "4.0"
    ];
    for (var i = 0; i < 100; i++) {
    var row = {};
    var productindex = Math.floor(Math.random() * productNames.length);
    var price = parseFloat(priceValues[productindex]);
    var quantity = 1 + Math.round(Math.random() * 10);
    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
    row["productname"] = productNames[productindex];
    row["price"] = price;
    row["quantity"] = quantity;
    row["total"] = price * quantity;
    data[i] = row;
    }
    var source =
    {
    localdata: data,
    datatype: "array"
    };
    var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function (data) { },
    loadError: function (xhr, status, error) { }
    });
    $("#jqxgrid").jqxGrid(
    {
    source: dataAdapter,
    editable: true,
    columns: [
    { text: 'First Name', datafield: 'firstname', width: 100 },
    { text: 'Last Name', datafield: 'lastname', width: 100 },
    { text: 'Product', datafield: 'productname', width: 180 },
    { text: 'Quantity', datafield: 'quantity', width: 80, cellsalign: 'right' },
    { text: 'Unit Price', datafield: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
    { text: 'Total', datafield: 'total', width: 100, cellsalign: 'right', cellsformat: 'c2' }
    ]
    });
    $("#open").click(function () {
    $("#jqxwindow").jqxWindow('open');
    });
    });
    </script>
    </head>
    <body>
    <div id='content'>
    <button id="open">
    Open window</button>
    <div id='jqxwindow'>
    <div>
    Header</div>
    <div>
    <div id="jqxgrid">
    </div>
    </div>
    </div>
    </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    Apeksha Singh
    Participant

    Hi Dimitar,

    Thanks for your reply I executed this code but its not fulfilling my requirement i.e., If I changed value of any grid cell lets suppose I have changed the quantity of first element from 7 to 10 and then close the window.
    If I reopened the window it should show me 7 not 10 as I haven’t saved this changes in database.
    Please guide me regarding this as soon as possible

    Thanks & Regards,
    Apeksha


    Dimitar
    Participant

    Hi Apeksha,

    You should set the source updaterow callback function and call commit with parameter true/false if the synchronization with the server was successful/unsuccessful. You can see examples here: Create, Remove, Update and here: CRUD with jqxGrid, ASP.NET MVC3 and SQL.

    Best Regards,
    Dimitar

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


    Apeksha Singh
    Participant

    Hi Dimitar,

    Thanks for you reply.

    Regards,
    Apeksha

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.