EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: CosmicRider on February 18, 2014, 09:56:03 AM

Title: Backend developer treading UI waters - HELP needed
Post by: CosmicRider on February 18, 2014, 09:56:03 AM

I have a EasyUI Tab Panel
Inside a Tab Pane I have several EasyUI Panels, each representing a set of data, contained in labels.
I am using RAILS

I have a backend service that is sending data for a panel back in JSON
Question: How do I update the panel labels with the JSON data?

As an Example:
EasyUI TabPanel id="foo"
EasyUI Panel inside of "foo" has labels:
A
B
C

JSON data has

A: Apple
B: Banana
C: Cherry

Code example greatly appreciated!
thanks in advance

Title: Re: Backend developer treading UI waters - HELP needed
Post by: stworthy on February 19, 2014, 01:09:14 AM

Find an element and you can use '.text()' or '.html()' to update its value. Here is an example shows how to do this.

Code:

<div id="foo" class="easyui-tabs" style="width:600px;height:300px">
    <div title="Tab1">
        <p><label id="l-A"></label></p>
        <p><label id="l-B"></label></p>
        <p><label id="l-C"></label></p>
    </div>
</div>
<script type="text/javascript">
$(function(){
    var data = {
        A: 'Apple',
        B: 'Banana',
        C: 'Cherry'
    };
    for(var k in data){
        var v = data[k];
        $('#l-'+k).html(v);
    }
});
</script>