Dropzone only shows at the end of the form (initially I tried putting it above the summernote) so, the submit button showed only above it. For this reason, I tried putting it outside the form and I'm not sure it works.
I can't include Dropzone in any other div, so, for example, I can't put a border around it.
It looks like it doesn't upload any files (because the following code return only a blank page with "1" written on it - from the upload.php code).
Dropzone doesn't how the RemoveImage link
I used Dropzone because I don't think Summernote can upload other files like pdf, word.
mainpage.php :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="dropzone.css" rel="stylesheet">
<script src="dropzone.js"></script>
<!-- Summernote css -->
<link href="../plugins/summernote/summernote.css" rel="stylesheet" />
<!-- Select2 -->
<link href="../plugins/select2/css/select2.min.css" rel="stylesheet" type="text/css" />
<!-- Jquery filer css -->
<link href="../plugins/jquery.filer/css/jquery.filer.css" rel="stylesheet" />
<link href="../plugins/jquery.filer/css/themes/jquery.filer-dragdropbox-theme.css" rel="stylesheet" />
<!-- App css -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/core.css" rel="stylesheet" type="text/css" />
<link href="assets/css/components.css" rel="stylesheet" type="text/css" />
<link href="assets/css/icons.css" rel="stylesheet" type="text/css" />
<link href="assets/css/pages.css" rel="stylesheet" type="text/css" />
<link href="assets/css/menu.css" rel="stylesheet" type="text/css" />
<link href="assets/css/responsive.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="../plugins/switchery/switchery.min.css">
<script src="assets/js/modernizr.min.js"></script>
</head>
<body>
<div id="wrapper">
<!-- Start content -->
<div class="content">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="page-title-box">
<h3>Postare raspuns</h3>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- end row -->
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="p-6">
<div class="">
<form id="myAwesomeDropzone" class="dropzone" action="upload.php" method="POST" style="border:none" novalidate>
<div class="row">
<div class="col-sm-12">
<div class="card-box">
<h4 class="m-b-30 m-t-0 header-title"><b>Textul postarii</b></h4>
<textarea class="summernote" name="postdescription" id="postdescription" required></textarea>
</div>
</div>
</div>
<h4 class="m-b-30 m-t-0 header-title"><b>Ataseaza fisiere</b></h4>
<div>
<div class="fallback">
<input name="file" type="file" multiple />
</div>
</div>
</form>
<br>
<input type="submit" name="pos" id="pos" value="Postare" class="btn btn-success btn-block" form="myAwesomeDropzone" />
<br>
<br>
<div class="btn btn-info btn-block">
Inapoi la subiect
</div>
</div>
</div>
<!-- end p-20 -->
</div>
<!-- end col -->
</div>
<!-- end row -->
</div>
<!-- container -->
</div>
<!-- content -->
</div>
<script>
var resizefunc = [];
</script>
<!-- jQuery -->
<script src="assets/js/jquery.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/detect.js"></script>
<script src="assets/js/fastclick.js"></script>
<script src="assets/js/jquery.blockUI.js"></script>
<script src="assets/js/waves.js"></script>
<script src="assets/js/jquery.slimscroll.js"></script>
<script src="assets/js/jquery.scrollTo.min.js"></script>
<script src="../plugins/switchery/switchery.min.js"></script>
<script src="../plugins/summernote/summernote.min.js"></script>
<script src="../plugins/select2/js/select2.min.js"></script>
<script src="../plugins/jquery.filer/js/jquery.filer.min.js"></script>
<script src="assets/pages/jquery.blog-add.init.js"></script>
<script src="assets/js/jquery.core.js"></script>
<script src="assets/js/jquery.app.js"></script>
<script>
$(document).ready(function() {
$('.summernote').summernote({
height: 240,
minHeight: null,
maxHeight: null,
focus: false,
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['view', ['fullscreen', 'codeview', 'help']]
],
popover: {
air: []
}
});
$(".select2").select2();
$(".select2-limiting").select2({
maximumSelectionLength: 2
});
Dropzone.options.myAwesomeDropzone = {
autoProcessQueue: false,
url: upload.php,
uploadMultiple: true,
parallelUploads: 20,
maxFiles: 20,
addRemoveLinks: true,
// Dropzone settings
init: function() {
var myDropzone = this;
this.element.querySelector("#pos").addEventListener("click", function (e) {
e.preventDefault();
e.stopPropagation();
myDropzone.processQueue();
});
this.on("sendingmultiple", function(data, xhr, formData) {
//Add additional data to the upload
formData.append("postdescription", jQuery("postdescription").val());
});
this.on("success", function(file, responseText) {
console.log('dfd');
});
}
}
});
</script>
<script src="../plugins/switchery/switchery.min.js"></script>
<!--Summernote js-->
<script src="../plugins/summernote/summernote.min.js"></script>
</body>
</html>
upload.php :
<?php
if(!empty($_FILES)){
foreach($_FILES['file']['name'] as $key=>$val){
$file_name = $_FILES['file']['name'][$key];
// get file extension
$ext = strtolower(pathinfo($file_name, PATHINFO_EXTENSION));
// get filename without extension
$filenamewithoutextension = pathinfo($file_name, PATHINFO_FILENAME);
if (!file_exists(getcwd(). '/uploads')) {
mkdir(getcwd(). '/uploads', 0777);
}
$filename_to_store = $filenamewithoutextension. '_' .uniqid(). '.' .$ext;
move_uploaded_file($_FILES['file']['tmp_name'][$key], getcwd(). '/uploads/'.$filename_to_store);
}
echo "File(s) uploaded successfully";
}
else
{
echo "1";
}
?>
For question 3:
I tried this to see if upload.php really doesn't get any files, so I tried displaying an alert if the Dropzone Queue doesn't exist. But, when I click the submit button, it takes me to upload.php without displaying any alert.
if (myDropzone.getQueuedFiles().length > 0) {
alert("yes");
}
else
{
alert("error")
}
I am using this Bootstrap-DateTimePicker with the latest version of 4.17.47.
I read all the documentation options, functions, and events.
I also included all dependencies of JS and CSS.
But something is not working properly somehow.
<!doctype html>
<html lang="en">
<head>
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript" src="./moment.js"></script>
<script type="text/javascript" src="./bootstrap.min.js"></script>
<script type="text/javascript" src="./bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="./bootstrap.min.css" />
<link rel="stylesheet" href="./bootstrap-datetimepicker.min.css" />
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<input type='text' class="form-control" id='datetimepicker4' />
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
format: 'DD/MM/YYYY hh:mm',
});
});
</script>
</div>
</div>
</body>
</html>
There is an option of format in the documentation about displaying calendar part or time-picker part.
What I want is to display both parts i.e. calendar and time-picker.
But when I set format: 'DD/MM/YYYY' it shows the calendar part properly.
When I set format: 'hh:mm' it shows time-picker properly.
But when I set format:'DD/MM/YYYY hh:mm' to enable both parts, it doesn't show calendar part and only show icon for time-picker and when I click that icon it opens time-picker. This is the same case if I do not set format option explicitly and keep it default to false.
Is there anything I am doing wrong?
Currently Bootstrap-DateTimePicker does not support Bootstrap 4.
In fact, your code looks fine with Bootstrap 3.
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<input type='text' class="form-control" id='datetimepicker4' />
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker4').datetimepicker({
format: 'DD/MM/YYYY hh:mm',
});
});
</script>
</div>
</div>
</body>
</html>
So, I'm trying to connect to my Parse Server using Javascript.
Problem is I keep getting that parse is undefined.
I included the unpkg resource file.
I also manually downloaded that file and saved it in a parse.js file and made a reference it on my site.
Here's the code for my website
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/purecss#1.0.0/build/pure-min.css" integrity="sha384-nn4HPE8lTHyVtfCBi5yW9d20FjT8BJwUXyWZT9InLYax14RDjBj46LmSztkmNP9w" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
<link rel="stylesheet" href="css/login-css.css">
<link rel="stylesheet" href="css/backend.css">
<title> iCheckIn Backend</title>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD-EJG_73OiPF-fZEu-QkEUwRoq75Ew60E"></script>
<script src="https://unpkg.com/parse/dist/parse.js"></script>
<script src="js/parse.js"></script>
</head>
<body>
<div id="sideBar">
<div id="standName">
<span id="pageName">iCheck In </span>
</div>
<div id="avatar">
<div id="admin">
<img src="img/user.png" id="img"><br>
<span id="welcomeSpan">Welcome, Admin.</span> <br><br>
</div>
<div id="menu">
<button class="pure-button menuBtn" onclick="CreateUser()">Map</button>
<button class="pure-button menuBtn" >List</button>
<button class="pure-button menuBtn " >Add Location</button>
<button class="pure-button menuBtn" onclick="CreateUser()" >Add Person</button>
</div>
</div>
</div>
<div id="fullContentDiv">
<div id="topDiv"></div>
<div id="fullCarContent">
<div id="carModels">
<span id="span"> All Tracking Records</span>
</div>
<div id="showSearchDiv">
<hr>
<span id="entrySpan">Show Entries</span>
<div id="search">
<form class="pure-form">
<button class="pure-button" >Search</button>
<input class="pure-input-1-4">
</form>
</div>
</div>
<div id="map">
</div>
</div>
</div>
<footer>
Copyright © 2017 Hugo Monteiro
</footer>
</body>
</html>
And the simple function I'm using is
function CreateUser(){
var Parse = require('parse');
Parse.initialize("mykey");
Parse.server('myurl');
var TestUser = parse.Object.extend("TestUser");
var testuser = new TestUser();
testuser.set("name","Hugo");
testuser.save(null,{
sucess: function(testuser){
alert("Object Created!");
},
error: function(testuser,error){
alert(error.message);
}
});
}
I've already done some searching and I'm unable to come across the solution.
Thanks in advance !
I'm getting the following error when rendering polymer templates from inside angularjs view.
$scope.descriptions is populated through a http GET request as following:
$http.get('http://api.fundsofhope.org/projects/all').success(function(data) {
$scope.descriptions = data;
})
And here is the template, which shows the error.
<div id="cards" ng-repeat="items in descriptions">
<div class="card-wrap">
<paper-card id="paper-card" heading="{{items.title}}" image="../images/1.jpg" elevation="1" ng-click="play(items)">
<paper-fab class="paper-fab" icon="home" elevation="1" ng-click="donationPage(items)"></paper-fab>
<p class="cardDetail">
{{items.description}}
</p>
<paper-dialog id="dialog" entry-animation="scale-up-animation" exit-animation="scale-down-animation">
<div id="image">
<img src="../images/1.jpg">
</div>
<div id="dialogContent">
<h2 class="dialogInfo" id="dialogName">
{{items.ngo.name}}
</h2>
<h2 class="dialogInfo" id="dialogCost">
{{"Cost : " + items.cost}}
</h2>
<h2 id="dialogStatus" class="dialogInfo">
{{"STATUS : " + items.status}}
</h2>
<h2 id="dialogStart" class="dialogInfo">
{{items.startDate}}
</h2>
<h2 id="dialogEnd" class="dialogInfo">
{{items.endDate}}
</h2>
<div class="descriptionBox">
<p class="dialogInfo" id="dialogDetails" maxLength="50">
{{items.description}}
</p>
</div>
</div>
</paper-dialog>
<paper-progress value="50" ></paper-progress>
<paper-progress value="{{items.status / items.cost}}" ></paper-progress>
</paper-card>
</div>
</div>
Surprisingly, this error is encountered only in Chrome (v52). While in Firefox and Microsoft Edge, this error is not thrown but Polymer does not render at all!
Here is the Angular's base template which has the polymer components included:
<head>
<title>fundsofhope</title>
<meta charset="utf-8">
<meta name="google-signin-client_id" content="1095141978516-uqea8udtat0463k3ukomrj1obouacggv.apps.googleusercontent.com">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
<script type="text/javascript" src="../angularJS/angular-route.min.js"></script>
<script type="text/javascript" src = "//connect.facebook.net/en_US/sdk.js";></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://apis.google.com/js/client:platform.js?onload=renderButton" async defer></script>
<script type="text/javascript" src="../customScripts/mainController.js"></script>
<script type="text/javascript" src="../customScripts/dataController.js"></script>
<link rel="import" href="../bower_components/paper-button/paper-button.html">
<link rel="import" href="../bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="../bower_components/paper-card/paper-card.html">
<link rel="import" href="../bower_components/paper-fab/paper-fab.html">
<link rel="import" href="../bower_components/paper-spinner/paper-spinner.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/neon-animation/animations/scale-up-animation.html">
<link rel="import" href="../bower_components/neon-animation/animations/scale-down-animation.html">
<link rel="import" href="../bower_components/iron-ajax/iron-ajax.html">
<link href="../src/home.html">
<link href="../src/loading.html">
<link href="../src/paperCardList.html">
<link href="../src/donationPage.html">
<link rel="stylesheet" type="text/css" href="../styleSheets/sheet.css">
</head>
<body>
<div class="indexDiv1" ng-view></div>
</body>
Any help would be appreciated. Thanks!
I have the following html and JS but am unable to get the step parameter to work for minutes:
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<link rel="stylesheet" href="http://example.gajotres.net/iscrollview/mobiscroll-2.4.custom.min.css" />
<link rel="stylesheet" href="http://www.fajrunt.org/mobiscroll.custom-2.5.1.min.css"/>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script src="http://example.gajotres.net/iscrollview/mobiscroll-2.4.custom.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<input name="demo" id="demo" class="i-txt" />
</div>
</div>
</body>
</html>
and here's the JS code that's giving me problems:
$(function(){
$('#demo').mobiscroll().time({
display: 'inline',
mode: 'scroller',
steps: {
minute: 15,
zeroBased: true
}
});
});