jQuery FlexBox

Commented Issue: Show all dropdown options after a selection is made [8999]

sjudkins — Tue, 14 May 2013 14:56:12 GMT

I think the FlexBox should work more like a dropdown menu, in that if you click the arrow icon you should always see the full list of options to select from.

Currently, you see the full list the first time you click the arrow. But once a selection is made, the arrow is now useless because clicking on it only shows the single option (current selection).

Which makes this really just a type-ahead / autocomplete field, not really a combobox...

Thanks.
Comments: I was able to solve the "final bug" I was having with this feature and have it successfully implemented. I used this thread: https://flexbox.codeplex.com/discussions/251643 (I added the code posted by "Yoannr" AND "jimiscott".) Although, this made an existing bug very apparent. This bug is reproducible with or without the code above. After you have made a selection, click on the Input Box and delete your selection, then (while still in the input box) move the cursor straight over (horizontally) to the arrow and click it. Most of the time, it will just "flash" and not show the results (list items). The reason is, the "blur()" handler on the input box sets a timeout with a delay of 200 milliseconds, then hides the results window. This isn't enough time for the handler to fire and complete before the arrow.click() handler tries to show the results, so the results immediately get "hidden". (The workaround was to click on some other element or the screen, then click on the arrow. This gives the timer enough time to fire the "hideResults()" function, BEFORE you click the arrow.) There is an easy code fix to this bug, though. In the blur() handler for the input element, change the setTimeout(hideResults()) call from 200 milliseconds to 100 milliseconds. That seems to work perfectly.

New Post: Implement Parent/Child Cascading?

sjudkins — Tue, 14 May 2013 14:47:50 GMT

I solved this and fixed a "bug".

I solved the parent/child issue by removing the Div in the OnClick() handler just before adding the new one back (with the filtered data).

I also implemented "keep results", which shows the full list when the arrow is clicked, even after a selection has been made. I used the information from this article:

https://flexbox.codeplex.com/discussions/251643 (I added the code posted by "Yoannr" AND "jimiscott".)

The "bug" I ran in to is if you make a selection, keep the mouse on the drop down arrow and then click again, the delay for hiding the results is too long (200 milliseconds) and ends up firing after your mouse click, so the results get hidden. This "bug" is easily reproducible and happens (with or without the changes I mentioned above). There is an easy fix though. In the blur() handler for the input element, change the setTimeout(hideResults()) call from 200 milliseconds to 100 milliseconds. That seems to work perfectly.

Commented Issue: Show all dropdown options after a selection is made [8999]

sjudkins — Mon, 13 May 2013 19:50:42 GMT

New Post: Implement Parent/Child Cascading?

sjudkins — Thu, 09 May 2013 22:48:04 GMT

How would you suggest I implement a "Parent/Child Cascading" situatoin on a page? I am using ASP.Net and I hacehave the flexbox code working. I have two flexbox controls on the page, each is populated with data. When the user selects an option from one of the drop downs, I need to filter the choices in the other dropdown (and probably unselect if there was something selected and return the control to the "watermark"). I have tried just adding another call to the flexbox function from the OnSelect even handler for the parent, but that adds another control to the page. Is there any way to dynamically remove (not hide, but remove) the child? (I could then call the flexbox function and let it add it...) Or, what other solution would you suggest?

This is a great control. Thanks!

New Post: Line/word wrap in the combo list placing vertical separator in the middle of the next line.

alexxmed — Mon, 15 Apr 2013 23:09:08 GMT

When entries in the combo list are wider than the list vbox, and line/word wrapping is enabled, the vertical separator that is supposed to separate the entries appears in the middle of the next line instead of below the second line of the wrapped entry.
For example:
|_________________|
| This is the first line. |
|_________________|
| This is the second. |
| line. |
| This is the third line.|
|_________________|
| This is the forth line.|

Edited Unassigned: autoCompleteFirstMatch demo doesn't allow spaces [9002]

gunderson — Sat, 13 Apr 2013 23:44:38 GMT

on http://www.fairwaytech.com/flexbox/flexbox-demos#demo1

chrome, os x

I try to type "united states" into the box. When I get to the space the selected text always resets to before the space after I type it. So I can't type past the space in 'united states' and am left with "united arab emerites" in, unable to filter further.

Created Unassigned: autoCompleteFirstMatch demo doesn't allow spaces [9002]

gunderson — Sat, 13 Apr 2013 23:38:20 GMT

on http://www.fairwaytech.com/flexbox/flexbox-demos#demo1

chrome, os x

New Post: Integration with jqgrid

johnny81 — Tue, 26 Feb 2013 11:25:58 GMT

