Browse Table Filter Options Topic is solved

[Duski]

Btw. Form without dropdown filters and without WHERE clause in SQL works properly ...

[kev1n]

phpMyAdmin says: #1054 - Unknown column 'tbl_autori.autor' in 'field list'

I don't see tbl_autori.autor in the generated sql.

[kev1n]

I really can't say what's going wrong without seeing more, like the tables, form etc..
If possible, send me a dump of your db via private message or use the "Cloner" to send me just the form's SQL and also a dump of your tables. Remove any confidential data.

[kev1n]

Upon analyzing the form and db, an invisible unicode character (\ufeff) was found in front of some db columns.
Removing them fixed the problem.

[Duski]

I was able to set all dropdown filters I needed and everything works fine - but only on desktop.
On tablet or smartphone dropdown filters don't work Filter fields are greyed and not responding.

Screenshot_20220210-191728 (002).jpg

Any suggestions ?
Thanx in advance.

[kev1n]

Use nuBuilder's inbuilt nuAddBrowseTitleSelect() instead of addBrowseTitleDropDown()

You will have to replace nuBrowseTitle0_dropdown with nuBrowseTitle0_select etc.

To make the dropdowns touchable on a mobile device:

Code: Select all

$('#nuBrowseTitle0_select').parent().unbind("touchstart");

For more information, check out the updated article in the Code Library.

[Duski]

I'm sorry, it doesn't work
This works on PC, doesn't work on mobile:

Code: Select all

function addBrowseTitleDropDown(index, data) {
	
	var dropId = "nuBrowseTitle" + index + "_dropdown";
	var list = document.createElement('select');
	...

This doesn't work on PC nor on mobile:

Code: Select all

function addBrowseTitleDropDown(index, data) {
	
	var dropId = "nuBrowseTitle" + index + "_select";
	var list = document.createElement('select');
	...

[kev1n]

It should work because nuBuilder uses the same function. Check out the user form how it's done.

[Duski]

I'm sorry, on mobile it doesn't work

This is my browse SQL statement:

Code: Select all

SELECT
    tbl_knihy.*,
    tbl_autori.autor,
    tbl_knihy.rok,
    tbl_formaty.format,
    tbl_jazyky.jazyk,
    tbl_kategorie.kategoria,
    tbl_media.medium,
    tbl_serie.seria,
    tbl_umiestnenia.umiestnenie

FROM
    tbl_knihy
        JOIN tbl_autori ON tbl_knihy.tbl_autori_id = tbl_autori.aut_id
        JOIN tbl_formaty ON tbl_knihy.tbl_formaty_id = tbl_formaty.for_id
        JOIN tbl_jazyky ON tbl_knihy.tbl_jazyky_id = tbl_jazyky.jaz_id
        JOIN tbl_kategorie ON tbl_knihy.tbl_kategorie_id = tbl_kategorie.kat_id
        JOIN tbl_media ON tbl_knihy.tbl_media_id = tbl_media.med_id
        JOIN tbl_serie ON tbl_knihy.tbl_serie_id = tbl_serie.ser_id
        JOIN tbl_umiestnenia ON tbl_knihy.tbl_umiestnenia_id = tbl_umiestnenia.umiest_id

WHERE

((autor = '#nuBrowseTitle1_select#' AND LOCATE('#', '#nuBrowseTitle1_select#') <> 1 ) 
OR '#nuBrowseTitle1_select#' = '' OR LOCATE('#', '#nuBrowseTitle1_select#') = 1)

AND

((kategoria = '#nuBrowseTitle4_select#' AND LOCATE('#', '#nuBrowseTitle4_select#') <> 1 ) 
OR '#nuBrowseTitle4_select#' = '' OR LOCATE('#', '#nuBrowseTitle4_select#') = 1)

AND

((medium = '#nuBrowseTitle5_select#' AND LOCATE('#', '#nuBrowseTitle5_select#') <> 1 ) 
OR '#nuBrowseTitle5_select#' = '' OR LOCATE('#', '#nuBrowseTitle5_select#') = 1)

AND

((jazyk = '#nuBrowseTitle3_select#' AND LOCATE('#', '#nuBrowseTitle3_select#') <> 1 ) 
OR '#nuBrowseTitle3_select#' = '' OR LOCATE('#', '#nuBrowseTitle3_select#') = 1)

ORDER BY 
    tbl_knihy.nazov ASC

... and this is my custom js code:

Code: Select all

if (nuFormType() == 'browse') {

    var arrAutori = JSON.parse(getAutori());
    addBrowseTitleDropDown(1, arrAutori);                     // add dropdown to column 2 (index 1)

    var arrKategorie = JSON.parse(getKategorie());            // add dropdown to column 5 (index 4)
    addBrowseTitleDropDown(4, arrKategorie);
    
    var arrMedia = JSON.parse(getMedia());                    // add dropdown to column 6 (index 5)
    addBrowseTitleDropDown(5, arrMedia);

    var arrJazyky = JSON.parse(getJazyky());                  // add dropdown to column 4 (index 3)
    addBrowseTitleDropDown(3, arrJazyky);

}

// Function to add a dropdown to a title of a Browse Screen 
// * @param {number} index - browse index where the dropdown should appear
// * @param {object} data -  array to populate the dropdown
function addBrowseTitleDropDown(index, data) {
	
//	var dropId = "nuBrowseTitle" + index + "_dropdown";
        var dropId = "nuBrowseTitle" + index + "_select";
	var list = document.createElement('select');
	
	list.setAttribute("id", dropId);
        var w = nuCurrentProperties().column_widths[index] - 10;
	list.setAttribute('style', 'width:'+ w +'px');


	for (var i = 0; i < data.length; i++) {
		var opt = document.createElement('option');
		opt.innerHTML = data[i];
		opt.value = data[i];
		list.appendChild(opt);
	}

	// append select to the browse title
	$('#nuBrowseTitle'+index).append('<br/>').append(list);

	$('#'+dropId).on('change', function (e) {
	//	var optionSelected = $("option:selected", this);
		nuSetProperty(this.id,this.value);
		nuSearchAction();
	});

	$('#nuBrowseTitle'+index).on('mousedown' , '> select' , function(e){
		e.stopPropagation();
	});

	 var dropValue = nuGetProperty(dropId);
	 $("#"+dropId).val(dropValue);
}

if( nuFormType() == 'browse') {
    $('#nuActionHolder').css({'height': '60px'});
}

Should I edit my code somewhere else ?

[kev1n]

Use nuBuilder's inbuilt nuAddBrowseTitleSelect() instead of addBrowseTitleDropDown()

You will have to replace nuBrowseTitle0_dropdown with nuBrowseTitle0_select etc.

To make the dropdowns touchable on a mobile device:

Code: Select all

$('#nuBrowseTitle0_select').parent().unbind("touchstart");

For more information, check out the updated article in the Code Library.