I try to use jQuery file upload in a bootstrap modal with external content.
I've no problem with Firefox and Explorer, but with Chrome i've got this error
Cannot read property 'parseMetaData' of undefined
I include jQuery.js and jQuery.ui.min.js in main template and all other js directly in php page called by modal in this order:
<script src="//blueimp.github.io/JavaScript-Templates/js/tmpl.min.js"></script>
<script src="//blueimp.github.io/JavaScript-Load-Image/js/load-image.all.min.js"></script>
<script src="//blueimp.github.io/JavaScript-Canvas-to-Blob/js/canvas-to-blob.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//blueimp.github.io/Gallery/js/jquery.blueimp-gallery.min.js"></script>
<script src="js/jquery.iframe-transport.js"></script>
<script src="js/jquery.fileupload.js"></script>
<script src="js/jquery.fileupload-process.js"></script>
<script src="js/jquery.fileupload-image.js"></script>
<script src="js/jquery.fileupload-audio.js"></script>
<script src="js/jquery.fileupload-video.js"></script>
<script src="js/jquery.fileupload-validate.js"></script>
<script src="js/jquery.fileupload-ui.js"></script>
Then there is my code:
jQuery(function ($) {
'use strict';
$('#fileupload').fileupload({
autoUpload: true,
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 8000000,
maxNumberOfFiles: 6,
disableImageResize: /Android(?!.*Chrome)|Opera/
.test(window.navigator && navigator.userAgent),
imageMaxWidth: 1200,
imageMaxHeight: 900,
imageCrop: false,
url: '/wall/'
});
$('#fileupload').fileupload(
'option',
'redirect',
window.location.href.replace(
/\/[^\/]*$/,
'/cors/result.html?%s'
)
);
});
Anyone could help me?
i found the answer!
I've to include all the scripts in the header of main template.
Bye
Related
i already add the plugin with cli
github.com.
and this my code
<button onclick="slide('right', 'dashboard.html')">back</button>
<script type="text/javascript">
function slide(direction,href) {
window.plugins.nativepagetransitions.slide(
{
'duration': 400,
'direction': direction,
'iosdelay': 50,
'androiddelay': 120,
'winphonedelay':800,
'href': href
},
function () {
console.log('slide transition finished');
});
}
</script>
and also i already add
<script type="text/javascript" src="cordova.js"></script>
this my complete code
pastebin.com
but is not working, i have error on console
exec proxy not found for NativePageTransitions
In JS you only have a 1:
function slide(href)
but in your html you have 2:
slide('right', 'dashboard.html')
I have laravel application and trying to use dialog widget, but I keep getting this error in the console:
TypeError: $(...).dialog is not a function[Learn More]
I tried to test normal jquery functions and it works fine, it is just jquery UI.
<head>
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Scripts -->
<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript">
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( ".opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
Update:
there is a conflict between these lines:
<script src="{{ asset('js/app.js') }}"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
but still can't remove any of them.
Update 2
webpack.mix.js
const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css');
app.js
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#app'
});
bootstrap.js
window._ = require('lodash');
try {
window.$ = window.jQuery = require('jquery');
require('bootstrap-sass');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = window.Laravel.csrfToken;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
See this link: https://github.com/JeffreyWay/laravel-mix/blob/master/docs/jquery-ui.md
NOTE: I am fairly new to Laravel Mix (webpack) and still learning.
In the linked example his resources/assets/js/app.js contains the lines:
import $ from 'jquery';
window.$ = window.jQuery = $;
but in my case I'm editing resources/assets/js/bootstrap.js, which contains the line:
window.$ = window.jQuery = require('jquery');
so I added the widget import line:
import 'jquery-ui/ui/widgets/dialog.js';
After the edits, to run the Mix tasks, I ran this command at my project root: npm run dev
And in my Chrome browser, on the page calling $(...).dialog(), I opened the devtools console and then right clicked on the browser page reload icon and clicked Empty cache and hard reload
Since I am using Laravel Mix (webpack) I do not need to include the jquery specific script tags and stylesheet links.
Are you using the .sass file that you're mixing in your webpack.mix.js file?
If not, try changing your webpack.mix.js to this:
const { mix } = require('laravel-mix');
mix.js('resources/assets/js/app.js', 'public/js');
New to Laravel and web development in general; that worked for me.
Try inserting app.js before jquery-ui.js. This makes jquery-ui.js overwrite any common code. I found it does not cause significant side-effects. Some items like tooltips will look different, but you can just modify the linked js files to handle that if necessary.
I am using jQuery UI Calender for French Language.
But unfortunately I see the below error not sure if I am missing some thing.
Please advice.
Uncaught TypeError: Cannot read property 'regional' of undefined
JS :
/**
French initialisation for the jQuery UI date picker plugin.
**/
/* Written by Keith Wood (kbwood{at}iinet.com.au),
Stéphane Nahmani (sholby#sholby.net),
Stéphane Raimbault <stephane.raimbault#gmail.com> */
jQuery(function($){
$.datepicker.regional['fr'] = {
closeText: 'Fermer',
prevText: 'Précédent',
nextText: 'Suivant',
currentText: 'Aujourd\'hui',
monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin',
'Juil.','Août','Sept.','Oct.','Nov.','Déc.'],
dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.'],
dayNamesMin: ['D','L','M','M','J','V','S'],
weekHeader: 'Sem.',
dateFormat: 'dd/mm/yy',
firstDay: 1,
isRTL: false,
showMonthAfterYear: false,
yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['fr']);
});
Thanks!!
I'm guessing you forgot to include the localisation file:
<script src="https://jquery-ui.googlecode.com/svn-history/r3982/trunk/ui/i18n/jquery.ui.datepicker-nl.js"></script>
Source :Datepicker jQuery UI ... set language
Be sure to do not use ASYNC on script tags, because will fire this error.
Wrong:
<SCRIPT SRC="/includes/js/jquery/jquery-ui.js" TYPE="text/javascript" ASYNC></SCRIPT>
<SCRIPT SRC="/includes/js/jquery/jquery-datepicker-ptBR.js" TYPE="text/javascript" ASYNC></SCRIPT>
Right:
<SCRIPT SRC="/includes/js/jquery/jquery-ui.js" TYPE="text/javascript"></SCRIPT>
<SCRIPT SRC="/includes/js/jquery/jquery-datepicker-ptBR.js" TYPE="text/javascript"></SCRIPT>
i was trying adding Google translate dropdown to a website.
For the sake of simplicity, i added all the code in the same place of the page.
I have added this code (slightly beautified):
<div id="google_translate_element"></div>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{
pageLanguage: 'it',
includedLanguages: 'de,en,es,fr,it',
gaTrack: true,
gaId: 'UA-XXXXXXXX-X'
},
'google_translate_element'
);
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
On the Chrome console i receive this error:
Uncaught TypeError: google.translate.TranslateElement is not a function
This error code doesn't show up with a google search, and i don't know what caused it.
Any help is really appreciated...
Thanks!
You should add google script before your own.
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement(
{
pageLanguage: 'it',
includedLanguages: 'de,en,es,fr,it',
gaTrack: true,
gaId: 'UA-XXXXXXXX-X'
},
'google_translate_element'
);
}
</script>
can't get the following test to work with Firefox 22.0 when AdBlock Plus is enabled. Works just fine on Chrome + when I've disabled adblock. It also works when I'm loading the scripts with script tags instead of requirejs.
./index.html:
<!DOCTYPE html>
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<link rel="stylesheet" type="text/css" href="css/main.css"/>
<!--<link rel="icon" type="image/png" href="img/icon.png"/>-->
<!--<script src="js/lib/jquery.js"></script>-->
<script data-main="js/main" src ="require.js"></script>
<!--
<script src="js/lib/soundmanager2.js"></script>
<script src="js/test.js"></script>
-->
<title></title>
</head>
<body>
<div id="stop" style="cursor:pointer;"> stop</div>
</body>
</html>
./js/main.js:
require.config({
paths:{
jquery:"lib/jquery",
underscore:"lib/underscore",
soundmanager2:"lib/soundmanager2"
/*backbone:"lib/backbone",
detectmobilebrowser:"lib/detectmobilebrowser"*/
},
shim: {
'underscore': {
exports: '_'
},
'soundmanager2':{
exports:"soundManager"
}
}
});
define(['jquery','underscore',"soundmanager2"],
function($,_,soundManager){
alert("hep");
window.soundManager=soundManager;
soundManager.setup({
url: 'swf',
useHTML5Audio:true,
preferFlash: false, // prefer 100% HTML5 mode, where both supported
onready: function() {
alert('SM2 ready!');
/*
soundManager.createSound({
id: 'mySound',
url: './test/test.mp3',
autoLoad: true,
autoPlay: false,
onload: function() {
soundManager.play('mySound');
},
volume: 50
});
*/
},
ontimeout: function() {
alert('SM2 init failed!');
},
defaultOptions: {
// set global default volume for all sound objects
volume: 100
}
});
$("#stop").on("click",function(){
alert("stop");
soundManager.stop("mySound");
});
return soundManager;
});
No errors or anything in the console, no alerts after that initial 'hep!' one.
Classic pattern, fight with some issue for hours, give up and ask for help, find solution immediately after posting.
added
soundManager.beginDelayedInit();
after soundManager.setup() and it works now.
Use require () method of RequireJS to load a module. In the callback write your code what need. Note that parameter of function is a array contains paths that loads dependencies
require.config({
paths:{
jquery:"lib/jquery",
underscore:"lib/underscore",
soundmanager2:"lib/soundmanager2"
/*backbone:"lib/backbone",
detectmobilebrowser:"lib/detectmobilebrowser"*/
},
shim: {
'underscore': {
exports: '_'
},
'soundmanager2':{
exports:"soundManager"
}
}
});
require(['jquery','underscore',"soundmanager2"],function($,_,soundManager){
alert("hep");
window.soundManager=soundManager;
soundManager.setup({
url: 'swf',
useHTML5Audio:true,
preferFlash: false, // prefer 100% HTML5 mode, where both supported
onready: function() {
alert('SM2 ready!');
/*
soundManager.createSound({
id: 'mySound',
url: './test/test.mp3',
autoLoad: true,
autoPlay: false,
onload: function() {
soundManager.play('mySound');
},
volume: 50
});
*/
},
ontimeout: function() {
alert('SM2 init failed!');
},
defaultOptions: {
// set global default volume for all sound objects
volume: 100
}
});
$("#stop").on("click",function(){
alert("stop");
soundManager.stop("mySound");
});
});