Please check this page: http://techbrij.com/jqgrid-flexbox-jquery-autocomplete-edit

Commented Issue: How to Display multiple flexbox results together [8997]

sorinpostelnicu — Wed, 20 Feb 2013 18:29:00 GMT

I want to create a two flexbox together.

When I am search something with any word, I have to display results with pagination and all functionality together. Is there any solution for this issue.

Please help me out from this task.

Thanks in Advance.

Tejas Savaliya
Comments: What exactly do you mean? Do you want to display them as a list in another section of the page?

Created Issue: JS error in IE8: 'undefined' is null or not an object [9001]

kasimodo — Wed, 23 Jan 2013 10:55:59 GMT

I have the following error in IE8 using query.flexbox 0.9.6.1:

Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0)
Timestamp: Wed, 23 Jan 2013 10:13:22 UTC
Message: 'undefined' is null or not an object
Line: 305
Char: 5
Code: 0

FYI I feed the JSON directly to the FlexBox instead of using a script to retrieve it. Anyway I've made a fix that you can implement if you want to...

replace line 314:

var indexOfMatch = data[o.resultsProperty][i][o.displayValue].toLowerCase().indexOf(params.q.toLowerCase());

by the following block:

var indexOfMatch;
if (data[o.resultsProperty][i] != undefined) {
indexOfMatch = data[o.resultsProperty][i][o.displayValue].toLowerCase().indexOf(params.q.toLowerCase());
} else indexOfMatch = -1;

I hope it helps

New Post: Selected list Page index while click on Arrow

rsolucky — Wed, 23 Jan 2013 07:28:22 GMT

Hi Noah,

First, Click on arrow and Show all records and Then i have moved to 2nd page index.(Screenshot Attached - Screen-1.png)

Second, Then I have selected record (id - 9) which is on page index 2. Then click on Arrow as per Screenshot .Here i am showing whole record instead of Selected record only.(Screenshot Attached - Screen-2.png)

Third, When i am clicking on Arrow then its showing me 1st Index Rather that 2nd index on which my Seleted record is there.So here i want to automatically select index 2..(Screenshot Attached - Screen-3.png)

Waiting for your response.

Thanks,

Ravi.

New Post: Selected list Page index while click on Arrow

rsolucky — Wed, 23 Jan 2013 06:53:49 GMT

Thank you for your reply Noah.

But for that i need to show you screen shot but here i can't attach anything, So would you give me your email id where i can send you these.

Thanks,

Ravi.

New Post: Selected list Page index while click on Arrow

nheldman — Tue, 22 Jan 2013 16:35:22 GMT

I’m not quite sure what you’re trying to achieve. Can you describe in more detail, or provide an example with real data please?

Thanks,

Noah

From: rsolucky [email removed]
Sent: Tuesday, January 22, 2013 4:28 AM
To: Noah Heldman
Subject: Selected list Page index while click on Arrow [flexbox:430413]

From: rsolucky

Hi,

I am Using Flexbox for multiple Column grid in My Application. And When i have selected one record and Then by Clicking on Arrow i want all records and Page Index should be such that that current Selected Value should be Display.

thanks,

Ravi.

New Post: Selected list Page index while click on Arrow

rsolucky — Tue, 22 Jan 2013 12:27:33 GMT

Hi,

thanks,

Ravi.

New Post: No results for callback()

nheldman — Thu, 15 Nov 2012 22:44:11 GMT

Thank you! Good catch on that one.

From: adeluca [email removed]
Sent: Thursday, November 15, 2012 11:47 AM
To: Noah Heldman
Subject: No results for callback() [flexbox:403332]

From: adeluca

First off, amazing library. Thanks for all the work you've done. One small issue I encountered that I hope I have fixed below... In the unminified version, near line 260, there is a block that tests for totalResults being NaN and a paging object. Unfortunately, there is no logical operation within the block for returning a no results message. The modulo of 0/pageSize will never be greater than 0 and so the bit where pages gets incremented before parseInt(++pages) never fires off.

To fix this, I changed this block:

