flexbox Discussions Rss Feed

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.

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.|

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

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,

New Post: Duplicate/merged results in dropdown

RustedBucket — Tue, 31 Jul 2012 00:25:58 GMT

Hi, got a conundrum that I can't seem to work out. Basically we have a typeahead box that starts querying after the 3rd character is entered. What's happening is the results of each search are being combined and I can't figure out how to stop it. I've tried forcing the PHP code building the JSON results to clear each time but it still happens.

I can see each individual query fire in Firebug and each only returns it's designated 5 results but when the list finishes drawing there might be 10 items in it.

Example.. Searching for Bill

First query select top 5 where %bil%.. json result is correct.

Drop down displays results.

Second query select top 5 where %bill%... json is also correct.

Drop down "might" display all 10 results. Previous 5 plus this 5, but it doesn't do it every time.

Any thoughts??????

New Post: Can not see the web service response in FlexBox

gabay — Tue, 24 Jul 2012 13:00:29 GMT

Hi Noah, thanks for answering.

The web service call is executed when I click the flexbox arrow. Here is the response.

"{\"results\":[{\"id\":\"29\",\"name\":\"Andreani Logistica SA  \"},{\"id\":\"33\",\"name\":\"AstraZeneca SA. \"},{\"id\":\"34\",\"name\":\"FARMACITY SA \"}]}"

For the moment i've solved it by calling the web service with the jquery object, like this

            $.ajax(
            {
              type: "POST",
              url: 'AgentService.asmx/GetAgents',
              success: function(data)
              {
                var json = $.parseJSON(data.text);
                $('#fb').flexbox(json,
                {
                  resultTemplate: '<div class="col1">{id}</div> <div class="col2">{name}</div>',
                  watermark: 'Type to search...',
                  width: 500,
                  onSelect: function()
                  {
                      alert('You selected "' + this.value + '", ' +
                            'which has a hidden value of ' + this.getAttribute('hiddenValue'));
                  }
                });
              }
            });

Then I had to parse the response to JSON, assign it to flexbox and it worked just fine.

Gabay.

nheldman wrote:

You mentioned that your code is being called. When you debug, does the result string contain what you expect it to?

I’m not seeing any code in your web method that grabs what the user typed in (which is available in query string parameter “q”), and searching based on that, but maybe you don’t need that.

Is your data getting serialized into a JavaScript array? Are the “id” and “name” properties being serialized to lowercase? They need to be…

Noah

From: gabay [email removed]
Sent: Monday, July 23, 2012 11:34 AM
To: Noah Heldman
Subject: Can not see the web service response in FlexBox [flexbox:387782]

From: gabay

Hi, i'm trying to fill my flexbox with a web service method from an aspx.

Here is the call to the web service:

        $(function() {

            $('#fb').flexbox('AgentService.asmx/GetAgents', {

                  method : 'post',

                  watermark: 'Type to search...',

                  width: 400,

                  onSelect: function() {

                      alert('You selected "' + this.value + '", ' +

                            'which has a hidden value of ' + this.getAttribute('hiddenValue'));

});

});

When I type a letter in the box, the Web method is executed, but it seems that the results are not being returned to the webpage

Here is my web service code:

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class AgentService : System.Web.Services.WebService

  public AgentService()

    //Uncomment the following line if using designed components

    //InitializeComponent();

  [WebMethod]

  public string GetAgents()

try

      List<Agent> agents = new List<Agent>(workSession.SessionUser.Agents);

      agents.Sort(delegate(Agent a1, Agent a2)

                  return a1.Name.CompareTo(a2.Name);

});

      List<FlexboxItem> results = new List<FlexboxItem>(agents.Count);

      foreach (Agent agent in agents)

        results.Add(new FlexboxItem(agent.Id.ToString(), agent.Name));

      JavaScriptSerializer serializer = new JavaScriptSerializer();

      string s = "{\"results\": " + serializer.Serialize(results) + "}";

      return s;

    } // try

    catch (Exception)

      throw;

    } // catch

Is there anything i'm missing?. Thanks a lot!

New Post: Can not see the web service response in FlexBox

nheldman — Mon, 23 Jul 2012 20:20:01 GMT

You mentioned that your code is being called. When you debug, does the result string contain what you expect it to?

I’m not seeing any code in your web method that grabs what the user typed in (which is available in query string parameter “q”), and searching based on that, but maybe you don’t need that.

Is your data getting serialized into a JavaScript array? Are the “id” and “name” properties being serialized to lowercase? They need to be…

Noah

From: gabay [email removed]
Sent: Monday, July 23, 2012 11:34 AM
To: Noah Heldman
Subject: Can not see the web service response in FlexBox [flexbox:387782]

From: gabay

Hi, i'm trying to fill my flexbox with a web service method from an aspx.

