0

I cannot reproduce the grid widget. The page shows nothing except the title. Here is my code:

/**
 * Implements hook_menu()
 */
function test_grid_menu() {
  var items = {};
  items['test_grid'] = {
    title:'test grid',
    page_callback: 'test_grid_page',
  };
  return items;
}


function test_grid_page() {

var content = {};
content['my_grid'] = {
  theme: 'jqm_grid',
  columns: 2,
  items: [
    bl('Foo', 'foo'),
    bl('Bar', 'bar'),
    bl('Baz', 'baz'),
    bl('Chop', 'chop')
  ]
};
return content;
}

I also tried to put the theme('jqm_grid', ...) in the page_callback, but it does not work.

function test_grid_page() {

var content = {};
content['my_grid'] = {
  theme: 'jqm_grid',
  columns: 2,
  items: [
    bl('Foo', 'foo'),
    bl('Bar', 'bar'),
    bl('Baz', 'baz'),
    bl('Chop', 'chop')
  ]
};
return content;

var html = theme('jqm_grid', {
  columns: 2,
  items: [
    bl('Foo', 'foo'),
    bl('Bar', 'bar'),
    bl('Baz', 'baz'),
    bl('Chop', 'chop')
  ]
});
return html;

}

I place the jQuery Block code in the page_callback. The page display is fine as expect, but the linking is a problem.(cannot reach the localhost node) It seems this can only give good display but without the function. (in my following code, search and the linking have no function).

function test_grid2_page() {

var  html = '<div><form><label for="search-1">Search:</label>';
     html += '<input type="search" name="search-1" id="search-1" value=""></form></div>';
     html += '<div class="ui-grid-b">';
     html += ' <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:90px"><a href="javascript:drupalgap_goto("node/966");">Foo</a></div></div>';
     html += ' <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:90px">Bar</div></div>';
     html += ' <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:90px">Baz</div></div>';
     html += ' <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:90px">Chop</div></div>';
     html += ' <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:90px">Computer</div></div>';
     html += ' <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:90px">Wine</div></div>';
     html += '</div>';
return html;
}

I have fixed the linking using l(...) and bl(...), but I would like my buttons fill all the grid. The name of the button also out of the range, so it just show partially. Here is the code and result:

var  html = '<div><form><label for="search-1">Search:</label>';
     html += '<input type="search" name="search-1" id="search-1" value=""></form></div>';
     html += '<div class="ui-grid-b">';
     html += ' <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:90px">';
     html += bl('Foo', 'node/966', {attributes:{'data-icon':'action'}});
     html += '</div></div>';
     html += ' <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:90px">';
     html += bl('Bar', 'node/1028', {attributes:{'data-icon':'action'}});
     html += '</div></div>';
     html += ' <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:90px">';
     html += bl('Baz', 'node/1021', {attributes:{'data-icon':'action'}});
     html += '</div></div>';
     html += ' <div class="ui-block-a"><div class="ui-bar ui-bar-a" style="height:90px">';
     html += bl('Chop', 'node/1027', {attributes:{'data-icon':'action'}});
     html += '</div></div>';
     html += ' <div class="ui-block-b"><div class="ui-bar ui-bar-a" style="height:90px">';
     html += bl('Computer', 'node/1021', {attributes:{'data-icon':'action'}});
     html += '</div></div>';
     html += ' <div class="ui-block-c"><div class="ui-bar ui-bar-a" style="height:90px">';
     html += bl('Wine', 'node/1025', {attributes:{'data-icon':'action'}});
     html += '</div></div>';
     html += '</div>';
return html;

enter image description here

9
  • This is probably better suited for the GitHub for DrupalGap. At a glance this looks like a PHP question. – Kevin Aug 1 '17 at 17:55
  • It's JS @Kevin but you might be right about it being better suited to the GitHub queue – Clive Aug 1 '17 at 18:18
  • Yeah that is what I meant - which is why I deleted my answer. – Kevin Aug 1 '17 at 21:19
  • thanks you guys. After lots of experiments, I have found a way to do it by directly return the jQuery code in the page_callback. – artphys Aug 2 '17 at 4:26
  • 1
    @tyler I meant it seemed like it might be JS problem territory rather than Drupal-centric. DrupalGap questions are of course very welcome here – Clive Aug 4 '17 at 17:51
1

@Clive, thank you for confirming, and for your efforts. @artphys, try the latest dev snapshot, jqm_grid is definitely supported: https://raw.githubusercontent.com/signalpoint/DrupalGap/7.x-1.x/bin/drupalgap.min.js

2
  • I replaced bin/drupalgap.js and bin/drupalgap.min.js with the new ones, the code using jqm_grid still does not work. So I tried to replace all the directory of mobile-app with new Drupalgap-7.x-1.x and keep my own app/setting.js and modules, I cannot even display the original dashboard. It only shows the picture of Drupalgap in the centre and nothing eles. Did I miss somethings? – artphys Aug 7 '17 at 0:16
  • I replaced bin/drupalgap.min.js with the new one, and modified index.html to '<!-- DrupalGap --> <script type="text/javascript" charset="utf-8" src="bin/drupalgap.min.js"></script>'. The grid widget from the document starts to work! Thank you. – artphys Aug 8 '17 at 0:10
0

Thanks to Tyler. I am giving more detail of the solution.

First download the new drupalgap.min.js from https://raw.githubusercontent.com/signalpoint/DrupalGap/7.x-1.x/bin/drupalgap.min.js and place it in the bin directory.

Modified the index.html where originally <!-- DrupalGap --> <script type="text/javascript" charset="utf-8" src="bin/drupalgap-7.0.2.min.js"></script> to the new drupalgap.min.js.

Then the grid widget from the drupalgap document http://docs.drupalgap.org/7/Widgets/Grid_Widget starts to work! Both Render Array and theme('jqm_grid', ...) can successfully do it. Just pick one. The code below is using render array.

/**
 * Implements hook_menu()
 */
function test_grid2_menu() {
  var items = {};
  items['test_grid2'] = {
    title:'test grid2',
    page_callback: 'test_grid2_page',
  };
  return items;
}


function test_grid2_page() {

var content = {};
content['my_grid'] = {
  theme: 'jqm_grid',
  columns: 2,
  items: [
    bl('Foo', 'foo'),
    bl('Bar', 'bar'),
    bl('Bar', 'bar'),
    bl('Baz', 'baz'),
    bl('Chop', 'chop')
  ]
};
return content;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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