Databases
StackOverflow2013
Postsdbo
POJquery - adding additional table rows to table
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery - adding additional table rows to table
    primarykey
    data
    text
    <p>I have been attempting to learn JQuery and this tutorial from a book really stumped me. I have simplified it somewhat so we are dealing with the most simple elements/functions possible. I have this table defined </p> <pre><code>&lt;table id ="testtable"&gt; &lt;thead&gt; &lt;th&gt;Client Name&lt;/th&gt; &lt;th&gt;Appointment Dates&lt;/th&gt; &lt;/thead&gt; &lt;tbody id="tabledata"&gt; &lt;tr&gt; &lt;td&gt;Joe&lt;/td&gt; &lt;td&gt;01/01/2012&lt;/td&gt; &lt;/tr&gt; &lt;tr&gt; &lt;td&gt;Joe&lt;/td&gt; &lt;td&gt;01/01/2012&lt;/td&gt; &lt;/tr&gt; &lt;!--@Html.Action("AppointmentData", new { id = Model })--&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>I have a button calling a function defined as</p> <pre><code>&lt;input type="button" value="test" onclick="OnSuccess();" /&gt; </code></pre> <p>And I have my actual Jquery here </p> <pre><code>&lt;script type="text/javascript"&gt; function OnSuccess() { $("#tabledata").append("&lt;tr&gt;&lt;td&gt;hello&lt;/td&gt;&lt;td&gt;world&lt;/td&gt;&lt;/tr&gt;"); } &lt;/script&gt; </code></pre> <p>What is really baffling me is the Jquery function which fails to execute. I can empty the table with .empty(), I can even perform this:</p> <pre><code>$("#tabledata").append("&lt;td&gt;hello&lt;/td&gt;&lt;td&gt;world&lt;/td&gt;") </code></pre> <p>And it will append data but I cannot for the life of me figure out why it will not append a row. The Chrome debugger error message I get is <B>"Uncaught TypeError: object is not a function"</B>. This only occurs when I start adding the table row tags.</p> <p><b>Edit:</b></p> <p>It turns out my local jQuery library was behaving oddly, maybe I modified it by accident? As soon as I referenced the google hosted library it worked</p> <pre><code> &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function () { $('input[name="testButton"]').click(function () { alert('hi'); $("#testtable tbody").append("&lt;tr&gt;&lt;td&gt;hello&lt;/td&gt;&lt;td&gt;world&lt;/td&gt;&lt;/tr&gt;"); }); }); &lt;/script&gt; </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMark Walsh
    1. USMark Walsh
    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
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POJquery - adding additional table rows to table
      1. This table or related slice is empty.
      1. VTModeratorReview
    1. COWorking fine for FF15 and Chrome22. See this [fiddle](http://jsfiddle.net/vguf5/).
      singulars
      1. POJquery - adding additional table rows to table
      1. USSirko
    2. COYou're right, it does. Perhaps it's something to do with my browser configuration.
      singulars
      1. POJquery - adding additional table rows to table
      1. USMark Walsh
 

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