Improvements in dynamic content

Question

Improvements in dynamic content

Navigation

#1 by (2 votes)

1

Good afternoon, I have a function in jquery that I have been improving since I discovered it in forums, it serves to create elements dynamically using jquery

/* função que insere e remove cadeia de inputs */
    var inputnew = 0;
    function new_input() {
        inputnew++;
        $('<li class="formation '+ inputnew +'">'
        + '<input placeholder="Modalidade" onkeyup="this.value=capitalize(this.value);" />'
        + '<input type="number" placeholder="Data" />'
        + '<input placeholder="Instituição" onkeyup="this.value=capitalize(this.value);" />'
            + '<span class="remove cursor_pointer">x</span>'
        + '</li>').prependTo($('section.duo div.academic_formation div.formations')); }

    $('span.remove').live('click', function() {
        if(inputnew > 1) {
            $(this).parents('li').remove();
        inputnew--; } });
    $(document).ready(function() { new_input(); });
/* função que insere e remove cadeia de inputs */

I am facing the following problems, I am not experienced in jquery so I could not get past this, I have already improved the function I found and studied but I have two problems, the main one is apparently the .live function does not work in newer jquery , so I'm forced to use 1.8.3 for this function to work out and the second problem is that I need to create within the new_input function all inputs and allied and everything else I want to appear in the div listed, it is complicated to edit and or improve and also to make some functions work together, the problem of jquery version if it is complicated, I do not care much, to use in 1.8.3 without problems, but what I really want is that I can scan the div that has the elements I want to duplicate.

In this case, I would have

<div class="formations">
 <li class="formation">
        <input placeholder="Modalidade" onkeyup="this.value=capitalize(this.value);" />
        <input type="number" placeholder="Data" />
        <input placeholder="Instituição" onkeyup="this.value=capitalize(this.value);" />
  <span class="remove cursor_pointer">+</span>
 </li>
</div>

In html on the page, usually written and then a function that when clicking on an ADD for example, clone this section down

html jquery dinamico

asked by anonymous 05.05.2017 / 17:50

1 answer

How to add data using BeginCollection and PartialViews Remove multiple authentication per protocol

score 2 · Accepted Answer

As for .live() , just change to .on() and you can use more recent versions of jQuery.

In relation to copy / create content you can use .clone() to exactly copy what you want. There is also template in HTML that allows HTML to be in the page that is not active, just for copying.

An example would look like this:

var inputnew = 0;

function new_input() {
  inputnew++;
  var template = document.getElementById('formations');
  var clone = document.importNode(template.content, true);
  $(clone).prependTo('section.duo div.academic_formation');
}

$(document).on('click', 'span.add', new_input);
$(document).on('click', 'span.remove', function() {
  if (inputnew > 1) {
    $(this).parents('li').remove();
    inputnew--;
  }
});

$(document).ready(new_input);

.cursor_pointer {
  cursor: pointer;
  padding: 5px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><templateid="formations">
  <div class="formations">
  <li class="formation">
    <input placeholder="Modalidade" onkeyup="this.value=capitalize(this.value);" />
    <input type="number" placeholder="Data" />
    <input placeholder="Instituição" onkeyup="this.value=capitalize(this.value);" />
    <span class="add cursor_pointer">+</span><span class="remove cursor_pointer">-</span>
  </li>
</div>
</template>

<section class="duo">
  <div class="academic_formation">
    <div class="formations"></div>
  </div>
</section>