Here is the call to the web service:

        $(function() {

            $('#fb').flexbox('AgentService.asmx/GetAgents', {

                  method : 'post',

                  watermark: 'Type to search...',

                  width: 400,

                  onSelect: function() {

                      alert('You selected "' + this.value + '", ' +

                            'which has a hidden value of ' + this.getAttribute('hiddenValue'));

});

});

When I type a letter in the box, the Web method is executed, but it seems that the results are not being returned to the webpage

Here is my web service code:

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

public class AgentService : System.Web.Services.WebService

  public AgentService()

    //Uncomment the following line if using designed components

    //InitializeComponent();

  [WebMethod]

  public string GetAgents()

try

      List<Agent> agents = new List<Agent>(workSession.SessionUser.Agents);

      agents.Sort(delegate(Agent a1, Agent a2)

                  return a1.Name.CompareTo(a2.Name);

});

      List<FlexboxItem> results = new List<FlexboxItem>(agents.Count);

      foreach (Agent agent in agents)

        results.Add(new FlexboxItem(agent.Id.ToString(), agent.Name));

      JavaScriptSerializer serializer = new JavaScriptSerializer();

      string s = "{\"results\": " + serializer.Serialize(results) + "}";

      return s;

    } // try

    catch (Exception)

      throw;

    } // catch

Is there anything i'm missing?. Thanks a lot!

New Post: Can not see the web service response in FlexBox

gabay — Mon, 23 Jul 2012 14:23:17 GMT

Hi, i'm trying to fill my flexbox with a web service method from an aspx.

Here is the call to the web service:

        $(function() {
            
            $('#fb').flexbox('AgentService.asmx/GetAgents', {
                  method : 'post',
                  watermark: 'Type to search...',
                  width: 400,
                  onSelect: function() {
                      alert('You selected "' + this.value + '", ' +
                            'which has a hidden value of ' + this.getAttribute('hiddenValue'));
                  }
            });
            
        });

When I type a letter in the box, the Web method is executed, but it seems that the results are not being returned to the webpage

Here is my web service code:

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class AgentService : System.Web.Services.WebService
{

  public AgentService()
  {

    //Uncomment the following line if using designed components 
    //InitializeComponent(); 
  }

  [WebMethod]
  public string GetAgents()
  {
    try
    {
      List<Agent> agents = new List<Agent>(workSession.SessionUser.Agents);
      agents.Sort(delegate(Agent a1, Agent a2)
                {
                  return a1.Name.CompareTo(a2.Name);
                });

      List<FlexboxItem> results = new List<FlexboxItem>(agents.Count);
      foreach (Agent agent in agents)
      {
        results.Add(new FlexboxItem(agent.Id.ToString(), agent.Name));
      }

      JavaScriptSerializer serializer = new JavaScriptSerializer();
      string s = "{\"results\": " + serializer.Serialize(results) + "}";
      return s;
    } // try
    catch (Exception)
    {
      throw;
    } // catch
  }
}

Is there anything i'm missing?. Thanks a lot!

New Post: Apply jQuery skins like Redmond to Flexbox

sun21170 — Sat, 07 Jul 2012 04:20:18 GMT

Is it possible to apply jQuery Redmond skin to flexbox when used as a combobox? If yes, then could you please provide some sample code on how to do it? Thanks, Sunil

New Post: How to managed search result oreder in flexbox when data is a JSON object with an array

tejas14883 — Wed, 04 Jul 2012 10:31:31 GMT

Hello,

I am grateful to use this flexbox. I want to ask something which is I am facing as query.

First I was getting search data from json (using cgi coding) , and I just marked it takes a too much time to retrieve json data from database. then after I have got the all the json data and made the object of the json data and put it into the variable and called this variable in to the flexbox.

Both of the method 1st is flexbox called through 'URL'

1) e.g: $(‘#ffb10′).flexbox('/hotels/cgi-bin/get_data.cgi?');

and 2nd is through 'variable' data is a JSON object with an array of ALL countries which I got from my database

2) e.g: $(‘#ffb4′).flexbox(countries)

So both are displaying result in different order.

I want to implement 2nd type and want to displaying result order which I getting result order when I used 1st type of calling 'URL'

So please suggest me how to managed the search result order when I am using 2nd variable type.

Please help me out from this issue.

Thanks & Regards,

Tejas Savaliya

New Post: How to pick up the displayed value after selection made

nheldman — Wed, 16 May 2012 21:45:08 GMT

Thanks for replying with your solution, and sorry I wasn’t able to get back to you sooner!

Cheers,

Noah

From: ilagi [email removed]
Sent: Wednesday, May 16, 2012 2:06 PM
To: Noah Heldman
Subject: Re: How to pick up the displayed value after selection made [flexbox:355512]

From: ilagi

Figured it out. I just simply need to use this.value after the onSelect to pick up the displayed value.

New Post: How to pick up the displayed value after selection made

ilagi — Wed, 16 May 2012 21:05:42 GMT

Figured it out. I just simply need to use this.value after the onSelect to pick up the displayed value.