Updating a jQuery flexbox

Question

Is there a way to update the results of a jQuery flexbox with a JSON array? I have already created the flexbox, and I want to update its results.

I initialize my flexbox as follows:

$('#myFlex').flexbox({  
        "results": [  
            { "id": "1", "name": "Ant" },  
            { "id": "2", "name": "Bear" }
        ]}, 
    {  
    allowInput: false,  
    paging: false,  
    maxVisibleRows: 8  
});

This is taken from the documentation, and it works. Suppose I want to update the elements without reinitializing the flexbox. How can this be done?

score 3 · Accepted Answer · answered Jun 06 '11 at 03:12

3

Ok, so I hacked myself a solution!

Flexbox sets the data through the variable o.source upon initialization.

What I did was store (and access) o.source as jQuery .data(). This allows me to view/change the value.

answered Jun 06 '11 at 03:12

Ben G

26,091
34
103
170

score 1 · Answer 2 · answered Jun 25 '12 at 00:34

While experimenting with this same problem, I found out that jQuery Flexbox stores the data passed as a reference. This means that you can do this:

var data = {results: [{id:1,name:'Ant'},{id:2,name:'Bear'}], total:2};
$('#myFlex').flexbox(data);

// ...

data.results[data.total] = {id:3,name:'Cat'};
data.total++;

with the stock plugin and it will work. The only thing to keep in mind is that you must remember to also update the .total property when adding new elements.

score 0 · Answer 3 · answered Jun 05 '11 at 04:39

0

You've not specified how you've initialized flexbox or how you're getting the data back. However, according to the documentation and the demos, the JSON property named results is used to get the rows of data when you've specified a URL. This should all happen automatically. For example (straight from the docs):

$.ready(function() {  
    // results.aspx is the page that returns json data in the expected format  
    $('#fb').flexbox('results.aspx');   
});

Sample response:

{"results":[  
    {"id":1,"name":"Ant"},   
    {"id":2,"name":"Bear"},  
    {...} // more results here...  
]}

Alternatively, you should be able to use resultsProperty to specify a different property name.

answered Jun 05 '11 at 04:39

no.good.at.coding

20,221
2
60
51

"you should be able to use resultsProperty to specify a different property name." How can I do this? $("#myid").results(results) doesnt work (resultsProperty == 'results') – Ben G Jun 05 '11 at 19:58
@babonk Can you post 1. How you're initializing flexbox and 2. What your response looks like? This should all be happening automatically. – no.good.at.coding Jun 06 '11 at 00:17
Updated the question, tell me if there's any more details you want and I can add them – Ben G Jun 06 '11 at 00:28
@babonk Ah, I see - you're using the static option. AFAICT, that data cannot be updated. The only way to allow for updating is to use a URL which should point to a server-side resource which responds with the JSON data. – no.good.at.coding Jun 06 '11 at 00:40
I guess I'm going to try delve into the plugin myself.. Will post my answer when done – Ben G Jun 06 '11 at 01:21

Updating a jQuery flexbox

3 Answers3