Thread Rating:
  • 1 Vote(s) - 3 Average
  • 1
  • 2
  • 3
  • 4
  • 5
SOLVED jQuery datepicker
#1
Hello
I want to use the jQuery datepicker widget. How can I activate it with GS 3.3.4 and Iridium template?
I installed the fanybox plugin.
On the jQuery site it says
Code:
!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

Where should I put the code
Code:
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>

I'm not a php or js script coder I understand a bit but that's it Rolleyes
I hope someone can push me in the right direction.
TIA
Tim
Reply
#2
Hello, i'm tested and fixed your code. And it's works.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(document).ready(function() {
    $("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>
Reply
#3
(2014-11-29, 21:32:28)Kapelius Wrote: Hello, i'm tested and fixed your code. And it's works.
Code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(document).ready(function() {
    $("#datepicker").datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker"></p>
</body>
</html>

Thank you a lot Exclamation I will try out this now and wil give you a note.

Update:
It is not working. I get (with chrome) this error:

Code:
Uncaught TypeError:
undefined is not a function                        (index):31
(anonymous function)                                (index):31
fire                                                             jquery-1.10.2.js:3048
self.fireWith                                               jquery-1.10.2.js:3160
jQuery.extend.ready                                  jquery-1.10.2.js:433
completed                                                 jquery-1.10.2.js:104

This is the head.inc.php from Iridium:
Code:
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }
/****************************************************
*
* @File:             head.inc.php
* @Package:        GetSimple
* @Action:        Iridium theme for GetSimple CMS
*
*****************************************************/
?>
    <!-- Site Title -->
    <title><?php get_page_clean_title(); ?> &mdash; <?php get_site_name(); ?></title>    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <!--[if lte IE 8]><script src="<?php get_theme_url(); ?>js/html5shiv.js"></script><![endif]-->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="<?php get_theme_url(); ?>/js/skel.min.js"></script>
        <script src="<?php get_theme_url(); ?>/js/skel-panels.min.js"></script>
        
        
        <script> var prefixUrl = '<?php get_theme_url(); ?>'; </script>
        <script src="<?php get_theme_url(); ?>/js/init.js"></script>
        <noscript>
            <link rel="stylesheet" href="<?php get_theme_url(); ?>/css/skel-noscript.css" />
            <link rel="stylesheet" href="<?php get_theme_url(); ?>/css/style.css" />
            <link rel="stylesheet" href="<?php get_theme_url(); ?>/css/style-desktop.css" />
            
            </noscript>
        <!--[if lte IE 8]><link rel="stylesheet" href="<?php get_theme_url(); ?>css/ie/v8.css" /><![endif]-->
        <!--[if lte IE 9]><link rel="stylesheet" href="<?php get_theme_url(); ?>css/ie/v9.css" /><![endif]-->
    
    <link href='http://fonts.googleapis.com/css?family=Vollkorn|Arvo|Bitter:400,700,400' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
    <script>
    $(document).ready(function() {
    $("#datepicker").datepicker();
    });
    </script>
    <?php get_header(); ?>
Reply
#4
Special for you, i installed Iridium and insert datepicker. Use my complete code.
All Head.inc.php
Code:
<?php if(!defined('IN_GS')){ die('you cannot load this page directly.'); }
/****************************************************
*
* @File:             head.inc.php
* @Package:        GetSimple
* @Action:        Iridium theme for GetSimple CMS
*
*****************************************************/
?>
    <!-- Site Title -->
    <title><?php get_page_clean_title(); ?> &mdash; <?php get_site_name(); ?></title>    
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <!--[if lte IE 8]><script src="<?php get_theme_url(); ?>js/html5shiv.js"></script><![endif]-->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
        <script src="<?php get_theme_url(); ?>/js/skel.min.js"></script>
        <script src="<?php get_theme_url(); ?>/js/skel-panels.min.js"></script>
        <script> var prefixUrl = '<?php get_theme_url(); ?>'; </script>
        <script src="<?php get_theme_url(); ?>/js/init.js"></script>
        
        <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
        <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
        
        <noscript>
            <link rel="stylesheet" href="<?php get_theme_url(); ?>/css/skel-noscript.css" />
            <link rel="stylesheet" href="<?php get_theme_url(); ?>/css/style.css" />
            <link rel="stylesheet" href="<?php get_theme_url(); ?>/css/style-desktop.css" />
        </noscript>
        <!--[if lte IE 8]><link rel="stylesheet" href="<?php get_theme_url(); ?>css/ie/v8.css" /><![endif]-->
        <!--[if lte IE 9]><link rel="stylesheet" href="<?php get_theme_url(); ?>css/ie/v9.css" /><![endif]-->    
    <link href='http://fonts.googleapis.com/css?family=Arimo:400,700' rel='stylesheet' type='text/css'>
    <script>
        $(document).ready(function() {
            $("#datepicker").datepicker();
        });
        </script>
    <?php get_header(); ?>

For example template.php
Code:
<p>Date: <input type="text" id="datepicker"></p>

It's work!
[Image: 5479dfe5a098c.png]
Reply
#5
WTFConfused
I did exactly the same as you.
I use your head.inc.php.
I put the
Code:
<p>Date: <input type="text" id="datepicker"></p>
directly in the template and get :
Code:
TypeError: $(...).datepicker is not a function

could be because GS is living in a folder not in the root of the site? (Because there is an old site I want to make it pretty with GS).
But nice urls are working, fontawesome worked.

What next?
Reply
#6
Okay, try my template.
Iridium
Reply
#7
(2014-11-30, 01:45:54)Kapelius Wrote: Okay, try my template.
Iridium

It is not working Huh


Update:

it was the plugin FancyBoxPlugin Angry
I deaktivate it and now it works.
Sorry my fault
Reply
#8
You have 2 versions of jquery, that plugin includes its own
NEW: SA Admin Toolbar Plugin | View All My Plugins
- Shawn A aka Tablatronix
Reply
#9
With a lot of help from Kapelius I get both - datepicker and fancybox running.
In very short:
  • install fancybox from http://fancyapps.com/fancybox/
  • in template 'head.inc.php put new links and scripts.
  • if you installed the fancybox plugin deactivate and delete it
  • put the right classes or id's on your images in the html code

like this:
head.inc.php:
Code:
.
.
<script>
        $(document).ready(function() {
            $("#datepicker").datepicker();
            
            $("a#fb").fancybox();
            $('.fancybox').fancybox();
        });
        </script>
Reply
#10
I'm sure it works fine with the version of jquery in fancybox but you also need jqueryui.
Also you should not be doing any jquery stuff outside of a on load handler aka ready function.

That is probably why it wasn't working. Jquery was not yet loaded cause of the order of scripts.
NEW: SA Admin Toolbar Plugin | View All My Plugins
- Shawn A aka Tablatronix
Reply




Users browsing this thread: 2 Guest(s)