-1

i have problem when i want to show image from database to modal (popup). I use ajax to receive and send some value from database to my modal.

This si my ajax to send from database to my modal :

function edit_file(id) {
  save_method = 'update';
  $('#formSubmit')[0].reset(); // reset form on modals
  $('.form-group').removeClass('has-error'); // clear error class
  $('.help-block').empty(); // clear error string

  //Ajax Load data from ajax
  $.ajax({
    url: "<?php echo base_url("
    master_visitor / Master_visitor / datatable_modal / ");?>" + id,
    type: "GET",
    dataType: "JSON",
    success: function(data) {
      $('[name="id"]').val(data.id);
      $('[name="card_photo"]').val(data.card_photo); //card data to show

      $('#modal_form').modal('show'); // show bootstrap modal when complete loaded
      $('.modal-title').text('Edit Visitor'); // Set title to Bootstrap modal title

    },
    error: function(jqXHR, textStatus, errorThrown) {
      alert('Error get data from ajax');
    }
  });
}

This is my modal code

<div id="modal_form" class="modal fade bs-example-modal-lg" role="dialog" aria- labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">
                    </button>
      </div>

      <div class="modal-body form">
        <form id="formSubmit" method="post" autocomplete="off" enctype="multipart/form-data">
          <input type="hidden" name="id" id="id" class="form-control" value="" type="text" readonly>

          <div class="col-md-12">
            <div class="row">
              <div class="col-md-12">
                <img style="width:200px;height:270px;" class="img-fluid mt-5 mb-3" />
              </div>
            </div>

          </div>
        </form>
      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
        <button type="buttuon" id="btnSave" onclick="save()" class="btn btn-primary">Submit</button>
      </div>

    </div>
  </div>
</div>
ADyson
  • 57,178
  • 14
  • 51
  • 63
arutala223
  • 11
  • 2
  • What problem do you have, exactly (and don't just say "it's not working" because that doesn't mean anything useful)? Please share the specific issue you've uncovered while testing and debugging your code. We cannot simply guess. See also [ask] and how to provide a [mre] of your issue. – ADyson Aug 10 '23 at 08:41
  • 1
    I can't find an element with the name `card_photo` in the HTML of the modal. – KIKO Software Aug 10 '23 at 08:42
  • P.S. As far as I can see, you haven't actually written any code which would populate the `img` tag in your modal. So your main "problem" seems to be that you simply haven't started the task yet. If you disagree, please tell us which bit of the code you think is responsible for populating that `img`'s `src` with a suitable URL or data string, because I certainly can't see it. – ADyson Aug 10 '23 at 08:43
  • It's also unclear what `$('[name="card_photo"]').val(data.card_photo);` is supposed to do. There is no such field in your form, and this code certainly isn't going to populate an `img src` (assuming that's what you think it does) because `a) the field doesn't exist, b) `img` tags don't have a `name` or `value` (because they're not form fields) and c) `value` is not `src` – ADyson Aug 10 '23 at 08:48
  • Maybe you should read [Changing the image source using jQuery](https://stackoverflow.com/questions/554273/changing-the-image-source-using-jquery) – ADyson Aug 10 '23 at 08:49

0 Answers0