How Do I react to an ajax call, populate a card with items or a list with entries on a successful ajax/json response? ... Having a hard time with this one.

[actcont pr]

Hoi. For two days now I'm trying to correctly and successfully react to a successful ajax call in Polymer. I don't seem to get the hang of it. Data Binding seems to be of no use, since it doesn't react to the updated variable. Or am I misssing something in the code here? Have I got my scopes wrong? ... Some hints would be helpful. Commented code below

[...] //opening element, styles (this whole element is practially the main app)

<core-scaffold id="core_scaffold">

<core-header-panel mode="seamed" id="core_header_panel" navigation flex>

<core-toolbar id="core_toolbar">

<core-icon icon="av:equalizer"></core-icon>

<b>ANL</b>

</core-toolbar>

<core-menu valueattr="label" id="core_menu" theme="core-light-theme" selected="0">

<core-item

id="core_item1"

icon="assessment"

label="Charts"

on-tap="{{showCharts}}"

horizontal center layout

></core-item>

<core-item

id="core_item2"

icon="settings-applications"

label="Settings"

on-tap="{{showSettings}}"

horizontal center layout

></core-item>

<core-item

id="core_item3"

icon="view-list"

label="Lists"

on-tap="{{showLists}}" //this stuff works. Funktions below are called successfully upon tabl

horizontal center layout

></core-item>

</core-menu>

</core-header-panel>

<div id="div" tool>Analysis</div>

<core-pages selected="0" selectedindex="0" notap id="main_pages">

<section id="chartsPage">Charts Page</section>

<section id="settingsPage">Settings Page</section>

<section id="listsPage" active>

Lists Page

<core-ajax

url="../ajax-connect.php?action=listLocalSourceNamed"

handleAs="json"

auto

on-core-response="{{handleResponse}}" //same here. All ok. handleResonse is called.

></core-ajax>

//Here it comes. The Card is my 'list'.

//Want to itereate an object (adding items per entry) comming back in JSON upon ajax success inside it (this doesn't work):

<core-card id="core_card" layout vertical>

<template bind="{{listData}}" repeat="{{item, itemIndex in listData}}"> // added a template around this one. I want to repeat Items per entry in array. ... Does this work?

<core-item id="core_item" icon="polymer" label="{{item.source}}" horizontal center layout>{{itemIndex}}</core-item> //my core item thingie I want to repeat

</template>

</core-card>

</section>

</core-pages>

</core-scaffold>

</template>

<script>

var listData = ""; // Defining the va

Polymer(

'traffimon-main',

{

showCharts:function(){

this.$.main_pages.selected = 0;

},

showSettings:function()

{

this.$.main_pages.selected = 1;

},

showLists:function()

{

this.$.main_pages.selected = 2;

},

handleResponse:function(data)

{

//console.debug(data.detail.response); // Here's the first thing that doesn't feel right.

// I have to dig into data.detail.response to get my JSON.

// Looks as if there's some utility stuff in Polymer for handling this which I'm not using. True? ... If so, which is it? how to I use it? Examples?

listData = data.detail.response; // listData get's its Object, but the above doesn't react. No list to be seen. No errors either.

}

}

);

</script>

</polymer-element>

I've probably got a few things screwed up here, I'd be glad for some help.

Thanks for Polymer and keep up the good work!

- P. (Team Active Content)

[Daniel Llewellyn]

As far as my limited understanding goes, there's two different approaches you can take. The first is the declarative way where everything is wired-up for you, and the second is via an on-response method like you've tried.

First method:

add a response attribute to your core-ajax element to wire up automatic data-binding.

<core-ajax
url="../ajax-connect.php?action=listLocalSourceNamed"
handleAs="json"
auto

response="{{listData}}"
></core-ajax>

Second method:

You've nearly got this method correct, but your listData variable is outside the scope of your element.

handleResponse:function(data)
{
this.listData = data.detail.response;
}

it's advisable to use a created() function to pre-declare the listData variable with an empty array. So alongside your handleResponse() function you need something like:

created:function()

{

this.listData = [];

}

Follow Polymer on Google+: plus.google.com/107187849809354688692
---
You received this message because you are subscribed to the Google Groups "Polymer" group.
To unsubscribe from this group and stop receiving emails from it, send an email to polymer-dev...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/polymer-dev/498203b7-8766-402d-b710-cf835fb122bf%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Daniel Llewellyn

Bowl Hat

t: 07500 968 611

[actcont pr]

BINGO! The first one hit the spot.

Trying the second one out later.

Thanks for the help!

[actcont pr]

A few more questions:

• Which automatically called functions are there? I can't find a list of them.
  
• I presume displaying a load-spinner and then turning it off would be done with the second function, an own handleResponse function, correct? Or is there utility stuff for that aswell?