1

I am pulling products from the iTunesConnect using the in-app-purchase cordova plugin and want to show the valid products (title) in a radio button list.

The store.('product')update function renders this (I don't know why they are shown twice?!)

2015-12-27 10:59:12.158 paypal3drupal[1059:18480] 200 - OK
2015-12-27 10:59:12.896 paypal3drupal[1059:18480] product_item:     {"id":"120points","alias":"120  Points","type":"consumable","state":"valid","title":"120 Points","description":"Get 120 points for asking questions","price":"€10,99","currency":"EUR","loaded":true,"canPurchase":true,"owned":false,"downloading":false,"downloaded":false,"transaction":null,"valid":true}
2015-12-27 10:59:12.897 paypal3drupal[1059:18480] product_item: {"id":"120points","alias":"120 Points","type":"consumable","state":"valid","title":"120 Points","description":"Get 120 points for asking questions","price":"€10,99","currency":"EUR","loaded":true,"canPurchase":true,"owned":false,"downloading":false,"downloaded":false,"transaction":null,"valid":true}
2015-12-27 10:59:12.897 paypal3drupal[1059:18480] product_item: {"id":"200points","alias":"200 Points","type":"consumable","state":"valid","title":"Points 200","description":"Get 200 points for everything","price":"€15,99","currency":"EUR","loaded":true,"canPurchase":true,"owned":false,"downloading":false,"downloaded":false,"transaction":null,"valid":true}
2015-12-27 10:59:12.897 paypal3drupal[1059:18480] product_item: {"id":"200points","alias":"200 Points","type":"consumable","state":"valid","title":"Points 200","description":"Get 200 points for everything","price":"€15,99","currency":"EUR","loaded":true,"canPurchase":true,"owned":false,"downloading":false,"downloaded":false,"transaction":null,"valid":true}
2015-12-27 10:59:12.900 paypal3drupal[1059:18480] \o/ STORE READY \o/

The cordova example renders the product like this

// When any product gets updated, refresh the HTML.
store.when("product").updated(function (p) {
    app.renderIAP(p);
});

and

app.renderIAP = function(p) {
var elId = p.id.split(".").pop();
var el = document.getElementById(elId + '-purchase');
if (!el) return;
if (!p.loaded) {
    el.innerHTML = '<h3>...</h3>';
}
else if (!p.valid) {
    el.innerHTML = '<h3>' + p.alias + ' Invalid</h3>';
}
else if (p.valid) {
    var html = "<h3>" + p.title + "</h3>" + "<p>" + p.description + "</p>";
    if (p.canPurchase) {
        html += "<div class='button' id='buy-" + p.id + "' productId='" + p.id + "' type='button'>" + p.price + "</div>";
    }
    el.innerHTML = html;
    if (p.canPurchase) {
        document.getElementById("buy-" + p.id).onclick = function (event) {
            var pid = this.getAttribute("productId");
            store.order(pid);
        };
    }
}

How can I dynamically target and populate a radio button widget in Drupalgap? More specifically, how can I populate the radio button options and values (option value = product_item_id, option label = product_item.title)?

Based on the form documents example I have a custom page with static values that displays the form with a submit button.

/**
 * Implements hook_menu().
 */

function my_module_menu() {
   try {
var items = {};
items['in-app'] = {
  title: 'get points',
  page_callback: 'drupalgap_get_form',
  page_arguments: ['my_module_payment_form']

};
  return items;
}
catch (error) {
console.log('my_module_menu - ' + error);
}

}

/**
* Define the form.
*/
function my_module_payment_form(form, form_state) {
try {
form.elements['points'] = {
  type: 'radios',
  title: 'Points',
  options: {
    0: 'cancel',  
    70: '70 Points', // should look something like product_item.id[0] : product_item.title[0] 
    120: '120 Points',
    250: '250 Points'
    },
    default_value:0,
    required: true
};
form.elements['submit'] = {
  type: 'submit',
  value: 'Buy points'
};
return form;
}
catch (error) { console.log('my_module_payment_form - ' + error); }
}


/**
 * Define the form's submit function.
*/
function my_module_payment_form_submit(form, form_state) {
   try {
     drupalgap_alert('You selected ' + form_state.values['points'] + '!');
}
  catch (error) { console.log('my_module_payment_form_submit - ' +    error); }
}

1 Answer 1

2

Use a pageshow callback:

function my_pageshow() {
  // Retrieve the data from the server
  // During the retrieval's success callback, place the items into the empty radio button widget.
}

You can leave the radio buttons empty in your form builder function, then handle the dynamic population of the radio buttons with the pageshow callback.

2
  • Thx for the tipps, Tyler! I have added a pageshow callback and get the data from itunesconnect. But how can I then populate the radio widget? I have tried hook_form_alter, but it doesn't work. the products array (containing all product items) is empty when the hook is called. Any few more words of wisdom?
    – user24957
    Dec 30, 2015 at 12:58
  • You'll use jQuery to dynamically add radio buttons to the widget, and at the very end you'll use jQuery Mobile to "refresh" it: $('#my-radios').trigger('create'); Dec 30, 2015 at 14:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.