if (isNaN(totalResults) && o.paging) {

                ....

                totalResults = data[o.resultsProperty].length;

                var pages = totalResults / pageSize;

                if (totalResults % pageSize > 0) pages = parseInt(++pages);

to the following:

if (isNaN(totalResults) && o.paging) {

                ....

                totalResults = data[o.resultsProperty].length;

/*  added to correct no results fail - ajd 11/15/2012   */

                if(totalResults == 0) {

                     data[o.totalProperty] = 0;

                     displayItems(data,q); // I can haz no results?

                var pages = totalResults / pageSize;

                if (totalResults % pageSize > 0) {

                     pages = parseInt(++pages);

HTH,

New Post: resetting and passing new data to flexbox

nheldman — Thu, 15 Nov 2012 22:41:51 GMT

Great example, thanks for posting!

From: adeluca [email removed]
Sent: Thursday, November 15, 2012 11:49 AM
To: Noah Heldman
Subject: Re: resetting and passing new data to flexbox [flexbox:53653]

From: adeluca

I got this done by binding some code (in red below) to my reset event:


$(function() {

   var fname= $('#partner_flexbox').closest("form").attr("id")

   doPartner();

   $("#"+fname).bind("reset", function() {

     emptyPartner();

});

   function doPartner() {

           $('#partner_flexbox').flexbox('partner_dropdown', {

               width: 165, queryDelay: 350,

               noResultsText: 'No partners by that name found',

               watermark: 'Enter a partner name',

               minChars: 2,

               paging: { pageSize: 10}

});

   function emptyPartner() {

           $('#partner_flexbox').empty();

           doPartner();

});

The OP wants this to happen when an item is selected. The docs mention that there is an onSelect event:

onSelect: function() {

   $('#ffb7-result')

  .html('You selected' + this.value + ', ' +

  'which has a hidden value of ' +

  $('input[name=ffb7]').val());

Simply make a call to a function like emptyPartner() above only pass it the values in onSelect() as params:

onSelect: function() {

   $('#ffb7-result')

  .html('You selected' + this.value + ', ' +

  'which has a hidden value of ' +

  $('input[name=ffb7]').val());

  emptyPartner( this.value, $('input[name=ffb7]').val() )

New Post: resetting and passing new data to flexbox

adeluca — Thu, 15 Nov 2012 17:59:01 GMT

I got this done by binding some code (in red below) to my reset event:


$(function() {
   var fname= $('#partner_flexbox').closest("form").attr("id") 
   doPartner();
   $("#"+fname).bind("reset", function() {
     emptyPartner();
    });
   function doPartner() {
	   $('#partner_flexbox').flexbox('partner_dropdown', {
	       width: 165, queryDelay: 350, 
	       noResultsText: 'No partners by that name found', 
	       watermark: 'Enter a partner name', 
	       minChars: 2, 
	       paging: { pageSize: 10}
	       });  
   }
   function emptyPartner() {
	   $('#partner_flexbox').empty();
	   doPartner();
   }
});

The OP wants this to happen when an item is selected. The docs mention that there is an onSelect event:

onSelect: function() {  
   $('#ffb7-result')  
  .html('You selected' + this.value + ', ' +  
  'which has a hidden value of ' +  
  $('input[name=ffb7]').val());  
}

Simply make a call to a function like emptyPartner() above only pass it the values in onSelect() as params:

onSelect: function() {  
   $('#ffb7-result')  
  .html('You selected' + this.value + ', ' +  
  'which has a hidden value of ' +  
  $('input[name=ffb7]').val());
  emptyPartner( this.value, $('input[name=ffb7]').val() )
}

New Post: No results for callback()

adeluca — Thu, 15 Nov 2012 14:43:46 GMT

First off, amazing library. Thanks for all the work you've done. One small issue I encountered that I hope I have fixed below... In the unminified version near line 260 there is a test for totalResults being NaN and there being a paging object. Unfortunately, there is no logical operation for returning a no results message.

I changed this block:

if (isNaN(totalResults) && o.paging) {
                ....
                totalResults = data[o.resultsProperty].length;          
                var pages = totalResults / pageSize;
                if (totalResults % pageSize > 0) {
                     pages = parseInt(++pages);
                }

to the following:

if (isNaN(totalResults) && o.paging) {
                ....
                totalResults = data[o.resultsProperty].length;   
/*  added to correct no results fail - ajd 11/15/2012   */
                if(totalResults == 0) { 
                     data[o.totalProperty] = 0;
                     displayItems(data,q); // I can haz no results?
                }       
                var pages = totalResults / pageSize;
                if (totalResults % pageSize > 0) {
                     pages = parseInt(++pages);
                }

HTH,

Commented Issue: Showing Multiple result set, [8998]

mikeyearwood — Thu, 18 Oct 2012 23:09:15 GMT

When i am typeing a flexbox it shows multiple result set which is annoying.
Comments: Hello all. I think this is more than just a low priority item. The speed of the control seems to be negatively impacted by this behavior.

Created Issue: Proposed feature: add onBlur Behavior [9000]

flarpy — Wed, 10 Oct 2012 09:10:34 GMT

When user enters a new item in the box, the onSelect Behavior is redundant. However, in order to validate user input an onBlur Behavior would be good. Of course you can just add your own onBlur handler for the hidden input but that might not be obvious to all users.