Adding additional HTML rows: where to put the code?


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>
<input type="text" name="what" value="" />
<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


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.


.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.

By : fmsf

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.

By : jonstjohn

Generally, to add a command to the context menus you'd do the following:

Tools | Customize

On the "Toolbars" tab put a tick next to the "Context Menus" item - this will add a new toolbar to your IDE, with buttons for Editor Context Menus, Class View Context Menus, Debugger Context Menus, etc

Then switch to the "Commands" tab, select the command you want, and drag it to the appropriate menu, and you're done - in this case in the left hand pane select "View", and then in the right hand pane, scroll down until you get to "View Markup".

That being said, in this instance, I can add the button to the context menu for the code editor, but it's greyed out, and unusable - I guess it needs some context that it gets from the Solution Explorer that it doesn't get from the Code window - which is odd, because it's pulling the same details through for "View Designer" and "View Code".

I guess I'd use Shift+F7 then, sorry about that.

This video can help you solving your question :)
By: admin