EasyUI Forum
March 28, 2024, 05:23:21 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: JqueryUI and Easyui Conflict  (Read 7898 times)
Alfred
Full Member
***
Posts: 134


-Licensed User-


View Profile
« on: March 15, 2017, 10:23:09 AM »

I am using the following JqueryUI autcomplete code for my personal project, but it conflicts with easyui.

Code:
$(document).on('focus','.autocomplete_txt', function(){
    type = $(this).data('type');   
    if(type =='batch' ) autoTypeNo=0;
    if(type =='name' ) autoTypeNo=1;   
    $(this).autocomplete( {
        source: function( request, response ) {
            $.ajax({
                url : 'loaditems.php',
                dataType: "json",
                method: 'post',
                data: {
                   name_startsWith: request.term,
                   type: type
                },
                 success: function( data ) {
                     response( $j.map( data, function( item ) {
                        var code = item.split("|");//data from loaditem.php are separated with pipe
                        return {
                            label: code[autoTypeNo],
                            value: code[autoTypeNo],
                            data : item
                        }
                    }));
                }
            });
        },
        autoFocus: true,           
        minLength: 0,
        select: function( event, ui ) {
            var names = ui.item.data.split("|");                       
            id_arr = $(this).attr('id');
            id = id_arr.split("_");         
            $('#itemNo_'+id[1]).val(names[0]);
            $('#itempName_'+id[1]).val(names[1]);         
            $('#quantity_'+id[1]).val();
            $('#price_'+id[1]).val(names[2]);
            $('#total_'+id[1]).val( 1*names[2] );
            $('#itemtid_'+id[1]).val(names[3]);
            $('#catid_'+id[1]).val(names[4]);
            $('#itemUnit_'+id[1]).val(names[5]);
            $('#drid_'+id[1]).val(names[6]);
            calculateTotal();
        },
        open: function(event, ui) {
             $(".ui-autocomplete").css("z-index", 90009);
         }             
    });
});

So I used this workaround:
Code:
var $j = $.noConflict(true);
and added j to every $ of the JqueryUI version. The best Easyui Version I come across the forum and the site is combobox . But after several attempts, I could not come to solution because my combox is in a loop. Here is the jquery loop where I am trying to put the combobox.

Code:
$(document).ready(function() {     
    var i=$('#dlg table tr').length;
    $(".addmore").on('click', function(){
        console.log('test');
        html = '<tr>';
        html += '<td><input class="case" type="checkbox"/></td>';
        html += '<td><input type="text" style="width:100%;" data-type="batch" name="itemNo[]" id="itemNo_'+i+'" class="form-control autocomplete_txt" autocomplete="off" placeholder="Scan Barcode"></td>';
        html += '<td><input type="text" data-type="name" name="itempName[]" id="itempName_'+i+'" class="form-control autocomplete_txt" autocomplete="off" style="width:100%;" placeholder="Item Name"></td>';
        html += '<td><input class="form-controller man" name="itemUnit[]" id="itemUnit_'+i+'" data-type="itemUnit" style="width:100%;" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
        html += '<td><input type="hidden" data-type="drid" name="drid[]" id="drid_'+i+'" class="autocomplete_txt did" autocomplete="off"><input type="hidden" data-type="id" name="itemtid[]" id="itemtid_'+i+'" class="autocomplete_txt pid" autocomplete="off"><input type="number" value="1" style="width:100%;" min="1" name="quantity[]" id="quantity_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
        html += '<td><input type="number" min="1" style="width:100%;" name="price[]" id="price_'+i+'" class="form-control changesNo" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"><input type="hidden" name="catid[]" id="catid_'+i+'" class="autocomplete_txt" autocomplete="off"></td>';
        html += '<td><input type="number" min="1" style="width:100%" name="total[]" id="total_'+i+'" class="form-control totalLinePrice" autocomplete="off" onkeypress="return IsNumeric(event);" ondrop="return false;" onpaste="return false;"></td>';
        html += '</tr>';
        $('#dlg table').append(html);
        i++;
    });
});

When I used combobox, it did not come in the newly added row when user click add-more button. It works only with the first row.

I would love to see if the same JqueryUI code can be achieved with Easyui alone.
Thanks
Logged
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #1 on: March 16, 2017, 02:10:21 AM »

Please look at this example http://code.reloado.com/agiwul3/edit#javascript,html. It shows how to use the jQuery UI and EasyUI together.
Logged
Alfred
Full Member
***
Posts: 134


-Licensed User-


View Profile
« Reply #2 on: March 16, 2017, 09:44:46 AM »

Thanks for the tip. In fact, my question is asking for the easyui version for my jqueryUI code. My jqueryui code works fine. But I need the solution using easyui alone. I want to completely remove the jqueryui code and use only the easyui. Hope you can help me.

Thanks
Logged
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #3 on: March 16, 2017, 05:27:43 PM »

If you would like to use the combobox to achieve your autocomplete functionality, please refer to this code:
Code:
$('#cc').combobox({
url: 'loaditems.php',
queryParams: {
name_startsWidth: '',
type: 'type'
},
loadFilter: function(data){
return $.map(data, function(item){
var code = item.split("|");
return {
value: code[autoTypeNo],
text: code[autoTypeNo]
}
})
}
})
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!