I'm trying to use Dropzone JS to add an upload functionality to an usercontrol, who show a modal popup with two tabs, Dropzone JS is in the second tabs. there are a few updatepanels and when the parent updatepanels does postback, Dropzone JS doesn't work .
This is the usercontrol:
<asp:Panel runat="server" ID="mpto_MainPanel" Class="modal fade" Style="display: none;">
<asp:Panel runat="server" ID="Panel9">
<asp:UpdatePanel runat="server" class="modal-dialog" ID="SecondaryUP" UpdateMode="Conditional" ChildrenAsTriggers="false" >
<Triggers>
<asp:AsyncPostBackTrigger ControlID="mpto_btn_conferma" EventName="click"/>
</Triggers>
<ContentTemplate>
<div class="modal-content" style="width: 600px;">
<asp:Panel runat="server" class="modal-header">
<asp:UpdatePanel runat="server">
<ContentTemplate>
<h4 class="modal-title"><%= pTitolo %></h4>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<div class="modal-body" style="height: 700px;">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#Tab_Mail" aria-controls="Tab_Mail" role="tab" data-toggle="tab">Email</a></li>
<li role="presentation"><a href="#Tab_Allegati" aria-controls="Tab_Allegati" role="tab" data-toggle="tab">Allegati</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<%-- TAB PRINCIPALE --%>
<div role="tabpanel" class="tab-pane active" id="Tab_Mail" style="height: 344px;">
<div class="mpto_RigaForm" style="height: 140px; margin-top: 10px;">
<div style="height: 100px; width: 100px; float: left;">
<asp:Image runat="server" ID="mpto_popup_icon" Style="height: 100px; width: 100px;" />
</div>
<div style="height: 150px; width: 440px; float: left; margin-left: 20px; display: table-cell; vertical-align: middle;">
<div class="mpto_RigaForm">
<div class="mpto_LabelFormSx_1">
A
</div>
<div style="width: 400px; display: inline-block; float: left;">
<asp:DropDownList ID="DropDownCampoTo" runat="server" class="form-control" Style="max-width: 900px; width: 400px;"></asp:DropDownList>
</div>
</div>
<div class="mpto_RigaForm" style="height: 35px;">
<div class="mpto_LabelFormSx_1">
C.C.
</div>
<div style="width: 400px; display: inline-block; float: left;">
<asp:TextBox runat="server" type="text" class="form-control" ID="TXT_DESTINATARIO_CC_1" placeholder="Destinatario in copia" Style="max-width: 900px; width: 400px;"></asp:TextBox>
</div>
</div>
<div class="mpto_RigaForm" style="height: 35px;">
<div class="mpto_LabelFormSx_1">
C.C.
</div>
<div style="width: 400px; display: inline-block; float: left;">
<asp:TextBox runat="server" type="text" class="form-control" ID="TXT_DESTINATARIO_CC_2" placeholder="Destinatario in copia" Style="max-width: 900px; width: 400px;"></asp:TextBox>
</div>
</div>
</div>
</div>
<div class="mpto_RigaForm" style="height: 34px;">
<div class="mpto_LabelFormSx_2">
Oggetto
</div>
<div style="width: 480px; display: inline-block; float: left;">
<asp:TextBox runat="server" type="text" class="form-control" ID="TXT_OGGETTO" placeholder="Oggetto (Obbligatorio)" Style="max-width: 900px; width: 480px;"></asp:TextBox>
</div>
</div>
<div class="mpto_RigaForm" style="height: 150px;">
<div class="mpto_LabelFormSx_2">
Corpo
</div>
<div style="width: 480px; display: inline-block; float: left;">
<asp:TextBox runat="server" type="text" class="form-control" ID="TXT_CORPO" TextMode="MultiLine" placeholder="Corpo della mail (Obbligatorio)" Style="max-width: 900px; max-height: 900px; width: 480px; height: 150px;"></asp:TextBox>
</div>
</div>
</div>
<%-- TAB ALLEGATI --%>
<div role="tabpanel" class="tab-pane" id="Tab_Allegati" style="height: 344px;">
<div class="mpto_RigaForm" style="height: 120px; margin-top: 10px;">
<div style="height: 100px; width: 100px; float: left;">
<asp:Image runat="server" ID="mpto_popup_icon2" Style="height: 100px; width: 100px;" />
</div>
<div style="height: 100px; width: 440px; float: left; margin-left: 20px; display: table-cell; vertical-align: middle;">
<div class="mpto_RigaForm">
<br />
<br />
Qui è possibile aggiungere eventuali allegati alla mail.<br />
<strong>Ti ricordo che l'offerta viene allegata automaticamente!</strong>
</div>
</div>
</div>
<div class="mpto_RigaForm" style="height: 45px;">
<div class="mpto_LabelFormSx_2">
Allegati
</div>
<div style="width: 450px; display: inline-block; float: left; height: 300px;">
<asp:UpdatePanel UpdateMode="Conditional" ChildrenAsTriggers="true" runat="server" ID="UpdatePanel1" style="width: 450px; display: inline-block; float: left; height: 300px;">
<ContentTemplate>
<div id="my-awesome-dropzone" class="dropzone">
<div class="fallback">
<input name="file" type="file" multiple="multiple" runat="server" />
<input name="btnUpload" type="submit" /><br />
<br />
<asp:Label ID="lblFallbackMessage" runat="server" />
</div>
</div>
<div style="height: 40px; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px;">
<br />
Elenco files appena caricati:
</div>
<div id="foo" style="height: 270px; overflow-y: auto; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5em">
</div>
<asp:Button ID="Button2" runat="server" Text="Button" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button2" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
</div>
</div>
<div class="mpto_RigaForm" style="height: 150px;">
<asp:TextBox runat="server" ID="TXT_ELENCO_FILES" Style="display: non;"></asp:TextBox>
<input id="Button1" type="button" value="Cancella lista Allegati" class="btn btn-default" style="margin-top: 10px; margin-left: 80px;" onclick="CancellaLista();" />
</div>
</div>
</div>
</div>
<div class="modal-footer">
<asp:Label runat="server" ID="mpto_LabelMsg" Text="" Width="300px" Style="text-align: left;"></asp:Label>
<asp:Button runat="server" ID="mpto_btn_conferma" type="button" Text="Conferma" CssClass="btn btn-success" />
<asp:Button runat="server" ID="mpto_btn_annulla" type="button" Text="Annulla" CssClass="btn btn-default" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<uc1:MyPopup runat="server" ID="MyPopup" />
this is the javascript code that open/close modal and setup Dropzone JS:
<script type="text/javascript">
function openModal_popup_trasmettiofferta() {
$('#<%= mpto_MainPanel.ClientID%>').modal({
keyboard: true,
show: true,
backdrop: 'static'
})
};
function closeModal_popup_trasmettiofferta() {
$('#<%= mpto_MainPanel.ClientID%>').modal('hide');
$('.modal-backdrop').remove();
};
$('#<%= mpto_MainPanel.ClientID%>').on('shown.bs.modal', function () {
$('#<%= DropDownCampoTo.ClientID%>').focus();
});
function AggiungiFileAllaLista(filename) {
var ActTest = document.getElementById('<%= TXT_ELENCO_FILES.ClientID%>').value;
if (ActTest != "") {
document.getElementById('<%= TXT_ELENCO_FILES.ClientID%>').value = ActTest + ';' + filename;
}
else {
document.getElementById('<%= TXT_ELENCO_FILES.ClientID%>').value = ActTest + filename;
}
// clear file
var fileInputElement = sender.get_inputFile();
fileInputElement.value = "";
}
function CancellaLista() {
document.getElementById('<%= TXT_ELENCO_FILES.ClientID%>').value = "";
}
var divok = "<div style='display:block; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size:14px; color:green;'>"
var divnok = "<div style='display:block; font-family: Helvetica Neue, Helvetica, Arial, sans-serif;font-size:14px; color:red;'>"
var closediv = "</div>"
test();
//$(document).ready(function () {
function test() {
Dropzone.options.myAwesomeDropzone = {
maxFilesize: 20,
maxFiles: 1,
url: "../Controlli/PopupTrasmettiOfferta/Handler.ashx?path=StoredFiles/Temp",
addRemoveLinks: true,
dictResponseError: 'Server not Configured',
dictFileTooBig: "Il file che stai cercando di caricare è di {{filesize}}MB mentre la dimensione massima accettabile è {{maxFilesize}}MB",
createImageThumbnails: false,
acceptedFiles: "",
init: function () {
var self = this;
// config
self.options.addRemoveLinks = true;
self.options.dictRemoveFile = "Cancella";
//New file added
self.on("addedfile", function (file) {
//console.log('new file added ', file);
});
// Send file starts
self.on("sending", function (file) {
console.log('upload started', file);
$('.meter').show();
});
// File upload Progress
self.on("totaluploadprogress", function (progress) {
//console.log("progress ", progress);
$('.roller').width(progress + '%');
});
self.on("queuecomplete", function (progress) {
$('.meter').delay(999).slideUp(999);
});
// On removing file
self.on("removedfile", function (file) {
//console.log(file);
});
// On success
self.on("success", function (file) {
setTimeout(function () {
self.removeAllFiles();
AggiungiFileAllaLista(file.name);
var a = document.getElementById('foo').innerHTML;
document.getElementById('foo').innerHTML = a + divok + ' - ' + file.name + closediv;
}, 500);
});
// On error
self.on("error", function (file, response) {
setTimeout(function () {
//self.removeAllFiles();
//var a = document.getElementById('foo').innerHTML;
//document.getElementById('foo').innerHTML = a + divnok + ' - ' + file.name + '</br> (' + response + ')' + closediv;
}, 500);
});
}
}
//)
};
and this is the vb code that I use to call show and hide modal and configure his controls:
DropDownCampoTo.SelectedValue = "Non Specificato"
mpto_LabelMsg.ForeColor = Drawing.Color.Red
mpto_LabelMsg.Text = ""
TXT_DESTINATARIO_CC_1.Text = String.Empty
TXT_DESTINATARIO_CC_2.Text = String.Empty
TXT_OGGETTO.Text = String.Empty
TXT_CORPO.Text = String.Empty
TXT_ELENCO_FILES.Text = String.Empty
' ScriptManager.RegisterStartupScript(Page, Page.GetType(), "RefreshFileList", "AggiornaListaFile();", True)
pTitolo = "Invia offerta via Email"
mpto_btn_conferma.Text = "Invia Email"
mpto_popup_icon.ImageUrl = ResolveUrl("../../imgs/email-icon.png")
mpto_popup_icon2.ImageUrl = ResolveUrl("../../imgs/clip_icon.png")
DropDownCampoTo.Items.Clear()
DropDownCampoTo.Items.Add(New ListItem With {.Text = "Non specificato", .Value = "Non Specificato"})
Using mydb As New Model_Offerte.DB_Offerte
Dim result As New List(Of Model_Offerte.OttieniDatiOfferta_Result)
result = mydb.OttieniDatiOfferta(pIdOfferta).ToList
Using mydb2 As New DB_Agenda
Dim result2 As New List(Of OttieniElencoPersonaggiAzienda_Result)
result2 = mydb2.OttieniElencoPersonaggiAzienda(result.Item(0).ID_AZIENDA).ToList
Dim Tool As New RegexUtilities
For Each el In result2
If Tool.IsValidEmail(el.EMAIL) Then DropDownCampoTo.Items.Add(New ListItem With {.Text = el.NOME & " " & el.COGNOME & " (" & el.EMAIL & ")", .Value = el.EMAIL})
If Tool.IsValidEmail(el.EMAIL2) Then DropDownCampoTo.Items.Add(New ListItem With {.Text = el.NOME & " " & el.COGNOME & " (" & el.EMAIL2 & ")", .Value = el.EMAIL2})
Next
End Using
End Using
SecondaryUP.Update()
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "LaunchTasmettiOffertaPopup", "openModal_popup_trasmettiofferta();", True)
If I comment SecondaryUP.Update()
and try to show modal popup, Dropzone JS works well until postback of SecondaryUP update panel (by mpto_btn_conferma for example). If I uncomment SecondaryUP.Update() Dropzone JS doesn't work.
Can u help me?
this is the result with comment (Dropzone js works but the rest of modal popup is not updated (image missing for example): dropzone js works
this is the result without comment (Dropzone js doesn't works but the rest of modal is correctly updated (image present) dropzone js doesn't works