This project is read-only.

resetting and passing new data to flexbox

Apr 17, 2009 at 4:20 PM
At the risk of sounding ignorant... how would one go about resetting the flexbox and passing it new data? I've got a scenario where upon selecting an item in the flexbox I would like to record that selection in a div on the page (already got that going) and repopulate the flexbox with new data. In trying to do so I just get a new flexbox next to the first one.

Thanks
Sep 7, 2009 at 11:56 AM

Easiest is to call an empty() on the div before calling the FlexBox constructor again.

 

So if you have

<div id="test"></div>

then your code would be:

$("#test").empty();

$("#test").flexbox(.....);

Nov 15, 2012 at 5:59 PM
Edited Nov 15, 2012 at 7:46 PM

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() )
}
 
Nov 15, 2012 at 10:41 PM

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() )
}