$("#username").autocomplete({
target: $('#usersss'),
source: function() {
var db = decoara.webdb.db;
db.transaction(function(tx) {
tx.executeSql("SELECT codigo as value, fantasia as label, tabela FROM clientes WHERE fantasia LIKE '%"+$("#username").val()+"%' LIMIT 4",null,
function (tx, results) {
jsonClientes = '[';
console.log('Rows:'+results.rows.length);
for (i=0; i<results.rows.length; i++) {
row = results.rows.item(i);
jsonClientes += '{"value":'+row['value']+',"label":"'+row['label']+'"}';
if (i!=results.rows.length-1)
jsonClientes += ',';
}
jsonClientes += ']';
console.log(jsonClientes);
return $.parseJSON(jsonClientes);
},function (tx, e) {
console.log('error: ' + e.message);
}
);
});
},
link: 'xxx.html?ops=',
minLength: 1
});
The source's function return this json code:
[{"value":27,"label":"NARDIM"},{"value":38,"label":"MORO"},{"value":39,"label":"MH"},{"value":40,"label":"IRMAO SAPIENZA"}]
But the list-view just don't appear. When I change the source to a var using the same jSON data, it works fine:
var autocompleteData = $.parseJSON('[{"value":27,"label":"NARDIM"},{"value":38,"label":"MORO"},{"value":39,"label":"MH"},{"value":40,"label":"IRMAO SAPIENZA"}]');
source: autocompleteData,
Why is that?
Try declaring the jsonClientes as an array and then use .push to store values inside it.
i.e
var jsonClientes = [];
console.log('Rows:'+results.rows.length);
for (i=0; i<results.rows.length; i++) {
row = results.rows.item(i);
jsonClientes.push ('{"value:"'+row.value+'",label:"'+row.label+'"},');
}
The database stuff happens asyncronous. When the .autocomplete() gets called, the function on the "source" gets called and in there a database query is executed. But this database query tx.executeSql() will finish at any time in the future (async) and the "source" of the autocomplete will not have the result.
Unfortunately I have not found out how to solve this for those kind of jquery addons, so I went ahead to build an autocomplete around my specific database query. Basically, I start with the database query and provide a callback for the tx.executeSql() that will fill my autocomplete dropdown.
Related
I'm using Select2 now since 2 years and I really enjoy all dev made. however, version 3.5.x has his limit, so I'm moving to version 4.0, which give me headaches!
For your record, I'm using Select2 with large table (> 10.000 entries), so AJAX & infinite data (page set to 50 items).
With version 3.5.2, I can reproduce the underline match when searching for data (using formatSelection and query.term). Any idea how to make it with version 4.0.0 (function templateResult only passes result and not query anymore?
With version 3.x, you can add free entries using search value was not in the list (using createSearchChoice). Version 4.0 does not have this option, any idea how to make it again?
I try to replace the Select bar with an input bar (still using the select dropdown). It seems possible to force the adapter but I was unable to find how.
I need to add either a line (at row 1) or a button (floating to the right) to add new item (similar to createTag, but for an item). has someone made it already?
I'd highly recommend reading the release notes and the 4.0 release announcement when migrating from Select2 3.5.2 to Select2 4.0.0.
With version 3.5.2, I can reproduce the underline match when searching for data (using formatSelection and query.term).. any idea how to make it with v4.0.0 (function templateResult only pass 'result' and not 'query' anymore ?
This was removed in 4.0 because the results have been separated from the queries, so it didn't make sense to keep passing along the information. Of course, this doesn't mean you can't get the query and store it. All you would need to do is store the query, something like the following might work
var query = {};
var $element = $('#my-happy-select');
function markMatch (text, term) {
// Find where the match is
var match = text.toUpperCase().indexOf(term.toUpperCase());
var $result = $('<span></span>');
// If there is no match, move on
if (match < 0) {
return $result.text(text);
}
// Put in whatever text is before the match
$result.text(text.substring(0, match));
// Mark the match
var $match = $('<span class="select2-rendered__match"></span>');
$match.text(text.substring(match, match + term.length));
// Append the matching text
$result.append($match);
// Put in whatever is after the match
$result.append(text.substring(match + term.length));
return $result;
}
$element.select2({
templateResult: function (item) {
// No need to template the searching text
if (item.loading) {
return item.text;
}
var term = query.term || '';
var $result = markMatch(item.text, term);
return $result;
},
language: {
searching: function (params) {
// Intercept the query as it is happening
query = params;
// Change this to be appropriate for your application
return 'Searching…';
}
}
});
With version 3.x, you can add free entries using search value was not in the list (using createSearchChoice). V4.0 has not this option, any idea how to make it again ?
This can still be done in 4.0 using the tags option (set it to true). If you want to customize the tag, you can use createTag (similar to createSearchChoice).
var $element = $('#my-happy-select');
$element.select2({
createTag: function (query) {
return {
id: query.term,
text: query.term,
tag: true
}
},
tags: true
});
Simple way to underline matched results with select2 4.x
$element.select2({
escapeMarkup: function (markup) { return markup; }
,
templateResult: function (result) {
return result.htmlmatch ? result.htmlmatch : result.text;
}
,
matcher:function(params, data) {
if ($.trim(params.term) === '') {
return data;
}
if (typeof data.text === 'undefined') {
return null;
}
var idx = data.text.toLowerCase().indexOf(params.term.toLowerCase());
if (idx > -1) {
var modifiedData = $.extend({
'htmlmatch': data.text.replace(new RegExp( "(" + params.term + ")","gi") ,"<u>$1</u>")
}, data, true);
return modifiedData;
}
return null;
}
})
I have the following HTML code:
<table class="viewTable">
<tr>
<td>Price</td>
</tr>
</table>
and I want to insert data dynamically using Javascript as follows:
var totalPrice = 0;
map.each(function(key , value , i) {
params = {};
params.id = key;
// get datas from Controller class via ajax
ajax(url, params, false, function(result) {
totalPrice += setData(result , key , value);
});
});
// alert("something!"); // this may satisfy my problem.. I have no idea..
// Total Price shown on last row
$('table.viewTable tr:last').after("<tr class='title_bar'><td colspan='5' style='text-align: right;padding-right: 35px;'>"+num2Currency(totalPrice)+"</td></tr>");
The setData function is:
function setData(result , partsId , count) {
var price = result.price;
html = [];
html.push("<tr>");
html.push("<td><div>"+price+"</div></td>");
html.push("</tr>");
$('table.viewTable').append(html.join(''));
return price;}
I used the map function from Jade's answer to this question: Map in JavaScript.
My problem is either the displaying of the results or the procedure itself isn't correct. It should be inserting price rows first and then the totalPrice row afterwards; instead, the order is reversed, with totalPrice appearing first followed by the price rows. When I inserted an alert statement before insertion of totalPrice, it worked fine. Any suggestions? What's wrong with my code? Is jQuery compiled asynchronously?
Jep. Ajax calls are asynchronous, which means they don't execute immediately. You will need to keep track of the amount of completed ajax calls, and when all of them are done you can append the total.
Something like this:
var totalPrice = 0;
var completedAjaxCalls = 0;
map.each(function(key , value , i) {
params = {};
params.id = key;
// get datas from Controller class via ajax
ajax(url, params, false, function(result) {
totalPrice += setData(result , key , value);
completedAjaxCalls += 1;
if(completedAjaxCalls == map.length) {
$('table.viewTable tr:last').after("<tr class='title_bar'><td colspan='5' style='text-align: right;padding-right: 35px;'>"+num2Currency(totalPrice)+"</td></tr>");
}
});
});
Edit: there are probably better ways of achieving this, but since you still need to grasp the concept of asynchronous methods, I thought a simple approach was appropriate here.
You need to try
var totalPrice = 0;
var requests = [];
map.each(function(key, value, i) {
params = {};
params.id = key;
// get datas from Controller class via ajax
// make sure that `ajax()` return the promise returned by $.ajax()
requests.push(ajax(url, params, false, function(result) {
totalPrice += setData(result, key, value);
}));
});
$.when.apply($, requests).done(function() {
// alert("something!"); // this may satisfy my problem.. I have no idea..
// Total Price show at last row
$('table.viewTable tr:last')
.after("<tr class='title_bar'><td colspan='5' style='text-align: right;padding-right: 35px;'>"
+ num2Currency(totalPrice) + "</td></tr>");
})
i'm using an MVC c# asp.net 4.0 project with Jstree, but i have a small problem i have a jstree that's populated witha a JSON array.
My problem is I need to catch the value of the checkboxes in jstree when checked to a div in my view.
OK, i finally got this working this is the solution i hope it Help's someone :)
first you must bind:
.bind('check_node.jstree', function (e, data) {
$("#listSelectedActives").html(BuildList());
})
.bind('uncheck_node.jstree', function (e, data) {
$("#listSelectedActives").html(BuildList());
then the use this function:
function BuildList() {
var checked = $("#demoTree").jstree("get_checked", null, true);
var output = "";
$(checked).each(function (i, node) {
var id = $(node).attr("ID");
var text = $(node).attr("NodeText");
output += "<p>ID: " + id + " TEXT: " + text + "</p>";
})
return output;
}
If this is too confusing please let'me know :)
I loop through an ajax recordset and insert rows into an html5 database.
In Google Chrome, the program inserts 581 rows, whereas on the iPad, it only inserts between 20 and 80 rows.
I output the commands to the document body just to make sure they are being run, so I know there are 581 insert statements being run on the iPad, but then the table only has a handful.
OK, here's how I do it.
I first drop the table, then when that's done, I create the table.
Then when that's done, I do my ajax call.
When that comes back, I loop through the recordset and insert into the html5 local database.
var DropTableiUsr = function() {
var DropTableDeferred = new $.Deferred();
var CreateTableDeferred = new $.Deferred();
dbo.transaction(function(myTrans) {
myTrans.executeSql(
'drop table iUsr;'
,[]
,DropTableDeferred.resolve()
);
});
DropTableDeferred.done(function() {
dbo.transaction(function(myTrans) {
myTrans.executeSql(
'CREATE TABLE IF NOT EXISTS iUsr'
+ '(UsrID Integer NOT NULL PRIMARY KEY'
+ ',UsrGradeDate Varchar(128)'
+ ');'
,[]
,CreateTableDeferred.resolve()
);
});
});
CreateTableDeferred.done(function() {
var settings = {};
settings.data = {};
settings.data.method = 'View0';
var myPromise = $(this).myAjax('com/Usr.cfc', settings); // 'this' normally points to the DOM element that is the context of what caused the Ajax call.
myPromise.done(function(result) {
if (result.RTN) {
var qryUsr = result.qry.DATA;
qryUsr.RecordCount = result.qry.ROWCOUNT;
// qryUsr.ColumnList = result.qry.COLUMNS;
for (var CurrentRow=0;CurrentRow < qryUsr.RecordCount;CurrentRow++) {
myFunction(CurrentRow);
};
function myFunction(CurrentRow) {
$('body').append('INSERT INTO iUsr(UsrID,UsrGradeDate) VALUES(' + qryUsr.USRID[CurrentRow] + ',' + qryUsr.USRGRADEDATE[CurrentRow] + ')<br>');
dbo.transaction(function(myTrans) {
myTrans.executeSql(
'INSERT INTO iUsr(UsrID,UsrGradeDate) VALUES(?,?)',
[
qryUsr.USRID[CurrentRow],
qryUsr.USRGRADEDATE[CurrentRow]
]
)
});
};
} else {
$('#msg').text(result.MSG);
}
});
myPromise.fail(function(jqXHR, textStatus,C ) {
alert('PopulateiUsr: ' + C);
$('.container').append(jqXHR.responseText);
})
$('body').append('iUsr<br>');
});
};
$('#Reset').click(function() {
DropTableiUsr();
});
If you move the screen around while something is processing, it stops the processing.
Try displaying a countdown on the INSERT INTO callback, and you will see that it stops the countdown if you scroll the screen down.
I am using JQuery UI Autocomplete in my JSP. Whenever user keys character, i made the request to server and get the data as JSON and load with the pulgin.
It's working fine. But Whenever i typed the same character as previous term. It's not populating any values.
For eg., First i typed p, it lists the p starting elements. I have the button to reset the text content of autocompleter. After reset, if i am typing same character p, it doesn't show anything.
my code as follows,
var cache = {};
$("#Name").autocomplete({
source: function(req, add){
if (req.term in cache) {
add(cache[req.term]);
return;
}
$.getJSON("/store/StockManagement?action=getMedicinesStock",req, function(data) {
var medicines = [];
$.each(data, function(i, val){
medicines.push(val.name + "," + val.code);
});
cache[req.term] = medicines;
add(medicines);
});
},select: function(e, ui) {
var medicine = ui.item.value;
$('#Code').val(medicine.split(",")[1]);
setTimeout(function(){
var med = $('#Name').val();
$('#Name').val(med.split(",")[0]);
},500);
}
});
// Taken from jquery-ui-1.8.4.custom.min.js
if (a.term != a.element.val()) { // *** THE MATCH IS HERE
//console.log("a.term != a.element.val(): "+a.term+", "+a.element.val());
a.selectedItem = null;
a.search(null, c) // *** SEARCH IS TRIGGERED HERE
}
I just commented the condition. now it's works fine.