开发者

Updating a jQuery flexbox

开发者 https://www.devze.com 2023-03-10 23:45 出处:网络
Is there a way to update the results of a jQuery flexbox with a JSON 开发者_如何学Goarray? I have already created the flexbox, and I want to update its results.

Is there a way to update the results of a jQuery flexbox with a JSON 开发者_如何学Goarray? 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?


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.


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.


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号