0

I have been taking my first jQuery tutorial this morning. And it was a bit confusing. For now I just want to show a DatePicker in my asp page using jQuery UI. I have seen multiple samples out there.

This site is instructing to download jQuery UI. Is it necessary to download any of these files/plugins into project folders? What about the portability of the web page? Can't I just refer to online resources to use DatePicker widget like what this tutorial shows?

Such as what's explained in this site:-

Using the JQuery Library hosted by Google CDN (Content Distribution Network) in ASP.Net Applications. Google's Content Distribution Network(also, AJAX Libraries API ) hosts most widely used open source JavaScript libraries which can be used globally across the websites. The main advantage of using google's CDN is they manage all the bug fixes, recent updates and provide a high speed access due to better caching, etc. If we are hosting a public website that uses JQuery, then it is advisable to use this Google's feature to host the JQuery library for us.

References:

EDIT:

Showing the Plunker code in my aspx page is an issue now. I just want to show the date picker in textbox during edit mode.

    <link href="default.css" rel="stylesheet" type="text/css" />
    <script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>  
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.js" type="text/javascript"></script>
            <link href="http://code.jquery.com/ui/1.9.1/themes/smoothness/jquery-ui.css" rel="Stylesheet" type="text/css" />
<script type="text/javascript">
    $(function () {
        $('#StartDateTBox').datepicker()
    })
</script>

<asp:TemplateField HeaderText="Start Date">
    <ItemTemplate>
        <asp:Label ID="Label4" runat="server" Text='<%# Bind("[Start Date]") %>'></asp:Label>
    </ItemTemplate>
    <EditItemTemplate>
       <asp:TextBox ID="StartDateTBox" runat="server"></asp:TextBox>
    </EditItemTemplate>
    <ItemStyle CssClass="itask" />
</asp:TemplateField>
bonCodigo
  • 14,268
  • 1
  • 48
  • 91

2 Answers2

1

You can pull both the JS and CSS from numerous CDN's including google, microsoft and code.jquery.com.

Just add applicable CDN url to either link or script tag

Also the main themes shown in themeroller are also available.

Here's a quick example using cdnjs.cloudfare CDN

charlietfl
  • 170,828
  • 13
  • 121
  • 150
  • Right on, I just finished reading the CDN as per my question EDIT and then saw your answers. Great I am looking into your example. However I have a question, in terms of portability if **Google CDN** changes the url, what will happen to the contents that I am using? **Can you show me a DatePicker example using CDN?** – bonCodigo Jul 17 '14 at 03:52
  • 1
    they won't be changing url's. Those CDN's are heavily relied upon – charlietfl Jul 17 '14 at 03:56
  • jsut added datepicker to same link. Also a benfit of using a major CDN is chances are user may have files already in cache – charlietfl Jul 17 '14 at 03:58
  • However for certain reasons, `cdnjs.cloudflare.com` can't be used. Hope you understand. So using [pure Google CDN I created this.](http://plnkr.co/edit/Ir9EDHRtV37eDCkDnWJl?p=preview). Infact I found a duplicate for this. I just didn't know the exact jargon to look for what I needed. So the bottom line is that it's a Google, Microsoft CDN. Thanks for the clarification though. – bonCodigo Jul 17 '14 at 04:05
  • makes no difference to me where you get it from. As for style , what do you mean? – charlietfl Jul 17 '14 at 04:10
  • Infact CSS isn't no issue. I managed to do that part. In *Plunker* the script works fine. But in `aspx` page, it's is not working. Can you please give me any clue of what's happening. I only need to show datepicker in textbox when in Edit mode. – bonCodigo Jul 17 '14 at 04:31
  • look in browser console...any errors? Are the files loading? Is jquery code wrapped in `ready` handler? – charlietfl Jul 17 '14 at 04:33
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/57458/discussion-between-boncodigo-and-charlietfl). – bonCodigo Jul 17 '14 at 04:51
1

yes you can refer to any CDN. you can get the latest CDN link here

<link rel="Stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>

check other CDNs here

http://jquery.com/download/

biswapm
  • 31
  • 4
  • +1 for CDN but no downloads please. Can you show me a CDN example using DatePicker? – bonCodigo Jul 17 '14 at 03:52
  • 1
    @bonCodigo that download page has links to a number of CDN resources. It's a `quick find` resource location – charlietfl Jul 17 '14 at 04:00
  • yes there are different CDN available Google, Microsoft you can refer which one required. I have showed above by calling Microsoft CDN. – biswapm Jul 17 '14 at 04:25