Skip to main content
C
chrisa20868523
Participant
September 9, 2015
Answered

jQuery beginner

  • September 9, 2015
  • 2 replies
  • 1028 views

Hi all, sorry in advance if this is basic stuff but I am very new to web design and jQuery and I have literally no idea what I'm doing!!

I've built a site in muse and want to add a datepicker to one of the pages. I have downloaded a theme pack from jQueryUI.com which comes with lots of code but I have no idea how I use it in Muse.

Any help and guidance would be very much appreciated,

Thanks

Chris

This topic has been closed for replies.
Correct answer Nancy OShea

Hi Chris,

I don't use Muse myself, so I'm at a disadvantage on how best to insert code into your MU project.  I think the MU forum can help you better with that bit of the puzzle.  But I will show you how to easily create a datepicker on your page without downloading a single line of code from jQuery.  All the necessary bits can be referenced directly from the jQuery content distribution networks or CDNs.

This is a working example. Paste this code into a plain text editor like Notepad.  SaveAs test.html and preview it in a browser.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery UI Datepicker - Default functionality</title>

<!--jQuery UI Theme-->

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

</head>

<body>

<!--INSERT THIS CODE WHERE YOU WANT THE DATEPICKER TO APPEAR-->

<p>Date: <input type="text" id="datepicker"></p>

<!--INSERT THIS CODE AT THE BOTTOM OF YOUR PAGE-->

<!--jQuery Core Library-->

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<!--jQuery UI Library-->

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<!--function code to invoke datepicker on page load--> <script>

  $(function() {

    $( "#datepicker" ).datepicker();

  });

  </script>

</body>

</html>

If you want a different Theme, replace the default smoothness, with one of the other themes below.

themes/smoothness/jquery-ui.css:

OITHER THEMES:

black-tie

blitzer

cupertino

dark-hive

dot-luv

eggplant

excite-bike

flick

hot-sneaks

humanity

le-frog

mint-choc

overcast

pepper-grinder

redmond

smoothness

south-street

start

sunny

swanky-purse

trontastic

ui-darkness

ui-lightness

vader

Nancy O.

2 replies

sinious
sinious
Legend
September 9, 2015

Chris ~ Welcome, and before we start running with this question directly, let's see if we can crawl first.

There are too many areas of potential problems so let's try to step by step get you running. I'm trying to speak rather generally here because the process of installing any other 3rd party components will be along the same exact lines so you'll already know how to handle it.

jQueryUI and all the extras you downloaded all come with instructions on how to include them on a standard page, so let's see if you can do that. Let's install it on a blank page and see if the widget itself even functions.

If you don't already have a webserver online, please grab one to work on locally. Otherwise file includes are not going to work for a variety of good reasons. If you do have one online, make sure you have some FTP software all connected up to it.

Make a basic HTML page. In HTML5 and during rapid testing you really don't even need the formalities of lang or charset so this is literally a blank page:

<!doctype html>

<html>

<head>

     <title>Testing</title>

     <!-- COMMENT: This is where some libraries may ask you to put things when they refer to the "head", -->

     <!--                     and also where all your initial CSS will be included -->

</head>

<body>

     <!-- COMMENT: Here is your content, where most of the markup the plugins require will go -->

     <p>Hello, World.</p>

     <!-- COMMENT: This is the end of the body, where any additional non-head JavaScript belongs -->

</body>

</html>

With that page, please follow your jQueryUI's instructions to install itself as well as your theme and see if you can get just the widget working alone. If not, try to make it a public URL you can share here so we can help you get it functioning.

Quick Tip: Use your browsers "Developer Tools" whenever possible. On Chrome or Firefox you can access them by hitting CTRL+SHIFT+I, on Internet Explorer you can launch them with F12, etc. Use the "Console" tab to read any errors that might give you a hint while trying to get this page working.

Once the widget is working, we move from crawling to walking. And please don't take that literally, this process really is a crawl, walk and run process for all level of developers integrating anything into complex environments.

C
chrisa20868523Author
Participant
September 10, 2015

I'm sorry but this may be a very slow painful crawl!

I have downloaded XAMPP 5.6 12-0 from the link you've provided.

