Databases
StackOverflow2013
Postsdbo
PODynamically creating <DIV id's> in View AND JavaScript?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PODynamically creating <DIV id's> in View AND JavaScript?
    primarykey
    data
    text
    <p>I'm very new to javascript (like 98.9%), so apologies in advance if this is a dumb question...</p> <p>I currently have a list of book titles, and I am trying to put a small graph next to each bulleted item in the list. So to generate the graph, I'm using flot, and setting it up to use a stacked bar chart, horizontally. </p> <p>Now my list may be 2, may be 20 items long. It all depends on the user who is logged in. </p> <p>The challenge I have is that flot seems to work on the basis that a specifically identified HTML place holder must be set up for the graph, and then the javascript (external file in my case) which generates the graph, puts the resulting graphic into that specified placeholder. </p> <p>If I've got more than one item, I need to dynamically create more unique in both the View, and then also in the javascript. </p> <p>I could probably do it by writing my embedding my javascript in the View, and using some PHP to create the id's, but somehow that doesn't sound right - I'd rather try keep the neat seperation of unobtrusive JavaScript, View, Model, CSS etc. </p> <p>Some pointers please...?</p> <p>(This is PHP, CodeIgniter, JavaScript and CSS3)</p> <p>[EDIT: Code example]</p> <p>Below is not working code - it's "mid-experiment"</p> <p>This is my JavaScript (in a separate myJS.js file)</p> <pre><code>function plotWithOptions(t,a,p) { $(function () { var d1 = [[t,10]]; var d2 = [[a,10]]; var d3 = [[p,10]]; $.plot($("#placeholder"), [ d1, d2, d3 ], { series: { stack: 0, fill: true, linewidth: 1, bars: { show: true, barWidth: 10, horizontal: true} }, xaxis: {max: 100, show:false}, yaxis: {max: 100, show:false}, grid: {show: false} }); }); } </code></pre> <p>This is my View (CodeIgniter)</p> <pre><code>&lt;script src="/assets/myJS.js"&gt;&lt;/script&gt; &lt;script src="/assets/jquery.js"&gt;&lt;/script&gt; &lt;script src="/assets/jquery.flot.js"&gt;&lt;/script&gt; &lt;script src="/assets/jquery.flot.stack.js"&gt;&lt;/script&gt; &lt;p&gt;This book is rated.... &lt;div id="placeholder1" style="width:300px;height:100px;"&gt;&lt;/div&gt; &lt;script&gt; plotWithOptions(28,14,11); &lt;/script&gt; &lt;p&gt;This book is rated.... &lt;div id="placeholder2" style="width:300px;height:100px;"&gt;&lt;/div&gt; &lt;script&gt; plotWithOptions(28,27,1); &lt;/script&gt; &lt;p&gt;This book is rated.... &lt;div id="placeholder3" style="width:300px;height:100px;"&gt;&lt;/div&gt; &lt;script&gt; plotWithOptions(28,27,26); &lt;/script&gt; &lt;p&gt;This book is rated.... &lt;div id="placeholder4" style="width:300px;height:100px;"&gt;&lt;/div&gt; &lt;script&gt; plotWithOptions(28,14,11); &lt;/script&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMaxcot
    1. USMaxcot
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COIf you've got some code to do with what you've already tried, please do post it. It will help everyone out
      singulars
      1. PODynamically creating <DIV id's> in View AND JavaScript?
      1. USAndy Holmes
    2. CODone... although it's not anything remotely working yet :(
      singulars
      1. PODynamically creating <DIV id's> in View AND JavaScript?
      1. USMaxcot
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload