Generic JQuery for multiple html elements

Question

Thanks for reading. I am developing a code to submit images based on the html element (box) into which they are dropped. I have a nice jQuery drag and drop routine that works acceptably on it's own. However, I am unsure how to extend it so that the JQuery works for multiple html elements. First up is the JQuery code:

<script>
function sendFileToServer(formData)
{
    var jqXHR=$.ajax({
    type: "POST",
    cache: false,
    processData: false,
    contentType:false,
    data: formData,
    url: "upload.php",
    
    error: function (jqXhr, textStatus, errorMessage) {
            $('#status'<?php echo $tag_no?>).append('Error' + errorMessage);
    }
    
    }); 
 
}


function handleFileUpload(files,obj)
{
   for (var i = 0; i < files.length; i++) 
   {
        var fd = new FormData();
        fd.append('upl[]', files[i]);

        sendFileToServer(fd);
 
   }
}
$(document).ready(function()
{
var obj = $("@dragandrophandler");
obj.on('dragenter', function (e) 
{
    e.stopPropagation();
    e.preventDefault();
    $(this).css('border', '2px solid #0B85A1');
});
obj.on('dragover', function (e) 
{
     e.stopPropagation();
     e.preventDefault();
});
obj.on('drop', function (e) 
{
 
     $(this).css('border', '2px dotted #0B85A1');
     e.preventDefault();
     var files = e.originalEvent.dataTransfer.files;
 
     //We need to send dropped files to Server
     handleFileUpload(files,obj);
});
$(document).on('dragenter', function (e) 
{
    e.stopPropagation();
    e.preventDefault();
});
$(document).on('dragover', function (e) 
{
  e.stopPropagation();
  e.preventDefault();
  obj.css('border', '2px dotted #0B85A1');
});
$(document).on('drop', function (e) 
{
    e.stopPropagation();
    e.preventDefault();
});
 
});

</script>

Midway down, under $(document).ready(function(), is the call to @dragandrophandler. This uniquely associates with the html id=draganddrophandler. However, I want to extend it to work for many html elements (..1, ..2, ..3, etc), like this:

<div id="dragandrophandler1" class="draganddrophandler">Drag & Drop Files Here</div>
<div id="status1"></div>

<div id="dragandrophandler2" class="draganddrophandler">Drag & Drop Files Here</div>
<div id="status1"></div>

<div id="dragandrophandler3" class="draganddrophandler">Drag & Drop Files Here</div>
<div id="status1"></div>

In this way, I can tag the images for which box they were dropped in and route them accordingly on the backend.

So to summarize, whats the best way to create the either html or more likely the JQuery so it can work on all of the relevant html elements?

imvain2 · Accepted Answer · 2020-07-28 20:54:11Z

1

You should be able to wrap the code in each and base it on the class. You will notice that I set obj = $(this), I did that to help you visually separate the outer $(this) to the this of the event handlers.

$(".dragandrophandler").each(function(){
    var obj = $(this);

    obj.on('dragenter', function (e) 
    {
        e.stopPropagation();
        e.preventDefault();
        $(this).css('border', '2px solid #0B85A1');
    });
    obj.on('dragover', function (e) 
    {
         e.stopPropagation();
         e.preventDefault();
    });
    obj.on('drop', function (e) 
    {
     
         $(this).css('border', '2px dotted #0B85A1');
         e.preventDefault();
         var files = e.originalEvent.dataTransfer.files;
     
         //We need to send dropped files to Server
         handleFileUpload(files,obj);
    });
    });

answered Jul 28, 2020 at 20:54

imvain2

15.9k1 gold badge19 silver badges21 bronze badges

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

2 Comments

Mark Over a year ago

This is partway there. It runs the handlefileupload function as many times as I have elements. I suspect I might be able to code around the extra runs, but perhaps there is a better way to stop that behavior?

Mark Over a year ago

Okay, I had something wrong, I reduced my example to simple simple and it worked. Thanks imvain2! I'll call this solved and move on.

Collectives™ on Stack Overflow

Generic JQuery for multiple html elements

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related