Browse Table Filter Options Topic is solved

[Alohajoe5]

Well, I thought I had it fixed, but alas I don't. I edited the Javascript to read like this:

Code: Select all

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

var data0 = JSON.parse(getWords());
data0.push("");
data0.sort(function(a,b){return a-b});
addBrowseTitleDropDown(3,data0)

and this repeats down the line for the columns with dropdowns. The only problem now is that it seems to be including values that aren't in the columns in the dropdown results. E.G:

data0 should get 1-50
....
data3 should get 1-25

Dropdown for column that is associated with data3: options are 1-50.

They are correctly sorted, just they include values that are not in the columns. It's almost like the set of all distinct values, not necessarily values distinct to the particular column.

[kev1n]

Sorry, I'm afraid there is too much guesswork involved here from my side. Without seeing your php code and the rest of your js code I can't help any further.

[admin]

Hello everyone,

I just want to say that kev1n has spent a long time on this question (resolution or not).

Thanks, man!

I appreciate it.

[Alohajoe5]

Absolutely, thank you for all the help! I really appreciate it.

[kev1n]

Absolutely, thank you for all the help! I really appreciate it.

If you can post the full code I can try to help.

[Alohajoe5]

kev1n,

Thank you for your continued help. Here's the full code.

JavaScript:

Code: Select all

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

    var data0 = JSON.parse(getWords());
    data0.push("");
    data0.sort(function(a,b){return a-b});
    addBrowseTitleDropDown(3, data0); // add dropdown to column 4 (index 3)

    var data1 = JSON.parse(getWords());
    data1.push("");
    data1.sort(function(a,b){return a-b});
    addBrowseTitleDropDown(4, data1);
    
    var data2 = JSON.parse(getWords());
    data2.push("");
    data2.sort(function(a,b){return a-b});
    addBrowseTitleDropDown(5, data2);

    var data3 = JSON.parse(getWords());
    data3.push("");
    data3.sort(function(a,b){return a-b});
    addBrowseTitleDropDown(10, data3);
  
}

// Function to add a dropdown to a column

function addBrowseTitleDropDown(index, data) {

    var dropId = "nuBrowseTitle" + index + "_dropdown";

    var list = document.createElement('select');

    list.setAttribute("id", dropId);
    list.setAttribute('style', 'width:' + nuCurrentProperties().column_widths[index] - 10 + '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);

    // add a change event handler to the dropdown
    $('#' + dropId).on('change', function(e) {       
        nuSetProperty(this.id, this.value);
        nuSearchAction(1);
    });

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

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

PHP:

Code: Select all

function sqlWords() {
        return "SELECT DISTINCT word FROM MuxSignals";
}

function getBase64JsonDTString($sql) {
        $result = nuRunQuery($sql);
        $a = array();
        while ($row = db_fetch_row($result)) {
                $a[] = $row;
        }
        return base64_encode(json_encode( $a ));
}

$w = getBase64JsonDTString(sqlWords());

$js = "
     function getWords() {
     return atob('$w');
    }
";

nuAddJavascript($js);

The SQL is the same as before.

Code: Select all

SELECT * FROM Channels

WHERE

((Word = '#nuBrowseTitle3_dropdown#' AND LOCATE('#', '#nuBrowseTitle3_dropdown#') <> 1 )
OR '#nubrowseTitle3_dropdown#' = '' OR LOCATE('#', 'nubrowseTitle3_dropdown#') = 1)

AND

((Number= '#nuBrowseTitle4_dropdown#' AND LOCATE('#', '#nuBrowseTitle4_dropdown#') <> 1 )
OR '#nubrowseTitle4_dropdown#' = '' OR LOCATE('#', 'nubrowseTitle4_dropdown#') = 1)

AND

((Offset= '#nuBrowseTitle5_dropdown#' AND LOCATE('#', '#nuBrowseTitle5_dropdown#') <> 1 )
OR '#nubrowseTitle5_dropdown#' = '' OR LOCATE('#', 'nubrowseTitle5_dropdown#') = 1)

AND

((Channel= '#nuBrowseTitle10_dropdown#' AND LOCATE('#', '#nuBrowseTitle10_dropdown#') <> 1 )
OR '#nubrowseTitle10_dropdown#' = '' OR LOCATE('#', 'nubrowseTitle10_dropdown#') = 1)

Like I said, the issue is that all columns are inheriting the same array of items for their drop down menu.

Thanks!

[kev1n]

kev1n,

Like I said, the issue is that all columns are inheriting the same array of items for their drop down menu.

Thanks!

This is not a surprise, since you always pass the same values - getWords() - to the function addBrowseTitleDropDown()
To change this, you need to make modifications to the PHP function. You must write a function for each value list.

So the PHP code is going to look like this (verify the SQL statements):

Code: Select all

function sqlWords() {
        return "SELECT DISTINCT word FROM MuxSignals";
}

function sqlNumbers() {
        return "SELECT DISTINCT number FROM MuxSignals";
}

function sqlOffsets() {
        return "SELECT DISTINCT offset FROM MuxSignals";
}

function sqlChannels() {
        return "SELECT DISTINCT channel FROM MuxSignals";
}

function getBase64JsonArray($sql) {
        $result = nuRunQuery($sql);
        $a = array();
        $a[] = ""; // add an empty value

        while ($row = db_fetch_row($result)) {
                $a[] = $row;
        }
        sort($a);

        return base64_encode(json_encode( $a ));
}

$words = getBase64JsonArray(sqlWords());
$numbers = getBase64JsonArray(sqlNumbers());
$channels = getBase64JsonArray(sqlChannels());
$offsets = getBase64JsonArray(sqlOffsets());

$js = "
     function getWords() {
		return atob('$words');
    }
	
     function getNumbers() {
		return atob('$numbers');
    }
	
     function getChannels() {
		return atob('$channels');
    }	

     function getOffsets() {
		return atob('$offsets');
    }	
		
";

nuAddJavascript($js);

Then the Javascript code:

Code: Select all

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

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

    var arrNumbers = JSON.parse(getNumbers());
    addBrowseTitleDropDown(4, arrNumbers);
    
    var arrOffsets = JSON.parse(getOffsets());
    addBrowseTitleDropDown(5, arrOffsets);

    var arrChannels = JSON.parse(getChannels());
    addBrowseTitleDropDown(10, arrChannels);
  
}


// 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 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(1);
   });

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

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

Browse SQL: leave unchanged.

[Alohajoe5]

Thanks! This has been so helpful!

[admin]

.

[Timo]

I use the brilliant code to quickly filter columns with a dropdown. Now the height of the title is much smaller in the new nuBuilder and the dropdowns are no longer displayed. Is there any way to increase the height? Thank you.