I don't seem to have any install instructions in the jQueryUI folders I downloaded, this is what I have in the folder...

sinious
sinious
Legend
September 10, 2015

That's ok, this forum is for all levels of questions.

The install instructions are either included, or are more typically on the site itself. One thing to note is jQuery and the various versions of it (mobile, ui, etc) are all connected. That's a jQuery specific thing however. The instructions on using jQuery itself are sufficient for jQuery UI as well: http://learn.jquery.com/about-jquery/how-jquery-works/

As you can see there, jQuery is loaded right before the body tag.

In my HTML snippit above you can see me mention that it's often that scripts are loaded before the end of the body. Just to answer you straight, where you load jQuery matters when you mix it with other things. Since we are not mixing and were not instructed otherwise, that's where you put the scripts (.js files). The CSS files go in the <head></head> area.

A couple tips..

1, the order of loading does matter. If no instruction is given, always assume you should load what looks like the "core" app itself first. Any other files that come along with it (e.g. core-something-else.js) will probably expect the core to be loaded. In this case, I would safely say jquery-ui.js should be loaded before jquery-ui-anythingelse.js. Same goes for CSS, load in jquery-ui.css before loading in jquery-ui-anythingelse.css.

2, When really lost, use the libraries demos and examples. When you look in http://jqueryui.com/demos/ you'll see you can not only get sample code usage for the UI widgets but there's a "full source" button to show you how they did it. Examine how they loaded their own scripts in their demos.

After you get jQuery UI in, literally after, then you should be able to place your calendar widgets code and see if you can get it working.

Mylenium
Mylenium
Legend
September 9, 2015

You insert it as an object/ custom HTML as per their instructions, possibly even only after publishing the site using the native HTML code.

Mylenium

C
chrisa20868523Author
Participant
September 9, 2015

Thanks for your reply Mylenium,

I've tried all sorts of approaches as you've suggested but can't seem to work out how to do it!

sinious
sinious
Legend
September 11, 2015

Hi Chris,

I don't use Muse myself, so I'm at a disadvantage on how best to insert code into your MU project.  I think the MU forum can help you better with that bit of the puzzle.  But I will show you how to easily create a datepicker on your page without downloading a single line of code from jQuery.  All the necessary bits can be referenced directly from the jQuery content distribution networks or CDNs.

This is a working example. Paste this code into a plain text editor like Notepad.  SaveAs test.html and preview it in a browser.

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>jQuery UI Datepicker - Default functionality</title>

<!--jQuery UI Theme-->

<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

</head>

<body>

<!--INSERT THIS CODE WHERE YOU WANT THE DATEPICKER TO APPEAR-->

<p>Date: <input type="text" id="datepicker"></p>

<!--INSERT THIS CODE AT THE BOTTOM OF YOUR PAGE-->

<!--jQuery Core Library-->

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>

<!--jQuery UI Library-->

<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<!--function code to invoke datepicker on page load--> <script>

  $(function() {

    $( "#datepicker" ).datepicker();

  });

  </script>

</body>

</html>

If you want a different Theme, replace the default smoothness, with one of the other themes below.

themes/smoothness/jquery-ui.css:

OITHER THEMES:

black-tie

blitzer

cupertino

dark-hive

dot-luv

eggplant

excite-bike

flick

hot-sneaks

humanity

le-frog

mint-choc

overcast

pepper-grinder

redmond

smoothness

south-street

start

sunny

swanky-purse

trontastic

ui-darkness

ui-lightness

vader

Nancy O.


I think Nancy's approach is more suitable for you. In your case which required a calendar widget date picker, combine what Mylenium mentioned which is to select a place for the widget and then use the insert as and object/HTML, and paste just the widget code from Nancy (everything between the beginning <body> and end </body> tag, copy all of it).

If it still doesn't seem to work, close Muse, use a text editor (notepad, simpletext, etc) and open the file Muse generated. Locate the code you tried to have Muse insert for you. Note the location of the code, and delete it. Then copy Nancy's code and paste it right back in the same location. Try the page running from your server.

If it works, great. If you continue editing and Muse and it stops working, let us know.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices