Question 183024 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Jquery – get data with attr from modal window

I have a modal window for uploading files, it is used in this piece of code

<div class="field">
    <label>Photos</label>
    <div class="field_info" data-field_photo_id="5">
        <div class="value" data-item_id=""></div>
    </div>
    <div class="field_form">
        <a class="btn btn-dark btn-md btnUpload" data-toggle="modal" href="#" data-target="#modal-upload">
            <i class="fa fa-cloud-upload"></i> Upload
        </a>
        <div class="dz_params_item"
          data-entity_id="<?=$item->request_id?>"
          data-action_url="/files/upload/<?=$item->request_id?>"
        ></div>
    </div>
</div>

The window itself is a little lower on the page

<div class="modal fade" id="modal-upload" tabindex="-1" role="dialog" aria-hidden="true">
    ....
</div>

To open it and upload files, I use javascript

I have shortened the code a little everywhere so that there is no confusion, but if something is missing, then I will add

(function( $ ){
    $.dispatcherFiles = {
        $filesDropzone: null,
        $parallelUploads: 100,
        $maxFiles: 10,
        $modalId: '#modal-upload',
        $files: [],

        cacheDom: function(){
            this.$body = $('body');
        },

        functions: {
            openUploadFilesModal: function (e) {
                let that = this;

                let dropzoneParamEl = $(e.currentTarget).closest('.field_form').find('.dz_params_item');
                let action_url = $(dropzoneParamEl).attr('data-action_url');          

                $(this.$modalId + ' #filesDropzone').addClass('dropzone');

                this.$filesDropzone = new Dropzone(that.$modalId + ' .dropzone', {
                    url: action_url,
                    uploadMultiple: true,
                    parallelUploads: that.$parallelUploads,
                    maxFiles: that.$maxFiles,
                });
            },

            hideUploadFilesModal: function (e) {
                this.$filesDropzone.destroy();
            },
        },

        events: function(){
            this.$body.on('shown.bs.modal', this.$modalId, this.functions.openUploadFilesModal.bind(this));
            this.$body.on('hidden.bs.modal', this.$modalId, this.functions.hideUploadFilesModal.bind(this));
        },

        init: function () {
            this.cacheDom();
            this.events();
        }
    };

    $.dispatcherFiles.init();

})(jQuery);

So, in this example, the main problem I have is to get data-action_url from the html page

I am trying to do it with these lines

let dropzoneParamEl = $(e.currentTarget).closest('.field_form').find('.dz_params_item');
let action_url = $(dropzoneParamEl).attr('data-action_url');

But in the end my variable is undefined, even though the previous variable dropzoneParamEl is defined and I get the DOM of that element

And this is all just because my function is triggered when the window is opened shown.bs.modal

If I receive data via click, then I can get the attribute I need

But as far as I understand, I can’t use the click modal for opening, because then nothing will work at all

How can I get the value of data-action_url when opening the modal in this case? I’ll clarify right away that I can have several such upload buttons, and I need the value of exactly the element that was clicked

=====================================

Update

That is, I can simply replace two functions in events with this one

events: function(){
            this.$body.on('click', '#foo', this.functions.uploadFilesModal.bind(this));
        },

And then do everything I need to do there?

functions: {
            uploadFilesModal: function (e) {
                $($modalId).modal('toggle');

                let that = this;

                let dropzoneParamEl = $(e.currentTarget).closest('.field_form').find('.dz_params_item');
                let action_url = $(dropzoneParamEl).attr('data-action_url');
                
                console.log(dropzoneParamEl);
                console.log(action_url);

                ...
            },
        },

=====================================

I tried to make an approximate snippet, but unfortunately nothing opens ..

(function($){
    let $modalId = '#modal-upload';
    let $filesDropzone = null;
    let $parallelUploads = 100;
    let $maxFiles = 10;
    let $files = [];
        
    $.dispatcherFiles = {

        cacheDom: function(){
            this.$body = $('body');
        },

        functions: {
            uploadFilesModal: function (e) {
                $($modalId).modal('toggle');
                
                let that = this;

                let dropzoneParamEl = $(e.currentTarget).closest('.field_form').find('.dz_params_item');
                let action_url = $(dropzoneParamEl).attr('data-action_url');
                
                console.log(dropzoneParamEl);
                console.log(action_url);

                $($modalId + ' #filesDropzone').addClass('dropzone');

                $filesDropzone = new Dropzone($modalId + ' .dropzone', {
                    url: action_url,
                    uploadMultiple: true,
                    parallelUploads: $parallelUploads,
                    maxFiles: $maxFiles,
                });
                
                $filesDropzone.on('error', function() {
                    $(that.$modalId).modal('hide');
                    alert('error');
                });
                
                $filesDropzone.on('success', function(file, response) {
                    $($modalId).modal('hide');
                });
            },
        },

        events: function(){
            this.$body.on('click', '.btnUpload', this.functions.uploadFilesModal.bind(this));
        },

        init: function () {
            this.cacheDom();
            this.events();
        }
    };

    $.dispatcherFiles.init();

})(jQuery);
.field {
  margin: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
  rel="stylesheet"  type='text/css'>

<div class="field">
    <label>Photos</label>
    <div class="field_info" data-field_photo_id="5">
        <div class="value" data-item_id=""></div>
    </div>
    <div class="field_form">
        <a class="btn btn-dark btn-md btnUpload" data-toggle="modal" href="#" data-target="#modal-upload">
            <i class="fa fa-cloud-upload"></i> Upload
        </a>
        <div class="dz_params_item"
          data-entity_id="<?=$item->request_id?>"
          data-action_url="/files/upload/<?=$item->request_id?>"
        ></div>
    </div>
</div>

<div class="field">
    <label>Photos</label>
    <div class="field_info" data-field_photo_id="6">
        <div class="value" data-item_id=""></div>
    </div>
    <div class="field_form">
        <a class="btn btn-dark btn-md btnUpload" data-toggle="modal" href="#" data-target="#modal-upload">
            <i class="fa fa-cloud-upload"></i> Upload
        </a>
        <div class="dz_params_item"
          data-entity_id="<?=$item->request_id?>"
          data-action_url="/files/upload/<?=$item->request_id?>"
        ></div>
    </div>
</div>

<div class="field">
    <label>Photos</label>
    <div class="field_info" data-field_photo_id="7">
        <div class="value" data-item_id=""></div>
    </div>
    <div class="field_form">
        <a class="btn btn-dark btn-md btnUpload" data-toggle="modal" href="#" data-target="#modal-upload">
            <i class="fa fa-cloud-upload"></i> Upload
        </a>
        <div class="dz_params_item"
          data-entity_id="<?=$item->request_id?>"
          data-action_url="/files/upload/<?=$item->request_id?>"
        ></div>
    </div>
</div>

<div class="modal fade" id="modal-upload" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    Upload files
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
                </button>
            </div>
            <div class="modal-body">
                <div id="filesDropzone"></div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js" integrity="sha512-3dZ9wIrMMij8rOH7X3kLfXAzwtcHpuYpEgQg1OA4QAob1e81H8ntUQmQm3pBudqIoySO5j0tHN4ENzA6+n2r4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.3/dropzone.min.js" integrity="sha512-U2WE1ktpMTuRBPoCFDzomoIorbOyUv0sP8B+INA3EzNAhehbzED1rOJg6bCqPf/Tuposxb5ja/MAUnC8THSbLQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
Tags:

2

Answers


  1. 0

    I think you can use on("click") together with the built-in into HTML tag dialog. Consider its docs.

    Here’s a short example without any styling. Hope it works. If the user cancels the "choose file" dialog window, the HTML dialog closes automatically, too.

    $("#show").on("click", function() {
  document.getElementById("upload").showModal();
});

$("#upload").on("close", function() {
  if (this.returnValue === "cancel") {
    // User canceled the dialog
  } else if (this.returnValue === "submit") {
    var file = document.getElementById("file").files;
    // User submitted the dialog
    // Use the "item" method to retrieve File objects
    
    var target = $("#show").closest(".field_form").find(".dz_params_item");
    var url = target.attr("data-action_url");
    
    // What you do with "data-action_url"
  }
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<dialog id="upload">
  <form>
    <!-- Add a style if you want -->
    <input type="file" id="file" />
    <!-- Anything else you'd like to be near the file input -->
    <br /><br />
    <div>
      <!-- Again, here might be a class or something -->
      <button value="cancel" formmethod="dialog">Cancel</button>
      <button value="submit" formmethod="dialog">Submit</button>
    </div>
  </form>
</dialog>

<button id="show">Upload</button>
    Login or Signup to reply.
  2. 0

    You can call $($modalId).modal('toggle');, see the snippet below:

    (function($){
    let $modalId = '#modal-upload';
    let $filesDropzone = null;
    let $parallelUploads = 100;
    let $maxFiles = 10;
    let $files = [];
    

    $("#foo").click(function() {
        $($modalId).modal('toggle');
    });

})(jQuery);
    .field {
  margin: 50px;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" integrity="sha512-t4GWSVZO1eC8BM339Xd7Uphw5s17a86tIZIj8qRxhnKub6WoyhnrxeCIMeAqBPgdZGlCcG2PrZjMc+Wr78+5Xg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css" 
  rel="stylesheet"  type='text/css'>

<div class="field">
    <label>Photos</label>
    <div class="field_info" data-field_photo_id="5">
        <div class="value" data-item_id=""></div>
    </div>
    <div class="field_form">
        <a class="btn btn-dark btn-md btnUpload" data-toggle="modal" href="#" data-target="#modal-upload" id="foo">
            <i class="fa fa-cloud-upload"></i> Upload
        </a>
        <div class="dz_params_item"
          data-entity_id="<?=$item->request_id?>"
          data-action_url="/files/upload/<?=$item->request_id?>"
        ></div>
    </div>
</div>

<div class="modal fade" id="modal-upload" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    Upload files
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true"><i class="fal fa-times"></i></span>
                </button>
            </div>
            <div class="modal-body">
                <div id="filesDropzone"></div>
            </div>
        </div>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.0/js/bootstrap.min.js" integrity="sha512-3dZ9wIrMMij8rOH7X3kLfXAzwtcHpuYpEgQg1OA4QAob1e81H8ntUQmQm3pBudqIoySO5j0tHN4ENzA6+n2r4w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search