Title: JqueryUI and Easyui Conflict
Post by: Alfred 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. $(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: 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. $(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
Title: Re: JqueryUI and Easyui Conflict
Post by: jarry 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.
Title: Re: JqueryUI and Easyui Conflict
Post by: Alfred 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
Title: Re: JqueryUI and Easyui Conflict
Post by: jarry 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: $('#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] } }) } })
|