jQWidgets Forums

Hello Hristo, I really appreciate your reply.

Here you can see all the images;
1. https://pasteboard.co/GL2L94I.png
2. https://pasteboard.co/GKmR9mb.png
2. https://pasteboard.co/GKmQVu4.png

Why it is automatically changing the selected row when I click on the form,
Here is the code;

var source_bc_list;
var dataAdapter_bc_list; 
var theme = "";
$(document).ready(function () {

           var url = "receipt_list.php";
            source_bc_list =
            {
                
                datafields:
                [
                    { name: 'ID', type: 'number' },
                    { name: 'receipt_no', type: 'string' },
                    { name: 'receipt_date', type: 'date', format: "yyyy-MM-dd" },
                    { name: 'des', type: 'string' },
                    { name: 'arrival_notice', type: 'string' },
                    { name: 'invoice', type: 'string' },
                    { name: 'detention', type: 'string' },
                    { name: 'client_code', type: 'string' },
                    { name: 'Company', type: 'string' },
                    { name: 'current_bal', type: 'string' },
                    { name: 'paying_amount', type: 'string' },
                    { name: 'pay_type', type: 'string' },
                    { name: 'cheque_no', type: 'string' },
                    { name: 'cheque_date', type: 'date', format: "yyyy-MM-dd" },
                    { name: 'agent_code', type: 'string' },
                    { name: 'created_by', type: 'string' }

                ],
                 datatype: 'json',
                 url: url,
                 type:'POST',
                 async: false,
                 updaterow: function (rowid, rowdata) {
                    // synchronize with the server - send update command   
                }
            };
            dataAdapter_bc_list = new $.jqx.dataAdapter(source_bc_list);
            // initialize jqxGrid
            $("#receipt_search_button").jqxDropDownButton({ width: 245, height: 25, theme: theme });

            $("#receipt_search_grid").jqxGrid(
            {
                width: 580,
                source: dataAdapter_bc_list,
                theme: theme,
                pageable: false,
                groupable: true,
                showfilterrow: true,
                filterable: true,
                sortable: true,
                columnsresize: true,
                columns: [
                  { text: 'ID', datafield: 'ID', width: 50 },
                  { text: 'Receipt No', columntype: 'textbox', datafield: 'receipt_no', width: 150 },
                  { text: 'Receipt Date', datafield: 'receipt_date', columntype: 'textbox', cellsformat:'yyyy-MM-dd', width: 100 },
                  { text: 'Client Code', datafield: 'client_code', width: 90, cellsalign: 'left' },
                  { text: 'Paid Amount', datafield: 'paying_amount', width: 90, cellsalign: 'left' },
                  { text: 'Pay Mode', datafield: 'pay_type', width: 90, cellsalign: 'left' },
                  { text: 'Arrival Notice', datafield: 'arrival_notice', width: 150, cellsalign: 'left' },
                  { text: 'Invoice', datafield: 'invoice', width: 150, cellsalign: 'left' },
                  { text: 'Detention', datafield: 'detention', width: 150, cellsalign: 'left' }

                ]
            });

$("#receipt_search_grid").on('rowselect', function (event) {

var args = event.args;
var row = $("#receipt_search_grid").jqxGrid('getrowdata', args.rowindex);
var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['receipt_no'] + '  ' + moment(row['receipt_date']).format("YYYY-MM-DD") + '  ' + row['client_code'] + '</div>';
$("#receipt_search_button").jqxDropDownButton('close');
$("#receipt_search_button").jqxDropDownButton('setContent', dropDownContent);

    var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['Company']  + '  ' + row['client_code'] + '</div>';
    $("#client_button").jqxDropDownButton('setContent', dropDownContent);
    $('#client_button').jqxGrid('clearselection');
    $("#client_code").val(row['client_code']);
    Arrival_List(row['client_code']);
    DetentionList(row['client_code']);
    InvoiceList(row['client_code']);
    $.post("client_avl_bal.php", {client_code:row['client_code']}, function(data){
        $("#cur_bal").val(data);
    });
    var arrival_list = row['arrival_notice'];
    $("#arrival_list_data").text(arrival_list);
    if (arrival_list != ''){    
    arrival_list = arrival_list.split(',');
    $.each(arrival_list, function(val, lbl){
        $("#arrival_list").jqxComboBox('checkItem',lbl);
    });
    }

}); //end of row select

});//doc.ready

Please help me to solve this issue

Hi Hristo,
Thank you for your reply. I have corrected below;

   $("#client_button").jqxDropDownButton('setContent', dropDownContent);
    $('#client_grid').jqxGrid('clearselection');

There is no error message(not even in console). But I figured it out the issue.
When I call one of these methods `
Arrival_List(row[‘client_code’]);
DetentionList(row[‘client_code’]);
InvoiceList(row[‘client_code’]);` it is happening this issue.

Here is the Arrival_List(row[‘client_code’]);

