JSFiddle - React, Tailwind, and code Playground

by Lucy Derlin

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://www.phpclasses.org/browse/download/1/file/51812/name/ajaxupload.3.5.js"></script>
<strong>Example with appended content:</strong>
<br/>
<a href="#" id="test">An example to test</a>

<br/>
<br/>
<strong>Direct example:</strong>
<br/>
<div class="form-group">
  <a href="#" class="btn btn-sm btn-default" id="change">Change Image</a>
  <br/>
  <div class="imagechange"></div>
</div>

<a href="#" class="hidden btn btn-sm btn-default" id="change2">Change Image 2</a>
<br/>

CSS

.hidden {
  display: hidden;
}

JavaScript

function createAjax(id) {
  new AjaxUpload(id, {
    action: 'verifImg',
    name: 'uploadfile',
    onSubmit: function(file, ext) {
      if (!(ext && /^(png|jpeg|jpg|bmp|gif)$/.test(ext))) {
        return false;
      }
    },
    onComplete: function(file, response) {
      $(".imagechange").each(function() {
        $(this).html(response);
      });
    }
  });
}


$(document).ready(function() {

  createAjax("#change");
  createAjax("#change2");

  $(document).on('click', '#test', function(ev) {
    $('body').find('#show').remove();

    var modal = $(
      '<div class="modal fade" id="show" tabindex="-1" role="dialog" aria-labelledby="show">' +
      '<div class="modal-dialog" role="document">' +
      '<div class="modal-content">' +
      '<div class="modal-header">' +
      '<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>' +
      '<h4 class="modal-title" id="myModalLabel">Test</strong></h4>' +
      '</div>' +
      '<div class="modal-body">' +
      '<div class="row">' +

      '<div class="form-group">' +
      '<br/>' +
      '<div class="imagechange"></div>' +

      '</div>' +
      '</div>' +
      '</div>' +
      '</div>' +
      '</div>' +
      '</div>');

    var c2 = $("#change2");
    modal.find(".form-group").append(c2);
    c2.removeClass("hidden");
    console.log(modal);

    $('body').append(modal);

    modal.on('hidden.bs.modal', function() {
      console.log($(this));
      var c2 = $(this).find("#change2");
      c2.addClass("hidden");
      $('body').append(c2);
    });
    $('#show').modal({
      show: true
    });

    return false;

  });
});