Customing a jLayout grid (jQuery)
<p>I am using jQuery and jLayout to configure a layout. However, I am trying to customise the layout using values provided via input.</p>

<p>The problem I have is in the following code:</p>

<pre><code>jQuery(function($)
{               
    $('#create').click(function(){
            var rows = $('#rows').val();
            var cols = $('#cols').val();

            //rows = 2;
            //cols = 2;

            $('#container').layout({
                    type: 'grid',
                    rows: rows,
                    columns: cols,
                    resize: false
            });
    });
});
</code></pre>

<p>What should happen is that I provide two values via the [rows]/[cols] input fields and when the [create] button is clicked the [container] div is formatted with the layout.</p>

<p>If I specify values in the input fields and click create it does perform the formatting, but it does not work correctly. However if I manually set the values of the rows/cols variable the formatting works correctly (see the commented code above).</p>

<p>What is going wrong for the input values to now work?</p>

<p>Here is the code:</p>

<pre><code>&lt;!doctype html&gt;
    &lt;head&gt;
        &lt;title&gt;jLayout Examples&lt;/title&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="jquery.sizes.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="jlayout.grid.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="jlayout.flexgrid.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="jlayout.flow.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="jlayout.border.js"&gt;&lt;/script&gt;
        &lt;script type="text/javascript" src="jquery.jlayout.js"&gt;&lt;/script&gt;        
        &lt;script type="text/javascript"&gt;
            jQuery(function($)
            {               
                $('#create').click(function(){
                    var rows = $('#rows').val();
                    var cols = $('#cols').val();

                    rows = rows;
                    cols = cols;

                    $('#container').layout({
                        type: 'grid',
                        rows: rows,
                        columns: cols,
                        resize: false
                    });
                });
            });
        &lt;/script&gt;
        &lt;style&gt;
            html, body {    
                width: 100%;
                height: 100%;
                padding: 0;
                margin: 0;
            }

            #customiser
            {
                border: 1px solid #cecece;
                width: 800px;
                margin-bottom: 10px;
            }

            #container {
                border: 1px solid #cecece;
                height: 600px;
                width: 800px;
            }

            #container div {
                display: inline-block;
                background: gray;
                border: 1px solid white;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;div id="customiser"&gt;
            &lt;label&gt;Cols&lt;/label&gt;&lt;input id="cols" type="text" /&gt;
            &lt;label&gt;Rows&lt;/label&gt;&lt;input id="rows" type="text" /&gt;
            &lt;button id="create"&gt;create&lt;/button&gt;
        &lt;/div&gt;
        &lt;div id="container"&gt;
            &lt;div&gt;One&lt;/div&gt;
            &lt;div&gt;Two&lt;/div&gt;
            &lt;div&gt;Three&lt;/div&gt;
            &lt;div&gt;Four&lt;/div&gt;
        &lt;/div&gt;
    &lt;/body&gt;
&lt;/html&gt;
</code></pre>
