Adding additional HTML rows: where to put the code?

Question

I have the following situation:

<table><tr><td width="50">
<select name="angle">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
</select>
</td><td>
<input type="text" name="what" value="" />
</td></tr></table>
<a href="">+ Add Row</a>

So, the plan is that when the user first comes to page, they will see 1 row. They will enter the data and click "add row" multiple times to enter all of their data. At a later date, they should be able to come back and edit or remove any of the rows.

My question/problem is: in the javascript, I need to have the full HTML to generate each of the rows or perform an AJAX request to get the new row from the server. On the server I need to have the HTML to generate the rows when the users comes back to edit or do I pass the values using a json array.

I'm wondering what you would do as I'm trying to avoid having the HTML in 2 places. Would you put all the HTML in JS? Or would you put all of the HTML on the server (PHP) and call with AJAX? Or would you just have the HTML in 2 places? (BTW, the case I'm working which has 5 columns and a lot more HMTL.)

I am using: PHP + MySQL + jQuery

Answer 1

In the jquery tutorial you have a nice example you can use to do this.

In the live examples (example C) you have

$("div.contentToChange p:not(.alert)")
  .append("<strong class="addedtext"> This text was just appended to this paragraph</strong>")});

Why instead of the "< strong..." don't you just add a new input row?

As it is a string you're appending you can pretty much with javascript change the name, so you can control it easily.

Like

.append("<input type=\"text\" name=\"row_"+id+"\">.....

I would do it that way :)

This way you'll avoid having to refresh your webpage everytime you add a row. Also you can detect on the php side after the submit how many rows you have, by parsing the "row_id"

Hope it helps

Edit: Answer to the comment and to the rest of the question

I would put all HTML being generated by append, it would make you a bit less load on your server (although not that much) and things would be simple to organize. Oh and you would avoid having the refresh :) (This for the add row)

For rows added that you're loading from the database, then that must be server side.

Answer 2

There are several approaches to this problem, as you have described, each with trade-offs. I've experimented with a few. I would avoid having the HTML in two places, since that will be more work to maintain in the future.

One approach is to keep the HTML on the initial page - you can create a 'template' in a hidden row. You can then use your web language - PHP or whatever - to generate the rows of saved data, plus the hidden template row. When a user clicks the add row link/button, you can clone this row and insert it at the end of the table, or right before the template row. The benefit of this is that the user doesn't have to wait for the ajax call to load additional rows. Also, you can easily modify the design. A potential down-side is obscuring how this works by having the hidden row.

Another approach is to do all of your loading through ajax and requesting each HTML row. In this case, I would recommend either putting your HTML in a template that could be included in the initial page or loaded through the ajax call. All HTML in one place. You can also pre-load an extra row so that you don't have the ajax delay. When the user clicks 'add row', display the hidden pre-loaded row and load an additional, hidden row.

Finally, another approach is to use the template row method described above (first option) and do an ajax request for JSON on page load. You can then populate the necessary rows of saved data through your js and the JSON data. The user will have to wait for the data to load, but it can simplify things a bit.