I'm using datatables in my administration panel
but I realized that the sort functionality is not working properly. The specific table that we're talking about is with server-side rendering. The specific column "Status" that we're talking about has the following contents
if($record->claimed == 1) {
$claimed = '<span class="badge badge-primary">CLAIMED</span>';
} else {
$claimed = '<span class="badge badge-secondary">NOT CLAIMED</span>';
}
How can I make this sort work properly? I tried this
if($record->claimed == 1) {
$claimed = '<span class="d-none">1</span><span class="badge badge-primary">CLAIMED</span>';
} else {
$claimed = '<span class="d-none">0</span><span class="badge badge-secondary">NOT CLAIMED</span>';
}
but it doesn't work as expected. Maybe some kind of a data-sort attribute or....? Any ideas?
I was faced the same issue when you populate your table cell with HTML tags, it creates issues for searching / sorting. A very simple TRICK to define your dataType as "JSON" will fix this issue. Below is my sample code for Datatable (Server-Side-Processing with pipelined) in my production server and working perfectly.
<script type="text/javascript" language="javascript" class="init">
$.fn.dataTable.pipeline = function ( opts ) {
// Configuration options
var conf = $.extend( {
pages: 5, // number of pages to cache
url: '', // script url
data: null, // function or object with parameters to send to the server
// matching how `ajax.data` works in DataTables
method: 'GET' // Ajax HTTP method
}, opts );
// Private variables for storing the cache
var cacheLower = -1;
var cacheUpper = null;
var cacheLastRequest = null;
var cacheLastJson = null;
return function ( request, drawCallback, settings ) {
var ajax = false;
var requestStart = request.start;
var drawStart = request.start;
var requestLength = request.length;
var requestEnd = requestStart + requestLength;
if ( settings.clearCache ) {
// API requested that the cache be cleared
ajax = true;
settings.clearCache = false;
}
else if ( cacheLower < 0 || requestStart < cacheLower || requestEnd > cacheUpper ) {
// outside cached data - need to make a request
ajax = true;
}
else if ( JSON.stringify( request.order ) !== JSON.stringify( cacheLastRequest.order ) ||
JSON.stringify( request.columns ) !== JSON.stringify( cacheLastRequest.columns ) ||
JSON.stringify( request.search ) !== JSON.stringify( cacheLastRequest.search )
) {
// properties changed (ordering, columns, searching)
ajax = true;
}
// Store the request for checking next time around
cacheLastRequest = $.extend( true, {}, request );
if ( ajax ) {
// Need data from the server
if ( requestStart < cacheLower ) {
requestStart = requestStart - (requestLength*(conf.pages-1));
if ( requestStart < 0 ) {
requestStart = 0;
}
}
cacheLower = requestStart;
cacheUpper = requestStart + (requestLength * conf.pages);
request.start = requestStart;
request.length = requestLength*conf.pages;
// Provide the same `data` options as DataTables.
if ( $.isFunction ( conf.data ) ) {
// As a function it is executed with the data object as an arg
// for manipulation. If an object is returned, it is used as the
// data object to submit
var d = conf.data( request );
if ( d ) {
$.extend( request, d );
}
}
else if ( $.isPlainObject( conf.data ) ) {
// As an object, the data given extends the default
$.extend( request, conf.data );
}
settings.jqXHR = $.ajax( {
"type": conf.method,
"url": conf.url,
"data": request,
"dataType": "json", // **IMPORTANT POINT**
"cache": false,
"success": function ( json ) {
cacheLastJson = $.extend(true, {}, json);
if ( cacheLower != drawStart ) {
json.data.splice( 0, drawStart-cacheLower );
}
if ( requestLength >= -1 ) {
json.data.splice( requestLength, json.data.length );
}
drawCallback( json );
}
} );
}
else {
json = $.extend( true, {}, cacheLastJson );
json.draw = request.draw; // Update the echo for each response
json.data.splice( 0, requestStart-cacheLower );
json.data.splice( requestLength, json.data.length );
drawCallback(json);
}
}
};
// Register an API method that will empty the pipelined data, forcing an Ajax
// fetch on the next draw (i.e. `table.clearPipeline().draw()`)
$.fn.dataTable.Api.register( 'clearPipeline()', function () {
return this.iterator( 'table', function ( settings ) {
settings.clearCache = true;
} );
} );
</script>
I want autocomplete value from two columns of MySql database table, One column have multiple similar values, In autocomplete window in case of similarity it should only display one of the similar values. And after select it should not be suggested in autocomplete window in next row.
HTML
<tr>
<td><input type="text" data-type="aTeam" id="team_1" class="team"></td>
<td><input type="text" id="score_1" ></td>
</tr>
<button type="button" id="addRow">Add Row</button>
JS
$(document).on('focus','.team',function(){
var type = $(this).data('type');
if(type ==='aTeam' )autoTypeNo= 0;
$(this).autocomplete({
source: function( request, response ) {
$.ajax({
url : 'fetch.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: type
},
success: function( data ) {
response( $.map( data, function( item ) {
return {
label: item.aTeam,
value: item.aTeam,
data : item
};
}));
}
});
},
autoFocus: true,
minLength: 1,
select: function( event, ui ) {
id_arr = $(this).attr('id');
id = id_arr.split("_");
$('#team_'+id[1]).val(ui.item.data.aTeam);
$('#score_'+id[1]).val(ui.item.data.score);
}
});
});
//add row
var i=$('table tr').length;
$("#addRow").on('click',function(){
html = '<tr>';
html += '<td><input type="text" data-type="aTeam" id="team_'+i+'" class="team"></td>';
html += '<td><input type="text" id="score_'+i+'"></td>';
html += '</tr>';
$('table').append(html);
i++;
});
PHP
<?php
require_once("config.php");
if(!empty($_POST['type'])){
$type = $_POST['type'];
$name = $_POST['name_startsWith'];
$query = $db->prepare("SELECT aTeam, bTeam FROM teams where UPPER($type) LIKE '".strtoupper($name)."%' limit 10 ");
$query->execute();
$data= array();
$i = 0;
while ($row = $query->fetch(PDO:: FETCH_ASSOC)) {
$data[$i]['aTeam'] = $row['aTeam'];
$data[$i]['bTeam'] = $row['bTeam'];
$data[$i]['score'] = $row['score'];
++$i;
}
echo json_encode($data);
}
Try this: (read the // {comment here} and just compare the code with yours to see what changed)
$(document).on('focus','.team',function(){
let type = $(this).data('type');
// `autoTypeNo` isn't used anywhere, so I commented out this.
//if(type ==='aTeam' )autoTypeNo= 0;
$(this).autocomplete({
source: function( request, response ) {
$.ajax({
url : 'fetch.php',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: type
},
success: function( data ) {
let selected = [],
uniques = [],
choices = [];
$('tr .team[id^="team_"]').each(function(){
let value = this.value.trim().toLowerCase();
if (value && selected.indexOf(value) < 0) {
selected.push(value);
}
});
data.forEach(item => {
let value = item.aTeam.trim().toLowerCase(),
value2 = item.bTeam.trim().toLowerCase();
if (uniques.indexOf(value) < 0 && selected.indexOf(value) < 0) {
choices.push({
label: item.aTeam,
value: item.aTeam,
data: item,
type: 'aTeam'
});
uniques.push(value);
}
if (uniques.indexOf(value2) < 0 && selected.indexOf(value2) < 0) {
choices.push({
label: item.bTeam,
value: item.bTeam,
data: item,
type: 'bTeam'
});
uniques.push(value2);
}
});
response(choices);
}
});
},
autoFocus: true,
minLength: 1,
select: function( event, ui ) {
// Strips the 'team_' part, leaving just the number.
let id_num = $(this).attr('id').substring(5);
$(this).val(ui.item.value);
$('#score_' + id_num).val(ui.item.data.score);
$(this).attr('data-type', ui.item.type); // Change to the correct type?
// Cancels default action, so that the above `jQuery.val()` call works.
return false;
}
});
});
//add row
// 'i' is too generic, so I renamed it to 'row_num'.
var row_num=$('table tr').length;
$("#addRow").on('click',function(){
// Increment before used.
row_num++;
let html = '<tr>';
html += '<td><input type="text" data-type="aTeam" id="team_' + row_num + '" class="team"></td>';
html += '<td><input type="text" id="score_' + row_num + '"></td>';
html += '</tr>';
$('table').append(html);
// Optional, but I like to focus on the `input` in the row that was just added.
$('#team_' + row_num).select();
});
UPDATE
I updated the JS code (above).
And note that for the PHP part, I changed the $query from:
$query = $db->prepare("SELECT aTeam, bTeam FROM teams where UPPER($type) LIKE '".strtoupper($name)."%' limit 10 ");
to:
$query = $db->prepare("SELECT aTeam, bTeam, score FROM teams where ( aTeam LIKE '".$name."%' OR bTeam LIKE '".$name."%' ) limit 10 ");
because without the OR bTeam LIKE '".$name."%', for example if you typed "d" and there were no aTeam starting with "d", then you know what would happen..
I am facing the following problem, I have a page of products with ajax pagination where users is able to select products in a form, the selected products save their id values in an array, but my problem is when the user goes to page 2 then he go back to page 1 he is able to choose the same product where I need to be the array ids unique, where user is able to select only the product 1 time even if he goes to page 2 or 3 and come back to previous pages
my ajax code:
$(".pageNumber").on("click",function(){
pageID = this.id;
var data_string = 'pageID='+pageID;
$.ajax({
type: "POST",
url: "loadData.php",
data: { "pageId" : pageID, "catid" : catid, "subid" : subid, "filter" : filter, "view" : view_type , "items" : itemArrayList},
cache: false,
success: function (result) {
$(".pageNumber").removeClass("number-page-active");
$("#"+pageID).addClass("number-page-active");
$("#results1").hide();
$("#results").html(result);
console.log(result);
if ($(".number-page-active").attr('id') == 1) {
$('#sub1').attr("style","display:none") ;
}
if ($(".number-page-active").attr('id') != 1) {
$('#sub1').attr("style","display:block") ;
}
if ($(".number-page-active").attr('id') == <?php echo $pageLast ?>) {
$('#add1').attr("style","display:none") ;
}
if ($(".number-page-active").attr('id') != <?php echo $pageLast ?>) {
$('#add1').attr("style","display:block") ;
}
}
});
The list of selected products are saved in array as follow:
$("#quotationSubmit").on("click",function(){
console.log(itemArrayList);
$("#itemListArray").val(itemArrayList);
});
var itemSelected = 0;
itemArrayList = [];
function image(divId) {
if (itemSelected < 0) {
itemSelected = 0;
}
var idDiv = 1;
for (idDiv; idDiv <= 100; idDiv++) {
var divDivId = "" + idDiv;
var divDivId0 = "" + idDiv;
if (divDivId === divId || divDivId0 === divId) {
break;
}
}
if ($("#quotation-form").css("display") === "block") {
if ($("#" + idDiv).hasClass("selected-div") === true || $("#" +
idDiv).hasClass("selected-div")) {
$("#" + idDiv).removeClass("selected-div");
$("#" + idDiv).removeClass("selected-div");
itemSelected--;
index = $.inArray(divId,itemArrayList);
itemArrayList.splice(index,1);
console.log(itemArrayList);
} else {
$("#" + idDiv).addClass("selected-div");
$("#" + idDiv).addClass("selected-div");
itemSelected++;
itemArrayList.push(divId);
console.log(itemArrayList);
}
if (itemSelected === 0) {
document.getElementById("quotationText").innerHTML = "Please Select an item";
} else {
if (itemSelected === 1) {
document.getElementById("quotationText").innerHTML = "You have 1 item Selected";
} else {
document.getElementById("quotationText").innerHTML = "You have " + itemSelected + " items Selected";
}
}
} else {
var imageMe = $("#" + divId).find('img').attr('src');
document.getElementById('image00').src = imageMe;
setTimeout(function () {
$(".modal-for-image").removeClass("left-modal-image");
}, 100);
}
}
When the user types something into the search bar I would like the results bellow to link to a page when you click it instead of filling the search bar with whatever you clicked. I'm very new to Jquery and I found this tutorial online but it isn't doing exactly what I wanted it to.
Index.php (Just showing some of the head and the body)
<script>
$(document).ready(function(){
$("#tag").autocomplete("autocomplete.php", {
selectFirst: true
});
});
</script>
</head>
<body>
<label>Tag:</label>
<input name="tag" type="text" id="tag" size="20" style="width:541px; height:23px; font-size:16px; text-indent:5px;" placeholder="Search foods, shopping lists, meal plans and recipes" />
</body>
autocomplete.php (Even with the and tags I was unable to achieve the linking to another page.)
<?php
$q=$_GET['q'];
$my_data=mysql_real_escape_string($q);
include ("connect.php");
$sql="SELECT id, name, description, foodgroup FROM foods WHERE name LIKE '%$my_data%' ORDER BY name";
$result = mysql_query($sql);
if($result) {
while($row=mysql_fetch_array($result)) {
print "<a href='food.php?foodGroup=" . $row['foodgroup'] . "&name=" . $row['name'] . "&desc=" . $row['description'] . "&foodID=" . $row['id'] . "'><div id='resultContainerDiv'><span id='resultText'>" . $row['name'] . " - " . $row['description'] . "</span></div></a>\n";
}
}
?>
lastly, jquery.autocomplete.js
/* * jQuery Autocomplete plugin 1.1 * * Copyright (c) 2009 Jörn Zaefferer * * Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php * http://www.gnu.org/licenses/gpl.html * * Revision: $Id: jquery.autocomplete.js 15 2009-08-22 10:30:27Z joern.zaefferer $ */
;(function($) { $.fn.extend({ autocomplete: function(urlOrData, options) { var isUrl = typeof urlOrData == "string"; options = $.extend({}, $.Autocompleter.defaults, { url: isUrl ? urlOrData : null, data: isUrl ? null : urlOrData, delay: isUrl ? $.Autocompleter.defaults.delay : 10, max: options && !options.scroll ? 10 : 150 }, options);
// if highlight is set to false, replace it with a do-nothing function options.highlight = options.highlight || function(value) { return value; };
// if the formatMatch option is not specified, then use formatItem for backwards compatibility options.formatMatch = options.formatMatch || options.formatItem;
return this.each(function() { new $.Autocompleter(this, options); }); }, result: function(handler) { return this.bind("result", handler); }, search: function(handler) { return this.trigger("search", [handler]); }, flushCache: function() { return this.trigger("flushCache"); }, setOptions: function(options){ return this.trigger("setOptions", [options]); }, unautocomplete: function() { return this.trigger("unautocomplete"); } });
$.Autocompleter = function(input, options) {
var KEY = { UP: 38, DOWN: 40, DEL: 46, TAB: 9, RETURN: 13, ESC: 27, COMMA: 188, PAGEUP: 33, PAGEDOWN: 34, BACKSPACE: 8 };
// Create $ object for input element var $input = $(input).attr("autocomplete", "off").addClass(options.inputClass);
var timeout; var previousValue = ""; var cache = $.Autocompleter.Cache(options); var hasFocus = 0; var lastKeyPressCode; var config = { mouseDownOnSelect: false }; var select = $.Autocompleter.Select(options, input, selectCurrent, config); var blockSubmit; // prevent form submit in opera when selecting with return key $.browser.opera && $(input.form).bind("submit.autocomplete", function() { if (blockSubmit) { blockSubmit = false; return false; } }); // only opera doesn't trigger keydown multiple times while pressed, others don't work with keypress at all $input.bind(($.browser.opera ? "keypress" : "keydown") + ".autocomplete", function(event) { // a keypress means the input has focus // avoids issue where input had focus before the autocomplete was applied hasFocus = 1; // track last key pressed lastKeyPressCode = event.keyCode; switch(event.keyCode) {
case KEY.UP:
event.preventDefault();
if ( select.visible() ) {
select.prev();
} else {
onChange(0, true);
}
break;
case KEY.DOWN:
event.preventDefault();
if ( select.visible() ) {
select.next();
} else {
onChange(0, true);
}
break;
case KEY.PAGEUP:
event.preventDefault();
if ( select.visible() ) {
select.pageUp();
} else {
onChange(0, true);
}
break;
case KEY.PAGEDOWN:
event.preventDefault();
if ( select.visible() ) {
select.pageDown();
} else {
onChange(0, true);
}
break;
// matches also semicolon case options.multiple && $.trim(options.multipleSeparator) == "," && KEY.COMMA: case KEY.TAB: case KEY.RETURN:
if( selectCurrent() ) {
// stop default to prevent a form submit, Opera needs special handling
event.preventDefault();
blockSubmit = true;
return false;
}
break;
case KEY.ESC:
select.hide();
break;
default:
clearTimeout(timeout);
timeout = setTimeout(onChange, options.delay);
break; } }).focus(function(){ // track whether the field has focus, we shouldn't process any // results if the field no longer has focus hasFocus++; }).blur(function() { hasFocus = 0; if (!config.mouseDownOnSelect) { hideResults(); } }).click(function() { // show select when clicking in a focused field if ( hasFocus++ > 1 && !select.visible() ) { onChange(0, true); } }).bind("search", function() { // TODO why not just specifying both arguments? var fn = (arguments.length > 1) ? arguments[1] : null; function findValueCallback(q, data) { var result; if( data && data.length ) {
for (var i=0; i < data.length; i++) {
if( data[i].result.toLowerCase() == q.toLowerCase() ) {
result = data[i];
break;
}
} } if( typeof fn == "function" ) fn(result); else $input.trigger("result", result && [result.data, result.value]); } $.each(trimWords($input.val()), function(i, value) { request(value, findValueCallback, findValueCallback); }); }).bind("flushCache", function() { cache.flush(); }).bind("setOptions", function() { $.extend(options, arguments[1]); // if we've updated the data, repopulate if ( "data" in arguments[1] ) cache.populate(); }).bind("unautocomplete", function() { select.unbind(); $input.unbind(); $(input.form).unbind(".autocomplete"); });
function selectCurrent() { var selected = select.selected(); if( !selected ) return false;
var v = selected.result; previousValue = v;
if ( options.multiple ) { var words = trimWords($input.val()); if ( words.length > 1 ) {
var seperator = options.multipleSeparator.length;
var cursorAt = $(input).selection().start;
var wordAt, progress = 0;
$.each(words, function(i, word) {
progress += word.length;
if (cursorAt <= progress) {
wordAt = i;
return false;
}
progress += seperator;
});
words[wordAt] = v;
// TODO this should set the cursor to the right position, but it gets overriden somewhere
//$.Autocompleter.Selection(input, progress + seperator, progress + seperator);
v = words.join( options.multipleSeparator ); } v += options.multipleSeparator; }
$input.val(v); hideResultsNow(); $input.trigger("result", [selected.data, selected.value]); return true; } function onChange(crap, skipPrevCheck) { if( lastKeyPressCode == KEY.DEL ) { select.hide(); return; }
var currentValue = $input.val();
if ( !skipPrevCheck && currentValue == previousValue ) return;
previousValue = currentValue;
currentValue = lastWord(currentValue); if ( currentValue.length >= options.minChars) { $input.addClass(options.loadingClass); if (!options.matchCase)
currentValue = currentValue.toLowerCase(); request(currentValue, receiveData, hideResultsNow); } else { stopLoading(); select.hide(); } }; function trimWords(value) { if (!value) return [""]; if (!options.multiple) return [$.trim(value)]; return $.map(value.split(options.multipleSeparator), function(word) { return $.trim(value).length ? $.trim(word) : null; }); } function lastWord(value) { if ( !options.multiple ) return value; var words = trimWords(value); if (words.length == 1) return words[0]; var cursorAt = $(input).selection().start; if (cursorAt == value.length) { words = trimWords(value) } else { words = trimWords(value.replace(value.substring(cursorAt), "")); } return words[words.length - 1]; } // fills in the input box w/the first match (assumed to be the best match) // q: the term entered // sValue: the first matching result function autoFill(q, sValue){ // autofill in the complete box w/the first match as long as the user hasn't entered in more data // if the last user key pressed was backspace, don't autofill if( options.autoFill && (lastWord($input.val()).toLowerCase() == q.toLowerCase()) && lastKeyPressCode != KEY.BACKSPACE ) { // fill in the value (keep the case the user has typed) $input.val($input.val() + sValue.substring(lastWord(previousValue).length)); // select the portion of the value not typed by the user (so the next character will erase) $(input).selection(previousValue.length, previousValue.length + sValue.length); } };
function hideResults() { clearTimeout(timeout); timeout = setTimeout(hideResultsNow, 200); };
function hideResultsNow() { var wasVisible = select.visible(); select.hide(); clearTimeout(timeout); stopLoading(); if (options.mustMatch) { // call search and run callback $input.search(
function (result){
// if no value found, clear the input box
if( !result ) {
if (options.multiple) {
var words = trimWords($input.val()).slice(0, -1);
$input.val( words.join(options.multipleSeparator) + (words.length ? options.multipleSeparator : "") );
}
else {
$input.val( "" );
$input.trigger("result", null);
}
}
} ); } };
function receiveData(q, data) { if ( data && data.length && hasFocus ) { stopLoading(); select.display(data, q); autoFill(q, data[0].value); select.show(); } else { hideResultsNow(); } };
function request(term, success, failure) { if (!options.matchCase) term = term.toLowerCase(); var data = cache.load(term); // recieve the cached data if (data && data.length) { success(term, data); // if an AJAX url has been supplied, try loading the data now } else if( (typeof options.url == "string") && (options.url.length > 0) ){
var extraParams = {
timestamp: +new Date() }; $.each(options.extraParams, function(key, param) {
extraParams[key] = typeof param == "function" ? param() : param; });
$.ajax({
// try to leverage ajaxQueue plugin to abort previous requests
mode: "abort",
// limit abortion to this input
port: "autocomplete" + input.name,
dataType: options.dataType,
url: options.url,
data: $.extend({
q: lastWord(term),
limit: options.max
}, extraParams),
success: function(data) {
var parsed = options.parse && options.parse(data) || parse(data);
cache.add(term, parsed);
success(term, parsed);
} }); } else { // if we have a failure, we need to empty the list -- this prevents the the [TAB] key from selecting the last successful match select.emptyList(); failure(term); } }; function parse(data) { var parsed = []; var rows = data.split("\n"); for (var i=0; i < rows.length; i++) { var row = $.trim(rows[i]); if (row) {
row = row.split("|");
parsed[parsed.length] = {
data: row,
value: row[0],
result: options.formatResult && options.formatResult(row, row[0]) || row[0]
}; } } return parsed; };
function stopLoading() { $input.removeClass(options.loadingClass); };
};
$.Autocompleter.defaults = { inputClass: "ac_input", resultsClass: "ac_results", loadingClass: "ac_loading", minChars: 1, delay: 400, matchCase: false, matchSubset: true, matchContains: false, cacheLength: 10, max: 100, mustMatch: false, extraParams: {}, selectFirst: true, formatItem: function(row) { return row[0]; }, formatMatch: null, autoFill: false, width: 0, multiple: false, multipleSeparator: ", ", highlight: function(value, term) { return value.replace(new RegExp("(?![^&;]+;)(?!<[^<>]*)(" + term.replace(/([\^\$\(\)\[\]\{\}\*\.\+\?\|\\])/gi, "\\$1") + ")(?![^<>]*>)(?![^&;]+;)", "gi"), "<strong>$1</strong>"); },
scroll: true,
scrollHeight: 180 };
$.Autocompleter.Cache = function(options) {
var data = {}; var length = 0; function matchSubset(s, sub) { if (!options.matchCase) s = s.toLowerCase(); var i = s.indexOf(sub); if (options.matchContains == "word"){ i = s.toLowerCase().search("\\b" + sub.toLowerCase()); } if (i == -1) return false; return i == 0 || options.matchContains; }; function add(q, value) { if (length > options.cacheLength){ flush(); } if (!data[q]){ length++; } data[q] = value; } function populate(){ if( !options.data ) return false; // track the matches var stMatchSets = {}, nullData = 0;
// no url was specified, we need to adjust the cache length to make sure it fits the local data store if( !options.url ) options.cacheLength = 1;
// track all options for minChars = 0 stMatchSets[""] = [];
// loop through the array and create a lookup structure for ( var i = 0, ol = options.data.length; i < ol; i++ ) { var rawValue = options.data[i]; // if rawValue is a string, make an array otherwise just reference the array rawValue = (typeof rawValue == "string") ? [rawValue] : rawValue;
var value = options.formatMatch(rawValue, i+1, options.data.length); if ( value === false )
continue;
var firstChar = value.charAt(0).toLowerCase(); // if no lookup array for this character exists, look it up now if( !stMatchSets[firstChar] )
stMatchSets[firstChar] = [];
// if the match is a string var row = {
value: value,
data: rawValue,
result: options.formatResult && options.formatResult(rawValue) || value };
// push the current match into the set list stMatchSets[firstChar].push(row);
// keep track of minChars zero items if ( nullData++ < options.max ) {
stMatchSets[""].push(row); } };
// add the data items to the cache $.each(stMatchSets, function(i, value) { // increase the cache size options.cacheLength++; // add to the cache add(i, value); }); } // populate any existing data setTimeout(populate, 25); function flush(){ data = {}; length = 0; } return { flush: flush, add: add, populate: populate, load: function(q) { if (!options.cacheLength || !length)
return null; /*
* if dealing w/local data and matchContains than we must make sure
* to loop through all the data collections looking for matches
*/ if( !options.url && options.matchContains ){
// track all matches
var csub = [];
// loop through all the data grids for matches
for( var k in data ){
// don't search through the stMatchSets[""] (minChars: 0) cache
// this prevents duplicates
if( k.length > 0 ){
var c = data[k];
$.each(c, function(i, x) {
// if we've got a match, add it to the array
if (matchSubset(x.value, q)) {
csub.push(x);
}
});
}
}
return csub; } else // if the exact item exists, use it if (data[q]){
return data[q]; } else if (options.matchSubset) {
for (var i = q.length - 1; i >= options.minChars; i--) {
var c = data[q.substr(0, i)];
if (c) {
var csub = [];
$.each(c, function(i, x) {
if (matchSubset(x.value, q)) {
csub[csub.length] = x;
}
});
return csub;
}
} } return null; } }; };
$.Autocompleter.Select = function (options, input, select, config) { var CLASSES = { ACTIVE: "ac_over" }; var listItems, active =
-1, data, term = "", needsInit = true, element, list; // Create results function init() { if (!needsInit) return; element = $("<div/>") .hide() .addClass(options.resultsClass) .css("position", "absolute") .appendTo(document.body);
list = $("<ul/>").appendTo(element).mouseover( function(event) { if(target(event).nodeName && target(event).nodeName.toUpperCase()
== 'LI') {
active = $("li", list).removeClass(CLASSES.ACTIVE).index(target(event));
$(target(event)).addClass(CLASSES.ACTIVE);
} }).click(function(event) { $(target(event)).addClass(CLASSES.ACTIVE); select(); // TODO provide option to avoid setting focus again after selection? useful for cleanup-on-focus input.focus(); return false; }).mousedown(function() { config.mouseDownOnSelect = true; }).mouseup(function() { config.mouseDownOnSelect = false; });
if( options.width > 0 ) element.css("width", options.width);
needsInit = false; } function target(event) { var element = event.target; while(element && element.tagName != "LI") element = element.parentNode; // more fun with IE, sometimes event.target is empty, just ignore it then if(!element) return []; return element; }
function moveSelect(step) { listItems.slice(active, active + 1).removeClass(CLASSES.ACTIVE); movePosition(step);
var activeItem = listItems.slice(active, active + 1).addClass(CLASSES.ACTIVE);
if(options.scroll) {
var offset = 0;
listItems.slice(0, active).each(function() {
offset += this.offsetHeight; });
if((offset + activeItem[0].offsetHeight - list.scrollTop()) > list[0].clientHeight) {
list.scrollTop(offset + activeItem[0].offsetHeight - list.innerHeight());
} else if(offset < list.scrollTop()) {
list.scrollTop(offset);
}
} }; function movePosition(step) { active += step; if (active < 0) { active = listItems.size() - 1; } else if (active
>= listItems.size()) { active = 0; } } function limitNumberOfItems(available) { return options.max && options.max < available ? options.max : available; } function fillList() { list.empty(); var max = limitNumberOfItems(data.length); for (var i=0; i < max; i++) { if (!data[i])
continue; var formatted = options.formatItem(data[i].data, i+1, max, data[i].value, term); if ( formatted === false )
continue; var li = $("<li/>").html( options.highlight(formatted, term) ).addClass(i%2 == 0 ? "ac_even" : "ac_odd").appendTo(list)[0]; $.data(li, "ac_data", data[i]); } listItems = list.find("li"); if ( options.selectFirst ) { listItems.slice(0, 1).addClass(CLASSES.ACTIVE); active = 0; } // apply bgiframe if available if ( $.fn.bgiframe ) list.bgiframe(); } return { display: function(d, q) { init(); data = d; term = q; fillList(); }, next: function() { moveSelect(1); }, prev: function() { moveSelect(-1); }, pageUp: function() { if (active != 0 && active - 8 < 0) {
moveSelect( -active ); } else {
moveSelect(-8); } }, pageDown: function() { if (active != listItems.size() - 1 && active + 8 > listItems.size()) {
moveSelect( listItems.size() - 1 - active ); } else {
moveSelect(8); } }, hide: function() { element && element.hide(); listItems && listItems.removeClass(CLASSES.ACTIVE); active = -1; }, visible : function() { return element && element.is(":visible"); }, current: function() { return this.visible() && (listItems.filter("." + CLASSES.ACTIVE)[0] || options.selectFirst && listItems[0]); }, show: function() { var offset = $(input).offset(); element.css({
width: typeof options.width == "string" || options.width > 0 ? options.width : $(input).width(),
top: offset.top + input.offsetHeight,
left: offset.left }).show();
if(options.scroll) {
list.scrollTop(0);
list.css({
maxHeight: options.scrollHeight,
overflow: 'auto'
});
if($.browser.msie && typeof document.body.style.maxHeight === "undefined") {
var listHeight = 0;
listItems.each(function() {
listHeight += this.offsetHeight;
});
var scrollbarsVisible = listHeight > options.scrollHeight;
list.css('height', scrollbarsVisible ? options.scrollHeight : listHeight );
if (!scrollbarsVisible) {
// IE doesn't recalculate width when scrollbar disappears
listItems.width( list.width() - parseInt(listItems.css("padding-left")) - parseInt(listItems.css("padding-right")) );
}
}
} }, selected: function() { var selected = listItems && listItems.filter("." + CLASSES.ACTIVE).removeClass(CLASSES.ACTIVE); return selected && selected.length && $.data(selected[0], "ac_data"); }, emptyList: function (){ list && list.empty(); }, unbind: function() { element && element.remove(); } }; };
$.fn.selection = function(start, end) { if (start !== undefined) { return this.each(function() { if( this.createTextRange ){
var selRange = this.createTextRange();
if (end === undefined || start == end) {
selRange.move("character", start);
selRange.select();
} else {
selRange.collapse(true);
selRange.moveStart("character", start);
selRange.moveEnd("character", end);
selRange.select();
} } else if( this.setSelectionRange ){
this.setSelectionRange(start, end); } else if( this.selectionStart ){
this.selectionStart = start;
this.selectionEnd = end; } }); } var field = this[0]; if ( field.createTextRange ) { var range = document.selection.createRange(), orig = field.value, teststring
= "<->", textLength = range.text.length; range.text = teststring; var caretAt = field.value.indexOf(teststring); field.value = orig; this.selection(caretAt, caretAt + textLength); return { start: caretAt, end: caretAt + textLength } } else if( field.selectionStart !== undefined ){ return { start: field.selectionStart, end: field.selectionEnd } } };
})(jQuery);
Thank you,
Ryan
In the search script you have an error:
<?php
$q=$_GET['q'];
$my_data=mysql_real_escape_string($q);
include ("connect.php");
mysql_real_escape_string will return false (the equivalent of an empty string) if there is no database connection yet so you are effectively emptying your search string.
You need to switch that around:
<?php
$q=$_GET['q'];
include ("connect.php");
$my_data=mysql_real_escape_string($q);
You should also add error handling to your database calls and move to PDO or mysqli if possible as the mysql_* functions are deprecated.
I have the following code which pass data formatted as JSON to PHP through Ajax, but the PHP code doesn't print out the result.
var array_str_idnum = [];
for (var i=0;i<2;i++) {
array_str_idnum[i] = [];
}
$('#movetoset').click(function() {
if ($('#selectsett').val() === 'General') {
}
for(j=0;j< (array_str_idnum[0]).length;j++) {
if((document.getElementById('check' + array_str_idnum[0][j]).checked) && (array_str_idnum[1][j] != "moved")) {
document.getElementById('imagediv' + array_str_idnum[0][j]).style.display = 'none';
array_str_idnum[1][j] = "moved";
index = ((array_str_idnum[0]).length - 1 - j) + '';
var str = $("#complicated").serialize() + "&myindex=" + encodeURIComponent(index) ;
var desc_str = document.getElementById('textarea' + array_str_idnum[0][j]).value;
str = str + "&mydescription=" + encodeURIComponent(desc_str);
$.ajax({
type: "POST",
url: "addtoset.php",
data: str,
cache: false,
success: function(msg) {
$("#formstatus").ajaxComplete(function(){$(this).fadeIn("slow").html(msg + '<br /><br />')});
$("#formstatus").append(msg);
}
});
}
}
mydata = JSON.stringify(array_str_idnum);
$.ajax({
type: 'post',
cache: false,
url: 'parser.php',
data: {myJson: mydata},
success: function(msg) {
$("#formstatus").ajaxComplete(function() { $(this).fadeIn("slow").html(msg) });
}
});
});
Here is my PHP code:
$decoded = json_decode($_POST['myJson'],true);
// do something with data here
echo "decoded = $decoded[1][0]";
What's wrong with the code?
I think you want to fix your PHP code like others suggested, like so:
<?php
if ( !empty($_POST['myJson']) && strlen($_POST['myJson']) > 0 )
{
$decoded = json_decode( $_POST['myJson'], true );
// Echo out the JSON onject as a JavaScript variable.
echo "decoded = {$decoded[1][0]};";
}
else
{
// Echo out the JSON onject as a JavaScript variable.
echo "decoded = null;";
}
?>
Here is your JavaScript code with some minor suggestions:
<script type="text/javascript">
$( document ).ready(function()
{
var array_str_idnum = [];
// Init the array with two elemsnts that contain empty literal arrays.
for ( var i = 0; i < 2; i++ )
{
array_str_idnum[ i ] = [];
}
$( "#movetoset" ).click(function()
{
var $checkbox, str, desc_str, elementSuffix;
// I believe the code in here was removed for privacy reasons.
// I also believe it populats 'array_str_idnum' with some values of some kind.
if ( $("#selectsett").val() === "General" )
{
// ...
}
for ( var i = 0; i < (array_str_idnum[0]).length; i++ )
{
elementSuffix = array_str_idnum[ 0 ][ i ];
// Grab the checkbox.
$checkbox = $( "#check" + elementSuffix );
if ( $checkbox.checked && (array_str_idnum[1][i] != "moved") )
{
// Hide the image.
$( "#imagediv" + elementSuffix ).css({ "display": "none" });
// Indicate that this one is now moved, so do NOT process it again.
array_str_idnum[ 1 ][ i ] = "moved";
index = ( (array_str_idnum[0]).length - 1 - i ) + '';
// Setting str here will reinitialize it
str = $( "#complicated" ).serialize() + "&myindex=" + encodeURIComponent( index );
desc_str = $( "#textarea" + elementSuffix ).value;
str = str + "&mydescription=" + encodeURIComponent( desc_str );
// Bad idea to put ajax call in a loop.
$.ajax({
"type": "POST",
"url": "addtoset.php",
"data": str,
"cache": false,
"success": function( msg )
{
$( "#formstatus" ).ajaxComplete(function()
{
$( this ).fadeIn( "slow" ).html( msg + "<br /><br />" );
});
$( "#formstatus" ).append( msg );
}
});
}
}
mydata = JSON.stringify( array_str_idnum );
$.ajax({
"type": "POST",
"cache": false,
"url": "parser.php",
"data": { myJson: mydata },
"success": function( msg )
{
$( "#formstatus" ).ajaxComplete(function()
{
$( this ).fadeIn( "slow" ).html( msg )
});
}
});
});
});
</script>
Maybe your only problem is the echo statement. You'll have to change that to
echo "decoded = ".$decoded[1][0];
or
echo "decoded = {$decoded[1][0]}"; //
This is because PHP only notices "normal" variables in double-quoted strings. For array elements (or object properties) you'll have to use curly braces around the variable or use string concatenation.