Anyone have any experience on doing a popup date picker
with multilingual support, based on the culture itself automatically?
I do try to do it but I am failed to do it. Anyone have any resources that can do it? I am mainly doing for two languages which is en-US and zh-TW. Thanks.
You are not adding the Jquery and CSS reference, that's why you are not able to see the Jquery Calendar.
Try the below code:-
Jquery and CSS reference
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
Also, you must call the selectori.e ID for it to work
$(function () {
$("#datepicker").datepicker();
});
See the Working Demo
Related
For some reason I'm having a hard time getting fullcalendar to work using the google api. The calendar displays but no events are showing. Google developer console is not showing any requests. I've generated my api key and my calendar is public (I've double check a thousand times!) Could someone please check this code and tell me what I'm doing wrong! Using Fullcalendar v2.3.2
<link rel="stylesheet" href="css/style.css">
<link rel='stylesheet' href='css/fullcalendar.css' />
<script src='js/jquery.min.js'></script>
<script src='js/moment.min.js'></script>
<script src='js/fullcalendar.js'></script>
<script type='text/javascript' src='js/gcal.js'></script>
<script src="js/calendar-events.js"></script>
<script type='text/javascript'>
$(document).ready(function() {
$('#calendar').fullCalendar({
googleCalendarApiKey: 'AIzaSyAl9hbpRJO_xVWj2RIZ1l0BwrvgwgMaWZg',
events: {
googleCalendarId: 'nr1e4148mosb7fpk8cf39dto1g#group.calendar.google.com'
}
});
});
</script>
Check and see if the Calendar API is listed as one of the 'Enabled APIs' in your project in the drop-down at the top of the APIs screen. If not - click the Calendar API and click Enable.
I know this issue is a bit stale, but it still took me forever to find a solution that worked. The api key and calendar id should be within eventSources. Also make sure that you have the latest version of fullcalendar (or atleast the latest gcal.js).
Below is the code the I found worked. I found the solution here.
eventSources: [
{ googleCalendarApiKey: 'your api key',
googleCalendarId: 'email#gmail.com',
className: 'fc-event-email'}]
I'm using asp.net and bootstrap. I've got a dropdownlist that I want to deuglify using bootstrap-select. The problem is that if I click the dropdownlist, it doesn't show its content, but if I press a key when it's focused it will display the contents of the dropdownlist.
Head:
<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/Scripts/bootstrap-select.min.js" />
<script type="text/javascript" src="/Scripts/bootstrap.js"></script>
<link rel="stylesheet" href="/css/bootstrap.css" />
<link rel="stylesheet" href="/css/bootstrap-select.min.css" />
<link rel="stylesheet" href="/css/bootstrap.min.css" />
JS:
<script type="text/javascript">
$(document).ready(function () {
$('select').selectpicker();
});
</script>
The JS is located after the body.
I wrestled with this problem tonight, although I don't use anything like asp.net. I discovered that in some circumstances the underlying bootstrap events were not firing.
Bootstrap selects use a button to toggle the list of menu items, and use delegation to bind events to to the toggle button. Sometimes when bootstrap-select generates the toggle button the delegation does not work properly.
I found that by using the JavaScript interface on the toggle button after bootstrap-select created it, all was well:
$('select').selectpicker();
$('.dropdown-toggle').dropdown();
Bootstrap Dropdown Javascript API
This was working on Friday, and now isn't. I've got this at the beginning of a UserControl:
<link type="text/css" href="/App_Themes/css/ui-lightness/jquery-ui-1.8.11.custom.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery-ui-1.8.11.custom.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#MainContent_ucSearchControl_dpPickupStart").datepicker();
$("#MainContent_ucSearchControl_dpPickupEnd").datepicker();
});
</script>
And further down, this:
<td><asp:TextBox id="dpPickupStart" runat="server" style="width: 65px"/></td>
<td><asp:TextBox id="dpPickupEnd" runat="server" style="width: 65px"/></td>
Which results in (in the rendered page) input controls with:
name="ctl00$ctl00$MainContent$ucSearchControl$dpPickupStart" id="MainContent_ucSearchControl_dpPickupStart"
name="ctl00$ctl00$MainContent$ucSearchControl$dpPickupEnd" id="MainContent_ucSearchControl_dpPickupEnd"
And yet, every time the page loads, I get an Object Expected javascript error which points to the $(document).ready location.
What am I missing?
EDIT: Firebug is reporting that:
$ is not defined
[Break On This Error] $(document).ready(function () {
Being a user control you cannot guarantee that the relative path to your JS files will always be correct depending on the location of the parent page in the file system hierarchy.
Therefore change you JS script tags as follows to use the Control.ResolveUrl method which converts a URL into one that is usable on the requesting client.
<script src='<%=ResolveUrl("~/Scripts/jquery-1.5.1.min.js")%>' type="text/javascript"></script>
<script src='<%=ResolveUrl("~/Scripts/jquery-ui-1.8.11.custom.min.js")%>' type="text/javascript"></script>
Or reference from a CDN for added performace bonus of caching.
jQuery hosted on google
jQuery UI hosted on google
That error is caused due to Jquery not available. I think Swaff's solution should work(+1). Check if you have the Jquery-1.5.1.min.js file is available in Scripts folder of your solution. Or it could also be that your Scripts folder is renamed.
HTH.
is there any component or control exist for asp.net application that load jquery ui scripts and themes?
thanks.
Depend on this sample Can Any body help me and introducing component or control ? :)
hmm - couldn't you just have them included in your masterpage and then they'd be on every page referenced (by that master) on the site??
this is how i'd do it if you wanted to keep it simple. if you're looking for a control to do this, then you could of course create a usercontrol and place that in the head section of your masterpage to effectively do the same thing.
that said, maybe i've missed something here :)
There aren't that I'm aware of...though it wouldn't be too hard to fashion. Do you need one though? Using the Google cdn for example, all you need is this in your master page:
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
As of a few weeks ago (Sep 17, 2010) Microsoft also hosts jQuery UI:
<script src="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/jquery-ui.js" type="text/javascript"></script>
<link href="http://ajax.microsoft.com/ajax/jquery.ui/1.8.5/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
this sample source maybe useful :)
its created for jquery datepicker.
http://hasheminezhad.com/sites/default/files/hasheminezhad.com/JQControls-Source.zip
I am using the ASP.NET Client-Side ajax control toolkit in my asp.net MVC application. I see that there is a .js file named "AjaxControlToolkit.ModalPopup.ModalPopupBehavior.js" in the AjaxControlToolkit folder. However, I cannot find any examples on how to use it.
[Edit] -
As mentioned, I am using the Client-side, Script-only control toolkit. For those unfamiliar, here is the description from CodePlex:
AjaxControlToolkit-ScriptFilesOnly.zip
contains script files, CSS style
sheets and pictures used by the
toolkit. Use this download if you
don't want to use embedded resources
and prefer a file-based model.
I have not been able to find many resources on how to use some of the scripts included with this.
CodePlex link: http://www.codeplex.com/AjaxControlToolkit/Release/ProjectReleases.aspx
Yestarday I had the same need to use the popup extender and here are the js files which you should include first.
<script src="javascripts/MicrosoftAjax.js" type="text/javascript" ></script>
<script src="javascripts/AjaxControlToolkit/AjaxControlToolkit.Compat.Timer.Timer.js" type="text/javascript"></script>
<script src="javascripts/AjaxControlToolkit/AjaxControlToolkit.Common.Common.js" type="text/javascript"></script>
<script src="javascripts/AjaxControlToolkit/AjaxControlToolkit.ExtenderBase.BaseScripts.js" type="text/javascript"></script>
<script src="javascripts/AjaxControlToolkit/AjaxControlToolkit.Animation.Animations.js" type="text/javascript"></script>
<script src="javascripts/AjaxControlToolkit/AjaxControlToolkit.DropShadow.DropShadowBehavior.js" type="text/javascript"></script>
<script src="javascripts/AjaxControlToolkit/AjaxControlToolkit.DynamicPopulate.DynamicPopulateBehavior.js" type="text/javascript"></script>
<script src="javascripts/AjaxControlToolkit/AjaxControlToolkit.PopupExtender.PopupBehavior.js" type="text/javascript"></script>
The next step is to create the PopupBehavior from javascript like that:
$create(AjaxControlToolkit.PopupControlBehavior, {"PopupControlID":"div_to_popup","Position":3}, null, null, $get("textbox_input_id"));
If you need to use another control from the AjaxControlToolkit with scripts only without the burden of asp, here is one easy way to find the necessary include js files.
Go to its demo page here and look at the source of the page. At the bottom you will see how to create the control. To find the include files needed for this control select CombineScriptsHandler.ashx and search for "//START". Every line with "//START" shows a script which is included in the page.
Check out the AJAX Toolkit samples. There are live demos, walkthroughs and documentation.