I'm using bootstrap-datepaginator that inside uses bootstrap-datepicker.
Utilizzanto bootstrap-datepicker as a single component, there are no problems to set the language, but the same is not true using bootstrap-datepaginator. How can I do?
I'm trying to set the Italian language as a default for the entire project.
In index.html I put the following script:
<script src="vendors/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="vendors/jquery-ui/ui/i18n/datepicker-it.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker( $.datepicker.regional[ "it" ] );
});
</script>
But in the console I get these errors:
Uncaught TypeError: Cannot read property 'regional' of undefined datepicker-it.js:15
Uncaught TypeError: Cannot read property 'regional' of undefined (index):394
I tried everything but I'm going crazy!
Bootstrap Datepicker i18n
I changed the code in this way:
<script src="vendors/bootstrap-datepicker/js/bootstrap-datepicker.js"></script>
<script src="vendors/bootstrap-datepicker/js/locales/bootstrap-datepicker.it.js"></script>
<script>
$(function() {
$.datepicker.setDefaults( $.datepicker.regional["it"] );
});
</script>
but now the error is as follows:
Uncaught TypeError: Cannot read property 'setDefaults' of undefined
With this fix:
$('.datepicker').datepicker({
language: "it"
});
I haven't got errors in console but the language is always english by default
You can set default options for Bootstrap Datepicker by assigning them like so:
$.fn.datepicker.defaults.language = 'it';
Example below:
$(document).ready(function(){
$.fn.datepicker.defaults.language = 'it';
});
$(document).ready(function(){
$('.datepicker').datepicker();
});
<link href="https://cdn.jsdelivr.net/bootstrap.datepicker-fork/1.3.0/css/datepicker3.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.datepicker-fork/1.3.0/js/bootstrap-datepicker.js"></script>
<script src="https://cdn.jsdelivr.net/bootstrap.datepicker-fork/1.3.0/js/locales/bootstrap-datepicker.it.js"></script>
<input class="datepicker"/>
Use jQuery's extend() utility method to merge your settings into the datepicker defaults object:
$.extend( $.fn.datepicker.defaults, {format: 'dd-mm-yyyy', language: 'nl'} );
<script src="/jquery/jquery.ui.datepicker.js" type="text/javascript"></script>
<script src="/jquery/jquery.ui.datepicker-it.js" type="text/javascript"></script>
<script>
$.datepicker.setDefaults( $.datepicker.regional["it"] );
$( "#data" ).datepicker();
</script>
Related
I tried to display jquery datepicker to my webpage but it giving 2 errors :
Uncaught TypeError: Cannot read property 'fn' of undefined
Uncaught TypeError: $(...).daterangepicker is not a function
looks like I missed something
I'm using jquery 3.3.1.min.js and datepicker.js
here's the code in html and head
<link rel="stylesheet" type="text/css" href="{{ url('') }}/assets/header_css/bootstrap.css" />
<script type="text/javascript" src="{{ url('') }}/assets/header_js/daterangepicker.js"></script>
here's the code for input type
<input type="text" value ="YYYY/MM/DD" class="form-control datepicker" v-model="tanggalpickup" name="tanggalpickup" id="tanggalpickup"/>
here's the code for the javascript
$(document).ready(function() {
$("input.datepicker").singleDatePicker();
});
$.fn.singleDatePicker = function() {
$(this).on("apply.daterangepicker", function(e, picker) {
picker.element.val(picker.startDate.format(picker.locale.format));
});
return $(this).daterangepicker({
locale: {
format: 'YYYY-MM-DD' // Change to local formats YYYY-MM-DD - MM-DD-YYYY
},
singleDatePicker: true,
autoUpdateInput: false
});
};
all your responses will be highly appreciated
The reason is the library datepicker is not initialized correctly. When you add libraries which are using jQuery, You need to add those after jQuery.
The code should be like,
<script src='yourpath/jquery.min.js'></script>
<script src='yourpath/daterangepicker.js'></script>
I try to parse a date in the dd.mm.yyyyformat: Globalize.parseDate(value, "dd.MM.yyyy", "en"); but globalize crashes with errors:
Uncaught Error: E_INVALID_PAR_TYPE: Invalid options parameter
(dd.mm.yyyy). Plain Object expected.
at createError (globalize.js:105)
at validate (globalize.js:182)
at validateParameterType (globalize.js:257)
at validateParameterTypePlainObject (globalize.js:295)
at Function.Globalize.dateParser.Globalize.dateParser (date.js:1853)
at Function.Globalize.parseDate.Globalize.parseDate (date.js:1908)
at $.validator.methods.date (Index:1891)
at $.validator.check (jquery.validate.js:759)
at $.validator.checkForm (jquery.validate.js:450)
Linked script files:
<script src="/Scripts/cldr.js"></script>
<script src="/Scripts/globalize.js"></script>
<script src="/Scripts/globalize/message.js"></script>
<script src="/Scripts/globalize/number.js"></script>
<script src="/Scripts/globalize/date.js"></script>
How can I fix it?
You need to pass the function a value and then an options object.
Globalize.locale('en');
Globalize.parseDate(value, {
skeleton: 'dd.MM.yyyy'
});
You can find the documentation for this here.
I am running into a javascript issue where it's getting a "Uncaught ReferenceError: $ is not defined". With my reading I think it's the order of when I am trying to do $(document).ready before the javascript is loaded up but I am not sure what to do about it. I have tried moving the jquery and the fileuploadmulti above the script but then I get "Uncaught TypeError: $(...).uploadFile is not a function" and then I go down the road of chicken and egg and don't know what is correct. Any help or point in the right direction would be helpful. Thank you.
<script>
//This is where my error shows up
$(document).ready(function(){
var settings = {
url: "/index.php/upload",
method: "POST",
allowedTypes:"jpg,png,gif,doc,pdf,zip",
fileName: "myfile",
multiple: true,
onSuccess:function(files,data,xhr)
{
$("#status").html("<font color='green'>Upload is success</font>");
},
afterUploadAll:function()
{
alert('All Files uploaded');
},
onError: function(files,status,errMsg)
{
$("#status").html("<font color='red'>Upload is Failed</font>");
}
};
$("#mulitplefileuploader").uploadFile(settings);
});
</script>
<script src="/js/jquery.js"></script>
<script src="/js/fileuploadmulti.min.js"></script>
<div class="boxed link">
<div id="mulitplefileuploader">Upload</div>
<div id="status"></div>
</div>
<div class="col-lg-12">
<h1>Adding pages to <?php echo $model->name; ?></h1>
</div>
First check whether JQuery is loaded or not.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
And wrap the all JQuery code inside $(document).ready(function(){ \\code here }); function.
$(...).uploadFile is not a function error because you are not loading the fileupload plugin properly.
Check all script tag URL'S are right or not.
You are using the $ before including jQuery. Try to include it before.
Try to include
<script src="/js/jquery.js"></script>
<script src="/js/fileuploadmulti.min.js"></script>
before $(document).ready(function(){ });
I am trying to embed jqxgrid into my HTML page.
This are the libraries that I import:
<script src="./wicket/resource/org.apache.wicket.resource.JQueryResourceReference/jquery/jquery-1.10.1-ver-1379671500000.js"></script>
<script src="./wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-event-jquery-ver-1379671500000.js"></script>
<script src="./wicket/resource/org.apache.wicket.ajax.AbstractDefaultAjaxBehavior/res/js/wicket-ajax-jquery-ver-1379671500000.js"></script>
<script src="/jquery/jquery-ui.min.js"></script>
<script src="/jqwidgets/jqxcore.js"></script>
<script src="/jqwidgets/jqxdata.js"></script>
<script src="/jqwidgets/jqxbuttons.js"></script>
<script src="/jqwidgets/jqxscrollbar.js"></script>
<script src="/jqwidgets/jqxmenu.js"></script>
<script src="/jqwidgets/jqxcheckbox.js"></script>
<script src="/jqwidgets/jqxlistbox.js"></script>
<script src="/jqwidgets/jqxdropdownlist.js"></script>
<script src="/jqwidgets/jqxgrid.js"></script>
<script src="/jqwidgets/jqxgrid.columnsresize.js"></script>
<script src="/jqwidgets/jqxgrid.edit.js"></script>
<script src="/jqwidgets/jqxgrid.filter.js"></script>
<script src="/jqwidgets/jqxgrid.pager.js"></script>
<script src="/jqwidgets/jqxgrid.selection.js"></script>
<script src="/jqwidgets/jqxgrid.sort.js"></script>
I omitted type="text/javascript" for simplicity reasons. As you can see the whole think is a wicket application, so I can't really influence the first three imports.
I implemented the jqxgrid as follows:
<script type="text/javascript">
$(document).ready(function() {
var theme = "smoothness";
var dataAdapter = new $.jqx.dataAdapter(data);
$("#jqxgrid").jqxGrid({
width : "99%",
autoheight: true,
theme : theme,
// many more configuration options
columns: [ /* column declaration */ ]
});
// events
$("#jqxgrid").on('cellendedit', function(event) {
var args = event.args;
$.post("EditResponse", {
id: $('#jqxgrid').jqGrid('getCell',args.rowindex,'Name'),
value: args.value
});
});
});
</script>
Again I omitted (in my opinion) unnecessary details, as the initializaton of jqxgrid works fine, I see the table with every data I want it to show.
But when I edit a cell and end editing, the row
$('#jqxgrid').jqGrid('getCell',args.rowindex,'Name')
yields an error in the console:
TypeError: Object [object Object] has no method 'jqGrid'
I did some research but could not fine a clear explanation. Any experiences what could be wrong? Any import I forgot? Anything in the wrong order?
type Error, change
$('#jqxgrid').jqGrid(...
to
$('#jqxgrid').jqxGrid(...
I just switched my App to run on MVC3 and the Razor view engine, and now I'm getting a JavaScript error. The thing is, nothing has changed on the JavaScript side of things... it worked before.
Here's the code
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var json_region = [{"value":365,"label":"Calgary"},{"value":368,"label":"Canmore"},{"value":393,"label":"Edmonton"}]
$(function() {
$('#UserRegion').autocomplete({
source: json_region,
selectFirst: true,
select: function( event, ui ) {
$('#RegionID').val( ui.item.value );
$('#UserRegion').val( ui.item.label );
return false;
}
});
});
</script>
<script type="text/javascript" src="/Extras/urbannow.js/1"></script>
<script src="/Assets/Scripts/jquery.ui.autocomplete.selectfirst.js" type="text/javascript"></script>
<script src="/Assets/Scripts/wmd.js" type="text/javascript"></script>
<script src="/Assets/Scripts/showdown.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="/Assets/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
And this is erroring
$('#UserRegion').autocomplete({
The console says
SCRIPT438: Object doesn't support this property or method
And I just can't figure this one out.
You're including jQuery twice.
You're calling .autocomplete immediately after including the base jQuery library - which does not include the autocomplete plugin. Fix the order of your script references and make sure the autocomplete plugin is included before you try to use it.
load this BEFORE you custom script call
<script src="/Assets/Scripts/jquery.ui.autocomplete.selectfirst.js" type="text/javascript"></script>
or at very best custom code should be after all your JavaScript files.
so , your code should look like something like this
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/Extras/urbannow.js/1"></script>
<script src="/Assets/Scripts/jquery.ui.autocomplete.selectfirst.js" type="text/javascript"></script>
<script src="/Assets/Scripts/wmd.js" type="text/javascript"></script>
<script src="/Assets/Scripts/showdown.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script src="/Assets/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<script type="text/javascript">
var json_region = [{"value":365,"label":"Calgary"},{"value":368,"label":"Canmore"},{"value":393,"label":"Edmonton"}];
$(function() {
$('#UserRegion').autocomplete({
source: json_region,
selectFirst: true,
select: function( event, ui ) {
$('#RegionID').val( ui.item.value );
$('#UserRegion').val( ui.item.label );
return false;
}
});
});
</script>
Duplicate jQuery declaration, check View Source of page