2

I have an add button, It adds html sections dynamically like so, Jsfiddle

var scntDiv = $('.wrapper');
var i = $('div.row').length;
$(".add_member").click(function () {
  $('html goes here').appendTo(scntDiv);
})

The add was okay but I'm asked to keep making the html bigger, and I have to use it in different projects. So adding html elements inside append sucks plus you have to make it one liner and to substitute double quotes for single quotes.

I used knockoutJS and riotJS, both work perfectly but I don't want to add another library just to add sections without writing html.

Is there a way to make add an entire section in jquery or Js that is just as simple as the remove method? without having to write html manually?

bmceldowney
  • 2,307
  • 13
  • 19
Lynob
  • 5,059
  • 15
  • 64
  • 114
  • How are you going to append HTML without writing its contents somewhere? What you can do is put it somewhere on the HTML page (hidden), and then grab its `.html()` content when you need to append it (and then show it). – Jeto Mar 19 '18 at 20:45
  • @Jeto that would not work if you are trying to add infinity many sections, as far as I know, unless you have something else in mind. I have the section written in html in my page, the problem is, if i want to append it; I must copy paste it into the append function. The boss comes and says add x to this section, I have to add it twice, and in linear form inside the append function – Lynob Mar 19 '18 at 21:11
  • What's the difference between `$('your_section_selector').html().appendTo(...)` and copy-pasting it? – Jeto Mar 19 '18 at 21:16
  • @Jeto there's a bit of a difference but the problem is that I have to also make the html one liner inside append and I have to substitute double quotes which with single quotes. Notice how simple the remove function in jsfiddle? I want an add function as simple as that. Plus I use it in multiple projects, so sometimes there's big difference between the sections. Many libraries like knockout it easy but I don't see the point of adding an entire library for that. I have really big sections. Sometimes you forget which is the starting div and which is the ending div that must go into append. – Lynob Mar 19 '18 at 21:20
  • See https://jsfiddle.net/tZPg4/18599/ for what you can do for instance. If it's OK with you I'll post it as an answer. – Jeto Mar 19 '18 at 21:29
  • This: https://stackoverflow.com/a/18674066/5048383 and other suggested solutions are answers to your problem. – dNitro Mar 19 '18 at 21:37
  • @Jeto yes your solutions seems perfect, `clone` seems to add entire sections. I will test it in the project tomorrow. Feel free to answer, I will very likely accept your answer if it works in my project, and will differently upvote it – Lynob Mar 19 '18 at 21:51

2 Answers2

1

Here's a possible solution based on your fiddle, without changing anything else (some things are wrong/clumsy with this code, see below):

// Clone the first entry (since it's always here and without a remove button)
var entry = $('#p_scents p:first').clone();

// Find the input with ID p_scnt, change its name, empty its value
entry
  .find('#p_scnt')
  .attr('name', 'p_scnt_' + i)
  .val('');

// Append a remove button to it and append it to the wrapper div
entry
  .append('<a href="#" id="remScnt">Remove</a>')
  .appendTo(scntDiv);

Some notes looking at your fiddle though:

  • Your inputs all have the same ID, p_scnt. This is invalid HTML, even though it "works" here.
  • .live() is deprecated. You should use .on on the closest wrapper instead. Check the docs.
  • The name attribute doesn't have to be dynamic. You could just have it as p_scnt[] and its values would be sent as an array. If you really need to specify an index, use p_scnt[i].
Jeto
  • 14,596
  • 2
  • 32
  • 46
  • @Lynob See my updated answer, using `.val('')` to empty the value. It's pretty basic jQuery! – Jeto Mar 22 '18 at 00:35
1

you could possibly use an include with jquery:

<div id="include"></div>


    <script>
        $(function () {
            $("#include").load("include.html");
        });
    </script>
Wim Mertens
  • 1,780
  • 3
  • 20
  • 31
  • so add button appends `include.html`? – Lynob Mar 19 '18 at 22:33
  • No, it appends the snippet
    and jquery loads the html inside that div. Great thing about this is you can include that html anywhere you like and update the text only in one place should you need to do so.     – Wim Mertens Mar 20 '18 at 01:20
  • include is added once and thats it, if i have infinity many rows, how to keep including infinity many input? Once the file is included, it does not get included twice and so on – Lynob Mar 21 '18 at 23:32
  • Yes the include is added once, with this one line of code. You can add the same html file into another div should you need to do so. What you add as content in include.html is up to you – Wim Mertens Mar 22 '18 at 00:31