I am trying to create a datepicker that allows users to select multiple dates. These are the javascript and stylesheet references I am using:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://multidatespickr.sourceforge.net/jquery-ui.multidatespicker.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/themes/smoothness/jquery-ui.css" />
This is the function I am calling once the document is ready:
try{
$("#recievedInHouseDate").multiDatesPicker();
}catch(e){
alert(e)
};
And the alert I get is: TypeError: $(...).multiDatesPicker is not a function
Any idea why this wouldn't work. I can get the regular date picker working fine if I only want to select a single date.
Why do you import jquery-ui twice?
here:
script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js">/script
and here:
script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js">/script
I think you should remove one of them. At least in my case that caused a similar to yours problem with Datepicker.
Try this line to avoid any conflict while loading jQuery libraries
jQuery.noConflict();
Related
I've been trying to figure this out for days but nothing has come of it.
I want to have a date time picker on my cshtml page but it keeps coming up with the following:
JavaScript runtime error: Object doesn't support property or method 'datetimepicker'
I thought I had the proper links on my page but obviously not.
Have tried so many times with different combinations but no joy.
<link rel="stylesheet" type="text/css" href="jquery.datetimepicker.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.datetimepicker.js"></script>
<script>
$('#DateOfAppointment').datetimepicker({
inline: true,
});
</script>
The link I am trying to use: https://www.jqueryscript.net/time-clock/Clean-jQuery-Date-Time-Picker-Plugin-datetimepicker.html
The problem is the assets you're using, check the code below and download the js file and css file in order to get it work in your project.
$('#DateOfAppointment').datetimepicker({
inline: true,
});
<script src="https://xdsoft.net/cache/903cd11f82fad90c9e8c4c45801eb6f2.js"></script>
<script src="https://xdsoft.net/scripts/datetimepicker/build/jquery.datetimepicker.min.js"></script>
<link href="https://xdsoft.net/scripts/datetimepicker/build/jquery.datetimepicker.min.css" rel="stylesheet" />
<input type="text" id="DateOfAppointment" />
Hope it helps!
On document ready will solve your problem
<script>
$(document).ready(function(){
$('#DateOfAppointment').datetimepicker({
inline: true,
});
});
</script>
I'm trying to get this toggles plugin to work but I keep getting the error:
Uncaught TypeError: Object [object Object] has no method 'toggles'
The plugin doesn't give too much implementation information so I figured it would be straight-forward. I know the plugin script is linking correctly and I have jquery above that. Here's my html:
<html>
<head>
<link type="text/css" rel="stylesheet" href="toggles-modern.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" href="toggles.js"></script>
</head>
<body>
<div class="toggle"></div>
<script type="text/javascript">$('.toggle').toggles();</script>
</body>
</html>
How do I get this plugin working exactly? The plugin resources are here:
https://github.com/simontabor/jquery-toggles
http://simontabor.com/labs/toggles/
See if this helps at all....
I use "https://rawgithub.com" to do CDN as that is what they suggest.... HOWEVER this is NOT meant for production type environments so don't do that
<script type="text/javascript" src="https://rawgithub.com/simontabor/jquery-toggles/master/toggles.min.js"></script>
$(function () {
$('.toggle').toggles();
});
I seem to have it working with including the file directly from github... Do you have errors in your dev console?
http://jsfiddle.net/Mutmatt/fJ6gF
Please note: In the js fiddle i included two external resources on the left panel**
I am using some jquery files for auto complete and datetime picker control but 3 files among them are conflicting:
Two files for autocomplete are
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>
One file for Calender datetime picker is:
<script src="../assets/js/jquery-1.8.3.min.js"></script>
These 3 files are confilicting when i comment date time picker file autocomplete works and if I uncomment it autocomplete stops.
If you want to include both the js files you can..
<!-- load jQuery 1_8_3 -->
<script src="../assets/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript">
var jQuery_1_8_3 = $.noConflict(true);
</script>
<!-- load jQuery 1.4.2 -->
<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script>
<script type="text/javascript">
var jQuery_1_4_2= $.noConflict(true);
</script>
Its better to avoid multiple versions in the page..and its better to use appropriate jquery-UI Version with the jquery version
If you try only these, i think you are good to go:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js">
</script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.1/jquery-ui.js">
</script>
No need to add other versions of jquery.
That's probably because you are including jQuery 2 times. An old version and a newer version.
I would recommend you try and use the most recent versions of both jQuery and jQuery UI and check if everything still works.
I am trying to get my MVC3, EF4 project to work with the javascript datepicker, but I am running into issues as I want the date to be in the UK format (dd/mm/yyyy).
I have spent several hours researching this issue and I have decided to implement the 'globalize' library scripts as I have seen in this link.
However I am getting a Uncaught TypeError: Cannot read property 'methods' of undefined in the javascript (coming from the $.validator.methods.date line) when I run it. My knowledge of javascript is pretty limited and all the examples I have found that use the 'globalize' library have no mention of this error and therefore I am quite stumped.
I have shown the relevant code from my view below:
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.5.1.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.11.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.globalize/globalize.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.globalize/cultures/globalize.culture.en-GB.js")" type="text/javascript"></script>
<link href="../../Content/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
Globalize.culture("en-GB");
$.validator.methods.date = function (value, element) { return this.optional(element) || Globalize.parseDate(value); }
</script>
<script type="text/javascript">
$(document).ready(function () {
$('.date').datepicker({ dateFormat: "dd/mm/yy" });
});
</script>
//SNIP
<div class="editor-field">
#Html.TextBox("Expires", Model.Expires, new { #class = "date" })
#Html.ValidationMessageFor(model => model.Expires)
</div>
Could someone please help me fix this issue.
Thanks very much.
I haven't used the Globalize library in a while but I feel like it might be overkill for you -- assuming that you only need the date value in en-GB, the following Javascript/jQuery code will work (and here is a fiddle):
<input type="text" class="date" placeholder="en-gb datepicker" />
<button id="btnGetVal">Get Value</button>
<script type="text/javascript">
$(document).ready(function () {
/* you correctly have the date format set when initializing the datepicker */
$('.date').datepicker({ dateFormat: "dd/mm/yy" });
/* create an event handler for the "click" function of the button */
$('#btnGetVal').on('click', function() {
/* event handler */
var targetValue = $('.date').val();
alert(targetValue);
});
});
</script>
I tested this with jQuery 2.1.0 and jQuery UI 1.10.4 - you may need to update your NuGet packages for both (I see you're using a really old version of jQuery so I assume you either need to support IE8 or are using an older version of MVC).
As an aside, you may want to make sure you initialize all of your Javascript code inside of the document.ready() function so that all functions are accessible upon load (because your Globalize code could not be accessible when you init the datepicker(). I'd recommend reading more here: http://learn.jquery.com/using-jquery-core/document-ready/
I've included Jquery & Jquery mobiles latest versions.
I'm basically trying to use a mobile button to call a JavaScript function but having issues.
This works fine in chrome but not in webworks on the playbook (this is where i get the errors)
<script type="text/javascript" src="js/personSearch.js" ></script>
Including my custom JavaScript code
Within that file i have the folllowing code
function testme()
{
alert("tet");
}
I've tried all the following ways:
<input type="button" onclick="testme();" value="Button" />
<a id="psClear" href="javascript:testme();" data-role="button" data-inline="true">Clear</a>
For them all I get the error:
mainMenu.html:1ReferenceError: Can't find variable: testme
I think its something to do with the way J query Mobile renders buttons but not sure...
UPDATE
If i add rel="external" to the page before it loads in the javascript and works fine, but reloads all the scripts again, and doesnt work without rel="exnteral"
<link rel="stylesheet" type="text/css" href="css/jqueryMobileCSS.css">
<link rel="stylesheet" type="text/css" href="css/customStyle.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jqueryMobile.js"></script>
<script src="js/eBar.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/ain.js"></script>
<script src="js/tleBar.js"></script>
<script type="text/javascript" src="js/ps.js" ></script>
So without rel="external" js/ps.js doesnt seem to load...
The scripts located on both pages are the exact same but the new page has js/ps,js loaded in aswell..
Thanks
Don't use inline Javascript (read why here) to call functions. It looks like the error you're having is related to the fact that your personSearch.js file hasn't loaded and therefore the function may not exist exist. Use the Chrome/Firebug JS console to check whether the function is definitely defined and then create another script with something resembling the following inside:
$(document).bind('pageinit',function () {
$("#psClear").on('click',function(){
testme();
});
});
This will make sure that the DOM is loaded and ready before binding the click event to your button. Make sure this script is loaded after your personSearch.js script.