3

I am new to meteor and jquery-layout.

I am struggling to see how to make the two work together. I have added the jquery and jquery-layout packages. I believe I need to ask jQuery layout to layout the page at some stage, but when? If I do it in the HTML page, I get the message "/ UI Layout Initialization Error / The center-pane element does not exist. /The center-pane is a required element.". I think this is because meteor hasn't yet loaded any templates. The example is based on a meteor default app. I added an extra template to go in the east pane. And pasted in the jQuery layout script.

So where, when and how should I layout my page?

  <head>
    <title>Layouts</title>
    <script type="text/javascript">
      $(document).ready(function () {
        $('body').layout({ applyDemoStyles: true });
      });
  </script>   
  </head>

  <body>
    {{> navigation}}
    {{> hello}}
  </body>

  <template name="navigation">
  <div class="ui-layout-east">
    <p>Navigation stuff here</p>
  </div>
  </template>

  <template name="hello">
  <div class="ui-layout-north">
    <h1>Hello World!</h1>
        {{greeting}}
    <input type="button" value="Click" />
  </div>
  </template>
Mike Wilson
  • 31
  • 3

1 Answers1

2

Actually the problem is just as the error says: the center pane is a required element. So instead of ui-layout-east and ui-layout-north, try ui-layout-east and ui-layout-center:

<template name="hello">
  <div class="ui-layout-center">
    <h1>Hello World!</h1>
        {{greeting}}
    <input type="button" value="Click" />
  </div>
</template>

Also, the proper place to initialize the layout is within a template's .rendered event handler. So try restructuring your code such that there's one master template, such as root in the example below, and then put your jQuery initialization code inside Template.root.rendered (line 2 of the .js file below). Don't put any JavaScript inside <head> and don't use $(document).ready:

layout.html (assuming default filenames)

<head>
  <title>Layouts</title>
</head>

<body>
  {{> root}}
</body>

<template name="root">
  {{> navigation}}
  {{> hello}}
</template>

<template name="navigation">
  <div class="ui-layout-east">
    <p>Navigation stuff here</p>
  </div>
</template>

<template name="hello">
  <div class="ui-layout-center">
    <h1>Hello World!</h1>
        {{greeting}}
    <input type="button" value="Click" />
  </div>
</template>

layout.js

if (Meteor.isClient) {
  Template.root.rendered = function() {
    $('body').layout({ applyDemoStyles: true });
  };
}
Geoffrey Booth
  • 7,168
  • 5
  • 35
  • 42
  • Thanks this has been helpful, certainly this show the panes but for me they aren't resizable / drag-able. Did this work for you? I've tried adding jqueryui and using the blaze release but no luck. I'm not getting any errors so I'm finding this hard to debug. – Paul Young Mar 17 '14 at 14:08
  • 1
    It was a long time ago, I don't remember. I would suggest trying to combine all the jQuery Layout stuff into the same template, rather than the separate templates above (`navigation` and `hello`) and see if that fixes it, though I doubt it will. Are you sure the scripts are loaded in the right order? jQuery should be loaded by Meteor itself, so just make sure that jQuery UI and other dependencies are loaded in order before Layout. – Geoffrey Booth Mar 17 '14 at 15:52
  • Thank you Geoffrey, it's working now. I started afresh loading first the jqueryui package (not the "jquery-ui" one) from atmosphere (using "mrt add jqueryui") and then the layout package that comes with meteor (using "mrt add jquery-layout"). I assume it was a package load order problem certainly in the working one layout comes after the ui in the .meteor/packages file. Thanks for taking the time to help! – Paul Young Mar 20 '14 at 01:34