I'm using jquery dropzone.js. To load the form I'm using mustache like below. But I can't innit the dropzone after the page is fully loaded because there is no form loaded on that moment. Is there a option to init the dropzone after it's loaded?
Mustache file with the form:
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Dropzone Area</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user">
<li>Config option 1
</li>
<li>Config option 2
</li>
</ul>
<a class="close-link">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="ibox-content">
<form id="my-awesome-dropzone" class="dropzone" action="#">
<div class="dropzone-previews"></div>
<button type="submit" class="btn btn-primary pull-right">Submit this form!</button>
</form>
<div>
<div class="m text-right"><small>DropzoneJS is an open source library that provides drag'n'drop file uploads with image previews: https://github.com/enyo/dropzone</small> </div>
</div>
</div>
</div>
</div>
The functions to load the mustache and init the dropzone:
<script>
$( document ).ready(function() {
// get the mustache
loadDropZone();
// HOW CAN I DO THIS AFTER THE DROPZONE FORM IS CREATED?
// init dropzone
Dropzone.options.myAwesomeDropzone = {
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
// Dropzone settings
init: function () {
var myDropzone = this;
this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on("sendingmultiple", function () {
});
this.on("successmultiple", function (files, response) {
});
this.on("errormultiple", function (files, response) {
});
}
}
});
function loadDropZone() {
$.get(websiteUrl + 'storages/mustache/image-drop-zone.mst', function(template) {
Mustache.parse(template); // speeds up future uses
var rendered = Mustache.render(template);
$('#block-container').append(rendered);
});
}
</script>
You should initialize dropzone programatically instead of using the options and the auto discover feature.
Should look like this:
<script>
Dropzone.autoDiscover = false; // This is optional in this case
$( document ).ready(function() {
// get the mustache
loadDropZone();
// Now that the form is loaded you can initialize dropzone by creating an instance
// init dropzone
var myAwesomeDropzone = new Dropzone("form#my-awesome-dropzone", {
autoProcessQueue: false,
uploadMultiple: true,
parallelUploads: 100,
maxFiles: 100,
// Dropzone settings
init: function () {
var myDropzone = this;
this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on("sendingmultiple", function () {
});
this.on("successmultiple", function (files, response) {
});
this.on("errormultiple", function (files, response) {
});
}
}
});
function loadDropZone() {
$.get(websiteUrl + 'storages/mustache/image-drop-zone.mst', function(template) {
Mustache.parse(template); // speeds up future uses
var rendered = Mustache.render(template);
$('#block-container').append(rendered);
});
}
</script>
Related
I use blueimp Gallery.
I add an additional attribute, as in the instructions, and shows an error
blueimp Gallery: No or empty list provided as first argument.
<div id="links" class="links"><div class="photo">
<a href="/uploads/gallery/KN5wu5Nt7gwdrmuopBUm3riKJauz8bXsmDp2X3n0.jpeg" title="32434424242" data-description="Alex" data-gallery style>…</a>
<a href="/uploads/gallery/4fPRgdqbh3FPbrw3MTZoyRoYcqNpHa84Mtjxb4f2.jpeg" title="car" data-description="Alex2" data-gallery>…</a>
</div></div>
Why doesn't it work if I do everything according to the instructions?
<div id="links" class="links">
<div class="photo">
#foreach($images as $image)
<img src="/{{$image->image}}" width="200">
#endforeach
</div>
</div>
<div id="blueimp-gallery" class="blueimp-gallery">
<div class="slides"></div>
<h3 class="title"></h3>
<p class="description"></p>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="close">×</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<script src="/js/blueimp-helper.js"></script>
<script src="/js/blueimp-gallery.js"></script>
<script src="/js/blueimp-gallery-fullscreen.js"></script>
<script src="/js/blueimp-gallery-indicator.js"></script>
<script src="/js/vendor/jquery.js"></script>
<script src="/js/jquery.blueimp-gallery.js"></script>
<script>
blueimp.Gallery(
document.getElementById('links'),
{
onslide: function (index, slide) {
var text = this.list[index].getAttribute('data-description'),
node = this.container.find('.description');
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
}
}
);
</script>
The slider itself works, but for some reason my changes are not applied.
///////////////////////////////////////////////////////////////////
answer
document.getElementById('links').onclick = function (event) {
event = event || window.event;
var target = event.target || event.srcElement,
link = target.src ? target.parentNode : target,
options = {
index: link, event: event,
onslide: function (index, slide) {
self = this;
var initializeAdditional = function (index, data, klass, self) {
var text = self.list[index].getAttribute(data),
node = self.container.find(klass);
node.empty();
if (text) {
node[0].appendChild(document.createTextNode(text));
}
};
initializeAdditional(index, 'data-description', '.description', self);
initializeAdditional(index, 'data-example', '.example', self);
}
},
links = this.getElementsByTagName('a');
blueimp.Gallery(links, options);
};
I have the following html:
<div id="tabsuseradmin" class="tabui">
<ul>
<li>Add Users</li>
<li>Delete Users</li>
</ul>
<div id="tabs-1ua">
<div>
</div>
</div>
<div id="tabs-2ua">
<div>
</div>
</div>
</div>
and the following inside my js file document ready function:
$('.tabui').tabs({
activate: function (event, ui) {
$.ajax({
cache: false,
url: "/Session/Index/",
success: function (result) {
if (result.length == 0) {
window.location.href = '/Home/Index/'
}
}
});
}
});
$("#tabs-1ua").tabs({
activate: function (event, ui) {
alert("User add tab has been clicked.");
}
});
Above, you can see I am trying to specify behavior for all tab selections in general using the class tabui (this works fine) and also a specific behavior for an individual tab. This specific action does not work (the alert message does not appear and the breakpoint on the alert doesn't get hit). What should I do to fix it? Thank you.
Based on your comments, you want to do this:
https://jsfiddle.net/Twisty/eoa9tafm/
$(function() {
$('.tabui').tabs({
activate: function(event, ui) {
$.ajax({
cache: false,
url: "/Session/Index/",
success: function(result) {
if (result.length == 0) {
window.location.href = '/Home/Index/'
}
}
});
}
});
$("a[href='#tabs-1ua']").click(function(event, ui) {
alert("User add tab has been clicked.");
});
});
$("a[href='#tabs-1ua']").on('click', function() {
console.log("User tab clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js"></script>
<div id="tabsuseradmin" class="tabui">
<ul>
<li>Add Users</li>
<li>Delete Users</li>
</ul>
<div id="tabs-1ua">
<div>
</div>
</div>
<div id="tabs-2ua">
<div>
</div>
</div>
</div>
html
<a class="popper btn" rel="popover" data-toggle="popover"><h3 class="gv layout">Layout Plan</h3> </a>
<div class="popper-content hide">
<img src="images/layout1.jpg" class="btn"/>
<img src="images/layout2.jpg" class="btn"/>
<img src="images/layout3.jpg" class="btn"/>
</div>
script:
$('.popper').popover({
placement: 'bottom',
container: 'body',
html: true,
content: function () {
return $(this).next('.popper-content').html();
}
});
i want this to execute on popover show, thanks in advance can any find what is the problem here,
script:
$popover.on("show", function(e) {
$("#transbg").css("padding-bottom","2600px");
});
the below ref code works fine in fiddle but not with my code
var $popover = $(".poper").popover({
trigger: "click"
}).click(function(e) {
e.$("#transbg").css("padding-bottom","260px");
});
$popover.on("hide", function(e) {
$("#transbg").css("padding-bottom","50px");
});
The popover show event syntax is not correct,Can you try the following
HTML
<a class="poper btn" rel="popover" data-toggle="popover">
<h3 class="gv layout">
Layout Plan</h3>
</a>
<div class="popper-content hide">
html
</div>
JS
var abc = $('.poper').popover({
placement: 'bottom',
container: 'body',
trigger: 'hover',
html: true,
content: function () {
return $(this).next('.popper-content').html();
}
});
abc.on("shown.bs.popover", function (e) {
console.log("popover shown");
});
abc.on("hidden.bs.popover", function (e) {
console.log("popover hidden");
});
Fiddler
Please refer this link regarding bootstrap popover
I'm creating a prototype application. I wanted to template my header and footer over html files. I'm loading these in using jQuery load.
In my index file I have this in the first part of my body:
<!--COMMON HEADER ------------- -->
<header id="common-include-header" class="blade child ns">
</header>
I'm including via a document called includes.js which is listed before header.js in my head/script tags. Here is the includes.js like so:
$(document).ready(function () {
$("#common-include-header").load("includes/header.html");
$("#common-include-footer").load("includes/footer.html");
});
Here is my header.html:
<div class="blade-content flexr xc sb">
<img src="img/logo100.svg"></img>
<div class="child g">
<form class="search-form flexr jc">
<input class="location" value="Auckland" />
<input class="context" placeholder="Find something" />
<button class="child ns"><i class="fa fa-search"></i></button>
</form>
</div>
<button class="search-toggle"><i class="fa fa-search"></i></button>
<div class="child ns">
<button class="sign-in-button pill outline pink">Sign in</button>
<button class="user-signed-in flexr xc hide">
<p>test#gmail.com</p>
<img src="img/av.png"></img>
<i class="fa fa-chevron-down"></i>
</button>
</div>
<nav class="signed-in-nav flexc">
<button type="button" class="dropdown-menu child ns">Favourites</button>
<button type="button" class="dropdown-menu child ns">Reviews</button>
<button type="button" class="dropdown-menu child ns">Businesses</button>
<button type="button" class="dropdown-menu sign-out child ns">Sign out</button>
</nav>
</div>
And my header.js
$(document).ready(function () {
//hide/show mobile search
$(".search-toggle").on("click", function () {
if ($(".toggle-search").hasClass('open')) {
$(".toggle-search").removeClass("open");
} else {
$(".toggle-search").addClass("open");
};
});
//hide/show sign in
$(".sign-in-button").on("click", function () {
$(".sign-in-button").addClass("hide");
$(".user-signed-in").removeClass("hide");
});
//hide/show user menu
$(".user-signed-in").on("click", function () {
if ($(".signed-in-nav").hasClass("open")) {
$(".signed-in-nav").removeClass("open");
$(".user-signed-in").removeClass("open");
} else {
$(".signed-in-nav").addClass("open");
$(".user-signed-in").addClass("open");
};
});
//sign out
$("button.sign-out").on("click", function () {
$(".signed-in-nav").removeClass("open");
$(".user-signed-in").removeClass("open");
$(".user-signed-in").addClass("hide");
$(".sign-in-button").removeClass("hide");
});
});
My problem is that the event handlers aren't binding to .sign-in-button. I would have thought since I used jQuery .on this would work. I can't figure it out. Where am I going wrong?
jQuery's load has a callback function...
Try this:
$("#common-include-header").load("includes/header.html", function(){
// bind to header code here
});
$("#common-include-footer").load("includes/footer.html", function(){
// bind to any footer code here
});
You can also use .toggleClass() instead of having separate lines to add or remove class names.
//hide/show mobile search
$(".search-toggle").on("click", function () {
var isOpen = $(".toggle-search").hasClass('open');
$(".toggle-search").toggleClass("open", !isOpen);
});
//hide/show sign in
$(".sign-in-button").on("click", function () {
$(".sign-in-button").addClass("hide");
$(".user-signed-in").removeClass("hide");
});
//hide/show user menu
$(".user-signed-in").on("click", function () {
var isOpen = $(".signed-in-nav").hasClass("open");
$(".signed-in-nav").toggleClass("open", !isOpen);
$(".user-signed-in").toggleClass("open", !isOpen);
});
//sign out
$("button.sign-out").on("click", function () {
$(".signed-in-nav, .user-signed-in").removeClass("open");
$(".user-signed-in").addClass("hide");
$(".sign-in-button").removeClass("hide");
});
As you are loading your html on DOM ready, all your javascript files are already loaded and your header.html is being loaded after that. So your header.js can not locate the element using $(".search-toggle").on("click", function () { . Here you have to use $(document).on("click",".search-toggle", function () {
I am using dropzone to upload files to my server without any issues, i would like to add extra parameters such a meta data.
Any ideas on how to do this?
Code Below and just using controller in normal fashion
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Select</h5>
<div class="ibox-tools">
<a class="collapse-link">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
</a>
</div>
</div>
<div class="ibox-content">
<form id="my-awesome-dropzone" class="dropzone" action="#Url.Action(" FileUploadHandler ", "Controller ")" method="post" enctype="multipart/form-data">
<div class="dropzone-previews"></div>
<button type="submit" class="btn btn-primary pull-right">Submit your application</button>
</form>
<div>
<div class="m text-right">test</div>
</div>
</div>
</div>
</div>
</div>
`
< script type = "text/javascript" >
$(document).ready(function() {
Dropzone.options.myAwesomeDropzone = {
autoProcessQueue: false,
parallelUploads: 1,
maxFiles: 1,
maxFilesize: 2000,
paramName: "test,123",
acceptedFiles: ".zip",
// Dropzone settings
init: function() {
var myDropzone = this;
this.element.querySelector("button[type=submit]").addEventListener("click", function(e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
//Get All information to submit to server
var appName = "";
var typeOfApp = 1;
var commandLine = "";
var osType = 1;
});
this.on("sending", function(file, xhr, data) {
data.append("filetype", "avataruploadtype");
});
}
}
});
`
The way you have it set up, you're just submitting the form, so one easy approach is to just add inputs (or hidden fields) to the form and handle the multipart form data on the server.
See here for detail:
https://github.com/enyo/dropzone/wiki/Combine-normal-form-with-Dropzone