acmsohail acmsohail - 2 months ago 12
HTML Question

Jquery how to call the filter function inside array

Im using two function in this code. user can upload image and they can click "+" button and add more images one by one. Also they can remove it if they don't want. I added those code. But if a user click the "+" button the new row file upload button is not working user cant select any files and those are not display in the html.
Please check my jsfiddle link and help me.
https://jsfiddle.net/mhmdsohail/6mee3L8t/14/

var max_fields3 = 10; //maximum input boxes allowed
var wrapper3 = $("#portfoliodocs"); //Fields wrapper
var add_button3 = $(".addmore_doc"); //Add button ID

var x = 1; //initlal text box count
$(add_button3).click(function (e) { //on add input button click
e.preventDefault();
if (x < max_fields3) { //max input box allowed
x++; //text box increment
$(wrapper3).append('<div class="form-group label-floating is-empty onerow portwidth2"><div class="socialmediaside2"><input type="text" class="form-control" name="portfoliodoctitle[]" maxlength="10" value="" placeholder="Document Title"><div class="jFiler jFiler-theme-default"><input type="file" class="docupload" name="portfoliodoc[]" accept="application/pdf, application/doc, application/docx" style="position: absolute; left: -9999px; top: -9999px; z-index: -9999;"><div class="jFiler-input"><div class="jFiler-input-caption"><span>Choose files To Upload</span></div><div class="jFiler-input-button">Choose Files</div></div></div></div><button type="button" class="btn btn-default btn-sm bckbtn remove_field3"><i class="fa fa-trash-o" aria-hidden="true">-</i></button></div>'); //add input box
}
});
$(wrapper3).on("click", ".remove_field3", function (e) { //user click on remove text
e.preventDefault();
$(this).parent('div').remove();
x--;
});
-------------------------------------------
$('.docupload').filer({ //I have to change in here
limit: 12
, maxSize: 2
, fileMaxSize: 1
, extensions: ["jpg", "png", "gif"]
, showThumbs: true
, addMore: true
, allowDuplicates: false
, canvasImage: true
, templates: {
box: '<ul class="jFiler-items-list jFiler-items-grid"></ul>'
, item: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-thumb-overlay">\
<div class="jFiler-item-info">\
<div style="display:table-cell;vertical-align: middle;">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name}}</b></span>\
<span class="jFiler-item-others">{{fi-size2}}</span>\
</div>\
</div>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li>{{fi-progressBar}}</li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>'
, itemAppend: '<li class="jFiler-item">\
<div class="jFiler-item-container">\
<div class="jFiler-item-inner">\
<div class="jFiler-item-thumb">\
<div class="jFiler-item-status"></div>\
<div class="jFiler-item-thumb-overlay">\
<div class="jFiler-item-info">\
<div style="display:table-cell;vertical-align: middle;">\
<span class="jFiler-item-title"><b title="{{fi-name}}">{{fi-name}}</b></span>\
<span class="jFiler-item-others">{{fi-size2}}</span>\
</div>\
</div>\
</div>\
{{fi-image}}\
</div>\
<div class="jFiler-item-assets jFiler-row">\
<ul class="list-inline pull-left">\
<li><span class="jFiler-item-others">{{fi-icon}}</span></li>\
</ul>\
<ul class="list-inline pull-right">\
<li><a class="icon-jfi-trash jFiler-item-trash-action"></a></li>\
</ul>\
</div>\
</div>\
</div>\
</li>'
, progressBar: '<div class="bar"></div>'
, itemAppendToEnd: false
, canvasImage: true
, removeConfirmation: true
, _selectors: {
list: '.jFiler-items-list'
, item: '.jFiler-item'
, progressBar: '.bar'
, remove: '.jFiler-item-trash-action'
}
}
, dialogs: {
alert: function (text) {
return alert(text);
}
, confirm: function (text, callback) {
confirm(text) ? callback() : null;
}
}
, captions: {
button: "Choose Files"
, feedback: "Choose files To Upload"
, feedback2: "files were chosen"
, drop: "Drop file here to Upload"
, removeConfirmation: "Are you sure you want to remove this file?"
, errors: {
filesLimit: "Only {{fi-limit}} files are allowed to be uploaded."
, filesType: "Only Images are allowed to be dddduploaded."
, filesSize: "{{fi-name}} is too large! Please upload file up to {{fi-maxSize}} MB."
, filesSizeAll: "Files you've choosed are too large! Please upload files up to {{fi-maxSize}} MB."
}
}
});
https://jsfiddle.net/mhmdsohail/6mee3L8t/4/

Answer

This probably happens because the filer intialization just binds its functions to the result of the $('.docupload') selector at the moment it is been executed. So any .docupload elements you add afterwards have no filer functions bound to it. Try moving the filter initialization inside the add event, so anytime you add a new file upload item the function is bound to the newly create html elements.

Demo

Comments