CODEWITHSUNDEEP
polymer-2.x
Johan Byrén
Johan Byrén

Reputation: 918

Polymer 2. Change value on other html-page (iron-page) after iron-ajax response

When I change a page with iron-page i want to set the values on my new page. The properties have the correct values, but the html does not update correctly.

Here is my page. The orderconfirmation values is correct value when I switch to this page. Values in <td> is still empty string tho. 

<dom-module id="pn-bookpickup-confirmation">
<template>
 <style include="main-styles">
</style>
<div class="confirmation-wrapper">
  <h3 class="center-header">{{localize("thankYou")}}</h3>
   <table>
     <tr>
      <td>{{localize("orderReference")}}:</td>
      <td class="font-weight-bold" id="orederRefId">{{orderconfirmation.orderreference}}</td>
    </tr>
  </table>
</div>
</template>
 <script>
 Polymer({
  is: "pn-bookpickup-confirmation",
  behaviors: [
    PnLocalizeBehavior
  ],
  properties: {
    language: {
      type: String,
      notify: true
    },
    orderconfirmation: {
      type: Object,
      notify: true,
      value: function () {
        return {
          pickuptime: "",
          orderreference: ""
        }
      }
     },
    },
   });
  </script>
 </dom-module>

And here in my main-page where I do the switch to the other page after I set the correct values: 

  handleResponse: function (data) {
    console.log(data.detail.response);
    var response = data.detail.response.Item;

    this.orderconfirmation.orderreference = response.order.orderReference;
    this.orderconfirmation.pickuptime = response.order.operationDate; 
    this.selectedpage = "booking-confirmation";
  },

So i want to change the orderconfirmation values in the HTML when I reseved the data. Anyone who know how I should handle this? Thank you

Upvotes: 2

Views: 78

Answers (1)

Cappittall
Cappittall

Reputation: 3441

Information you provided I recommend to try : this.set this.set('orderconfirmation.orderreference', response.order.orderReference); this.set('orderconfirmation.pickuptime ', response.order.operationDate);

use the set method to make an observable change to a subproperty.

https://www.polymer-project.org/2.0/docs/devguide/model-data

Upvotes: 2

Related Questions