how to bring the element number from within an append in javascript?

Question

how to bring the element number from within an append in javascript?

Navigation

#1 by (0 votes)

1

I have a problem that I get a string information in return from an ajax however I need to delete the specified line, but for this I need to create a counter of the append element I can not do this you could help me

follow the html code:

<table class="table table-bordered">
            <thead>
                <tr>
                    <th style="background-color: #606060; color: white; text-align: center;"><b>Image</b></th>
                    <th style="background-color: #606060; color: white; text-align: center;"><b>Image Name</b></th>
                    <th style="background-color: #606060; color: white; text-align: center;"><b>Remover</b></th>
                </tr>
            </thead>
            <tbody id="imagelist" style="text-align: center;">

            </tbody>
        </table>

and the javascript code:

<script>
    var options = {
      shutter_ogg_url: "jpeg_camera/shutter.ogg",
      shutter_mp3_url: "jpeg_camera/shutter.mp3",
      swf_url: "jpeg_camera/jpeg_camera.swf",
    };
    var camera = new JpegCamera("#camera", options);

  $('#take_snapshots').click(function(){
    var snapshot = camera.capture();
    snapshot.show();

    snapshot.upload({api_url: "action.php"}).done(function(response) {
    var id = id++;

    $('#imagelist').prepend("<tr><td><img src='"+response+"' width='100px' height='100px'></td><td><input id='foto' style='border: transparent; background-color: transparent; text-align: center; width: 100%;' type='text' value='"+response+"_""'   /></td><td><button style='width: 50%; font-size:30px;' class='btn btn-danger' onclick='apagar();'><i class='glyphicon glyphicon-trash'></i></button></td></tr>");

}).fail(function(response) {
  alert("Upload failed with status " + response);
});
})

function done(){
    $('#snapshots').html("uploaded");
}
</script>

javascript

asked by anonymous 23.07.2018 / 14:59

1 answer

Cookie path does not work Turning a double variable into a factor

score 0 · Answer 1

You can not increment a variable with its own value at the same time as declaring it with var . The result would be NaN , since the variable has no value at that time.

You need to declare the variable outside of the function by assigning it a value (for example, 0 ), and in the make increment function.

By analyzing your code, I notice that you want to concatenate the value of id in this value of the string of prepend :

value='"+response+"_"+id+"'

But you also have to concatenate id="foto" , otherwise you will be inserting multiple elements with the same id="foto" , which is incorrect. A id must be unique on the page. You will soon have to do the same:

id='foto"+id+"'

The code looks like this:

var options = {
   shutter_ogg_url: "jpeg_camera/shutter.ogg",
   shutter_mp3_url: "jpeg_camera/shutter.mp3",
   swf_url: "jpeg_camera/jpeg_camera.swf",
};
var camera = new JpegCamera("#camera", options);

var id = 0;
$('#take_snapshots').click(function(){
   var snapshot = camera.capture();
   snapshot.show();

   snapshot.upload({api_url: "action.php"}).done(function(response) {
      id++;

      $('#imagelist').prepend("<tr><td><img src='"+response+"' width='100px' height='100px'></td><td><input id='foto"+id+"' style='border: transparent; background-color: transparent; text-align: center; width: 100%;' type='text' value='"+response+"_"+id+"'   /></td><td><button style='width: 50%; font-size:30px;' class='btn btn-danger' onclick='apagar();'><i class='glyphicon glyphicon-trash'></i></button></td></tr>");

   }).fail(function(response) {
      alert("Upload failed with status " + response);
   });
})

function done(){
    $('#snapshots').html("uploaded");
}