Add an image in existing HTML element with JS/Jquery

Question

On my webpage there are Gridster widgets.These widgets have images in them which can be deleted.Now I have a + button when user clicks on it a modal opens which shows list of images.Now I want users to select an image(click on it) and then press Add Image then that images should get added in the widget specified.

Also the images which are shown in modal are retrieved from server so I cannot manually place element like id to differentiate them.I think this in jquery will help in getting a specific image that is clicked.Along with that the image added should have same structure like that of existing image.

'<div class="imagewrap"><img src= image i click > <input type="button" class="removediv" value="X" /></div></div>';

I also want to update the textarea field with the src of the image I added just like it is with the other existing images.

HTML:

<div class="gridster">
    <ul>

    </ul>

</div>
<button class="js-seralize btn btn-success mr-2">Serialize</button>
<textarea id="log"></textarea>

<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Add Icons</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">

            <img src="https://cdnd.icons8.com/wp-content/uploads/2015/07/Run-Command-100.png">
      <img src="https://png.icons8.com/metro/2x/chapel.png">
      <img src="https://png.icons8.com/metro/2x/boy.png">
      <img src="https://png.icons8.com/metro/2x/wacom-tablet.png">






      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Add Image</button>
      </div>
    </div>
  </div>
</div>

JS:

var gridster;


gridster = $(".gridster ul").gridster({
  widget_base_dimensions: [100, 100],
  widget_margins: [5, 5],
  helper: 'clone',
   serialize_params: function($w, wgd) {return {images: $w.find('textarea').val().trim() , col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y}},
  resize: {
    enabled: true
  }
}).data('gridster');


 var json = [{
    "html": "https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", //3 Images
    "col": 1,
    "row": 1,
    "size_y": 2,
    "size_x": 2
}, {
    "html":"https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", // 2 Images
    "col": 4,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},

{
    "html": "https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", // 1 Image
    "col": 6,
    "row": 1,
    "size_y": 2,
    "size_x": 2
},


{
    "html": "https://image.flaticon.com/icons/svg/67/67994.svg,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png",  // 2 Images
    "col": 1,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}, {
    "html": "https://image.flaticon.com/icons/svg/67/67994.svg", //1 Image
    "col": 4,
    "row": 3,
    "size_y": 1,
    "size_x": 1
},

{
    "html": "https://image.flaticon.com/icons/svg/67/67994.svg,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", //2 Images
    "col": 6,
    "row": 3,
    "size_y": 1,
    "size_x": 1
}

];








for(var index=0;index<json.length;index++) {
    var images = json[index].html.split(',');
        var imageOutput = "";

        for(var j = 0; j < images.length; j++) {
        imageOutput += '<div class="imagewrap"><img src='+ images[j] +'> <input type="button" class="removediv" value="X" /></div></div>';
        }

gridster.add_widget('<li class="new" ><button class="addmorebrands" style="float: left;">+</button><button class="delete-widget-button" style="float: right;">-</button>' + imageOutput + '<textarea>'+json[index].html+'</textarea></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);
}









$('.removediv').on('click', function () {
  $(this).closest('div.imagewrap').remove();
});


 $(document).on("click", ".delete-widget-button", function() {
        var gridster = $(".gridster ul").gridster().data('gridster');
        gridster.remove_widget($(this).parent());
    });


$('.js-seralize').on('click', function () {
    var s = gridster.serialize();
    $('.gridster ul li').each((idx, el)=>{ // grab the grid elements
       s[idx].html = $('textarea', el).html(); // add the html key/values

    json_variable=JSON.stringify(s)
   });



    $('#log').val(json_variable);
});

$(document).on("click", ".addmorebrands", function() {
        $('#exampleModalCenter').modal('show');

    });

Someone please help me with this as I am finding it really difficult to get it

Fiddle Link

word of advice, check your fiddle: properly format and indent the code, as it is right now it is very difficult to understand and may discouraged people from helping you. Also your images are overlapping one another — Scaramouche
– Scaramouche, Commented Mar 27, 2018 at 3:38
Yeah sorry I had written that code I hurry and I am kinda newbie to JS. Apologies for indentaiton — NewBie
– NewBie, Commented Mar 27, 2018 at 3:44
For Image overlapping I wanted multiple images on each widgets and then I wanted to add restrict all those images within the container body.Even when a new image is added that should restrict within the widget body — NewBie
– NewBie, Commented Mar 27, 2018 at 3:45
@BrianPatterson Sure Any clarification required please ask.I will tell you also if possible see my Update 1 — NewBie
– NewBie, Commented Mar 27, 2018 at 3:58

Scaramouche · Accepted Answer · 2018-03-27 04:59:57Z

2

The adding the image part is up and running now, at least in its raw, modified and added some code in this section:

//EDITS
var parentLI;
$(document).on("click", ".addmorebrands", function() {
    parentLI = $(this).closest('li');
    $('#exampleModalCenter').modal('show');
    $('#exampleModalCenter img').click(function(){
        $(this).addClass('preselect');
        $(this).siblings().removeClass('preselect');
        selectedImageSRC = $(this).attr('src');
    });
});

$('#add-image').click(function(){
    parentLI.append('<div class="imagewrap"><img src="'+selectedImageSRC+'"> 
    <input type="button" class="removediv" value="X" /></div>');
    parentLI.children('textarea')
       .append(', '+selectedImageSRC);
    $('#exampleModalCenter').modal('hide');
});

and this too:

.preselect{
  border: 2px solid white;
  background: green
}

.preselect:hover{
  border: 1px solid white;
  background: lightgreen
}

I'll leave you the part of resizing the images inside each cell, and also everything else :) https://jsfiddle.net/0ndht0zh/23/

UPDATE

This code only applies to .removediv which exist at the time it runs:

$('.removediv').on('click', function () {
    $(this).closest('div.imagewrap').remove();
});

Which is why preexisting images do get deleted but not those you add later. I'm no expert so please do research for a more technical explanation, but basically:

Following code does almost the same, except since it is attached to document (but applied to .removediv) which actually existed by the time this code ran, the event will always find its way to .removediv.

$(document).on('click', '.removediv', function () {
    $(this).closest('div.imagewrap').remove();
});

updated fiddle: https://jsfiddle.net/0ndht0zh/27/

also remember to update the textarea content on deletion

edited Mar 27, 2018 at 4:59

answered Mar 27, 2018 at 4:41

Scaramouche

3,2574 gold badges23 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

NewBie Over a year ago

Just one thing Why the option of deletion of image is not working.I checked it in "inspect element" it has proper class assigned.It should work Ideally

NewBie Over a year ago

You seem no less than an expert with the explanation you have given :)

NewBie Over a year ago

If you say you a person like you is not expert then I am no where on that grounds

NewBie Over a year ago

@Scarmouche What could be the reason for textarea not getting updated when I delete all the images and then add any image via button

NewBie Over a year ago

I tried to change the part of function which updates the textarea(Also I have done some more additions to the code)

|

Collectives™ on Stack Overflow

Add an image in existing HTML element with JS/Jquery

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related