function Arrival_List(ClientCode){
var source_ports;
var dataAdapter_ports; 

           var data = "arrival_list.php";
           var theme = "";         
            source_ports =
                {
                    datatype: "json",
                    datafields: [
                        { name: 'ID' },
                        { name: 'arrival_no' },
                        { name: 'client_name' }

                    ],
                 url: data,
                 type: 'POST',
                 async:false,
                 data:{client_code:ClientCode},
                };
                dataAdapter_ports = new $.jqx.dataAdapter(source_ports);
                // Create a jqxComboBox
                $("#arrival_list").jqxComboBox({ checkboxes: true, source: dataAdapter_ports, displayMember: "arrival_no", valueMember: "arrival_no", width: 250, height: 25});
              //  $("#arrival_list").jqxComboBox('checkIndex', 0);
                
                $("#arrival_list").on('checkChange', function (event) {
                  var invoice_list = $("#invoice_list_data").text();
                  var detention_list = $("#detention_list_data").text();
                  var parseData;
                  if(invoice_list != '' || detention_list != ''){
                    $("#arrival_list").jqxComboBox('uncheckAll'); 
                    alertify.error("You are not allowed to use multiple invoice types at same receipt");
                    return false;
                  }
                    var items = $("#arrival_list").jqxComboBox('getCheckedItems');
                    var checkedItems = "";
                    $.each(items, function (index) {
                      checkedItems += this.label + ", ";                          
                    });
                    $("#arrival_list_data").html(checkedItems);
                    checkedItems = checkedItems.replace(/,\s*$/, "");
                    var client_code = $("#client_code").val();
                    $.ajax({url:'client_avl_bal_local.php', type:'POST', async:false, data:{arrival:'1', arrival_list:checkedItems, client_code:client_code}, success: function(data){
                          
                          try{
                            parseData = JSON.parse(data);
                            $("#tot_amount").val(parseData[0]);
                            $("#paying").val(parseData[0]);
                          }catch(err){
                            alertify.error(data);
                            $("#arrival_list").jqxComboBox('uncheckAll');
                          } 
                    }});
                });

               // $("#arrival_list").jqxComboBox('uncheckAll');
                $("#arrival_list").jqxComboBox('clearSelection');

}

I think it happens when we call more than one jqx component to the page.

Hope you will find a solution on that

Hello Hristo,

After a long period of time, I have made a small demonstration. You can download and run it on your server. You have to select the JQX dropdown grid for 3 to 6 times then you will see below content of the page will highlight in blue color. that is the error.

This is only happening with Firefox only. Google chrome it is working fine.
But I use only firefox.
I hope, you will find the issue and correct it.
Demo files
https://drive.google.com/file/d/0B8hxf2sVx0oARmRSYlFDTFJJZzQ/view?usp=sharing

Thank You,
Supun

Hello Hristo,
I really appreciate your concern about my issue.
Latest Updated PHP Project with SQL database

1. Goto phpmyadmin and create new database; then execute myProject>test.sql
2. open db.php and give your host, database name, username password
3. open Index.php and replace below files locations as per your server location

<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<link href="../../css/jquery-ui.min.css" rel="stylesheet" type="text/css">
<link href="../../css/jqx/jqx.base.css" rel="stylesheet" type="text/css">
<script src="../../js/jqx-all.js"></script>
<script src="receipt_list.js"></script>
<script src="invoice_list.js"></script>

4. Done, Open index.php in your browser
Select a row from top grid. Then without pressing anything(not even mouse button), move your mouse cursor around HTML body of the page. You will see Body text is highlighting and selecting.
This is just the beginning, When I have 2-3 ajax requests on row select event, Grid’s selected row may change on mouse click near to the grid.(See the screenshots on first comment)

Hope you will find a solution..

Thank you again!!
Supun

Hi again Hristo,
I am using jQWidgets v5.3.2 (2017-Sep) jqx-all.js
Firefox 56.0 (64 bit)
<script src=”https://code.jquery.com/jquery-2.2.4.min.js” integrity=”sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=” crossorigin=”anonymous”></script>
For your reference, I will give you small screen record in my laptop. In the video you can see the issue very clear.
I don’t use any mouse event
Screen captured video

Thank You,
Supun

Hi Hristo,
I really appreciate your time concerning my issue.
Did you experience the same issue working with AJAX request(s)?

I have given you the full project. You can see all the files including php.
I guess there is a problem with AJAX request(s). JqxWidgets has sum issues when retrieving data from PHP. Please look into that. Full project in your hand. So you can look into that issue.
As I figure out the issue, When we set async:false, the issue raises. When we make async:true, it is working fine.

datatype: "json",
 id: 'ID',
 type:'POST',
 async:false 

But I need it to be async:false. because program should not run the second ajax request until the first one finish.
Thank you,
Supun

Hi Hristo,
Thank you very much for your handout with my issue. Hope you had a great weekend!
I am not able to try it with your jsfiddle since it doesn’t link to any of ajax requests. As I explained you earlier, JQXWidgets have sume bugs while doing ajax requests.
You can see the exact project with linking dependencies to publip CDN(public CDN support)
This is the link to my online project which I have sent you the complete code

Please check for me and find a solution.
Thank You,
Supun