Polymer Load Product Page data from JSON


Working with an e-commerce store application with polymer I'm loading products array using polymer core-ajax and using core-animated pages to display product thumbnail and product detail page (full view) but I only wanted to load the product details when clicking on each product thumb, How can I do this

Find the HTML

<pre class="snippet-code-html lang-html prettyprint-override"><div id="article-content" > <template is="auto-binding" id="page-template" > <core-ajax id="ajaxpolo" auto url="./json/products.json" handleAs="json" on-core-response="{{handleResponse}}" response="{{headerList}}" on-core-response="{{postsLoaded}}"> </core-ajax> <core-animated-pages id="fpages" flex selected="{{$.polo_cards.selected}}" on-core-animated-pages-transition-end="{{transitionend}}" transitions="cross-fade-all slide-from-right"> <section vertical layout> <div id="noscroll" fit hero-p> <div id="container" flex horizontal wrap around-justified layout cross-fade > <section on-tap="{{selectView}}" id="polo_cards" > <template repeat="{{item in headerList}}"> <div class="card" vertical center center-justified layout hero-id="item-{{item.id}}" hero?="{{$.polo_cards.selected === item.id || lastSelected === item.id }}" > <span cross-fade hero-transition style="">{{item.name}}</span></div> </template> </section> </div> </div> </section> <template repeat="{{item in headerList}}"> <section vertical layout> <div class="view" flex vertical center center-justified layout hero-id="item-{{item.id}}" hero?="{{$.polo_cards.selected === item.id || $.polo_cards.selected === 0}}" > <core-icon-button class="go_back" icon="{{$.polo_cards.selected != 0 ? 'arrow-back' : 'menu'}}" on-tap="{{goback}}"></core-icon-button> {{item.name}} <span cross-fade class="view-cont" style="height:1000px; overflow:scroll;"></span></div> </section> </template> </core-animated-pages> </template>


first you would set the auto attribute of core ajax to false. auto="false" that would stop core-ajax from grabbing data by it's self. then set up a on-tap or on-click attribute on the element you want to be the click / tap handler. on-tap="{{getThem}}" then create the function.

getThem: function () { this.$.ajaxpolo.go(); }

that should get it. hope it helps.

edit: you will want to grab a few more things with your event. on the click / tap handler add the id of the item you wish to get to a generic attribute. (stay away from normal attributes. ie id, title and so forth) dataId I will call it.

<div on-tap="{{getThem}}" dataId="{{product_id}}"></div>

then in your function you get a few more things with the event as i said before.

getThem: function (event, detail, sender) { var id = sender.attributes.dataId.value; // do something with id }

i just realized i may have misunderstood when you were talking about php. sorry.


  • Loading indicator with dojo XHR requests
  • Interpret Json response as plain text [duplicate]
  • How we can access the array objects of javascript passing through ajax in java?
  • How to catch error in Observable.forkJoin(…)?
  • The endpoint reference (EPR) for the Operation not found
  • Polymer 1.0 iron-ajax call is made but on-response does not fire and the data isn't bound
  • grep 3 latest occurences and some lines around the occurence
  • HALF_PTR Windows data type
  • JQuery .html() remove line break on IE 8
  • Play WS (2.2.1): post/put large request
  • Android fill_parent issue
  • FileReader+canvas image loading problem
  • Pass value from viewmodel to script in zk
  • Using $this when not in object context
  • Sails.js/waterline: Executing waterline queries in toJSON function of a model?
  • Deselecting radio buttons while keeping the View Model in synch
  • Getting last autonumber in access
  • Different response to non-authenticated users and AJAX calls
  • Counter field in MS Access, how to generate?
  • DotNetZip - Calculate final zip size before calling Save(stream)
  • Incrementing object id automatically JS constructor (static method and variable)
  • How to check if every primary key value is being referenced as foreign key in another table
  • Can I have the cursor start on a particular column by default in jqgrid's edit mode?
  • jquery mobile loadPage not working
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Circular dependency while pushing http interceptor
  • Is there a mandatory requirement to switch app.yaml?
  • How to get icons for entities from eclipse?
  • File upload with ng-file-upload throwing error
  • How to delete a row from a dynamic generate table using jquery?
  • ExecuteAsync RestSharp to allow backgroundWorker CancellationPending c#
  • json Serialization in asp
  • AngularJs get employee from factory
  • Rails 2: use form_for to build a form covering multiple objects of the same class
  • Load html files in TinyMce
  • Free memory of cv::Mat loaded using FileStorage API
  • How to set the response of a form post action to a iframe source?
  • Change div Background jquery
  • How to stop GridView from loading again when I press back button?
  • Is it possible to post an object from jquery to bottle.py?