Jump to content

First time with jQuery; need assistance!

jhsachs

By jhsachs
in Javascript Help

 Share

Recommended Posts

jhsachs Member

jhsachs

Posted
Posted

I'm attempting to work with jQuery for the first time, in a script that uses the datepicker add-on. It's not working, and I need some assistance to figure out why.

 

I think my problem lies in the setup for jQuery and datepicker, which is glossed over in the examples I've found.

 

Here's a simplified version of my code:

 

<?php
function date_inForm($fld,$date=null) {
?>
   <input type="text" id="<?php echo $fld ?>" maxlength="16" name="<?php echo $fld ?>"
          onfocus="function() {
            $('<?php echo $fld ?>').datepicker( 'option', 'yearRange', '2008:2011' );
            $('<?php echo $fld ?>').datepicker( 'option', 'changeYear', 'true' );
            $('<?php echo $fld ?>').datepicker( 'option', 'dateFormat', 'mm/dd/yy' );
            $('<?php echo $fld ?>').datepicker( 'option', 'defaultDate', '08/15/2011' );
          }" />
<?php
}

function date_process($fld,$m=null) {
   $date = explode( '/', $m[$fld] );
   $a = array( 'mm'=>$date[0], 'dd'=>$date[1], 'yyyy'=>$date[2],
               'American' => $date[0].'-'.$date[1].'-'.$date[2],
               'SQL'      => $date[2].'-'.$date[0].'-'.$date[1],
               'UNIX'     => mktime(null,null,null,$date[0],$date[1],$date[2])
            );
}

if ( key_exists('refresh',$_POST) ) {
   echo "The date is " . date_process("From");
}


?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
   <title>jQuery test</title>
   <script language="JavaScript" src="../packages/jQuery/jquery.js" type="text/javascript"></script>
   <script language="JavaScript" src="../packages/jQuery/date.js" type="text/javascript"></script>
   <script language="JavaScript" src="../packages/jQuery/datePicker.js" type="text/javascript"></script>
   <script language="JavaScript1.2" type="text/javascript"><!--
      $(document).ready(
         function() { $("#datepicker" ).datepicker(); }
      );
   --></script>
</head>

<body>
   <form name="From" action="datePicker.php" method="POST">
      <?php date_inForm("From") ?><br/>
      <input type="submit" name="refresh" value="Refresh" />
   </form>
</body>

</html>

 

When I execute this, I get the following HTML:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
   <title>jQuery test</title>
   <script language="JavaScript" src="../packages/jQuery/jquery.js" type="text/javascript"></script>
   <script language="JavaScript" src="../packages/jQuery/date.js" type="text/javascript"></script>
   <script language="JavaScript" src="../packages/jQuery/datePicker.js" type="text/javascript"></script>
   <script language="JavaScript1.2" type="text/javascript"><!--
      $(document).ready(
         function() { $("#datepicker" ).datepicker(); }
      );
   --></script>

</head>

<body>
   <form name="From" action="datePicker.php" method="POST">
         <input type="text" id="From" maxlength="16" name="From"
          onfocus="function() {
            $('From').datepicker( 'option', 'yearRange', '2008:2011' );
            $('From').datepicker( 'option', 'changeYear', 'true' );
            $('From').datepicker( 'option', 'dateFormat', 'mm/dd/yy' );
            $('From').datepicker( 'option', 'defaultDate', '08/15/2011' );
          }" />
<br/>
      <input type="submit" name="refresh" value="Refresh" />
   </form>
</body>

</html>

 

When I click the text box, the JavaScript debugger says, " $("#datepicker").datepicker is not a function."

 

jQuery is version 1.6.2, downloaded a couple of days ago from the jQuery site as jquery-1.6.2.min.js. The NetBeans editor reports multiple errors in every line of source (all three of them), which seems suspicious, but perhaps it's a side effect of the source being minimized.

 

date and datePicker were downloaded today from http://www.kelvinluck.com/assets/jquery/datePicker/v2/demo/. (I got datePicker.css from the same source, and put it in the same directory. I assume, but am not sure, that something in the code references it for me.)

 

I'm running this in Firefox 4 under Windows XP.

Link to comment
https://forums.phpfreaks.com/topic/246030-first-time-with-jquery-need-assistance/
Share on other sites
jhsachs Member

jhsachs

Posted
  • Author
Posted

Thank you for pointing that out. I didn't know where the official site was, and the first reasonable looking link in the Google results apparently gave me incomplete instructions.

 

I think I need a little more direction, though. The stuff I got from the jquery-ui site may be complete, but it's not super-clear.

 

On the download page I checked only "Datepicker," and the page clicked the core UI. I clicked the download button and got an archive that contains 159 files. Some are clearly not part of the package (they're demos, etc), but I'm not sure which ones. There's no readme file. There's an index.html file, which I hoped would contain an index to the other files, but it doesn't.

 

index.html mentions two files, js/jquery-ui-1.8.16.custom.min.js and css/ui-lightness/jquery-ui-1.8.16.custom.css. At first I thought those would be the ones I need, but the text says that the CSS file "imports the entire jQuery UI CSS Framework," so apparently more CSS files are needed. Maybe more JS files are needed too.

 

There's probably logic to this, but it doesn't make sense to a person who isn't already familiar with the package.

jhsachs Member

jhsachs

Posted
  • Author
Posted

Umm... not quite.

 

I included those two files and tried again. Nothing happened. Firebug's debugger told me that jQuery was undefined.

 

I included the jQuery file too and tried again. I got no errors in Firebug, but again, nothing happened.

 

Before I spend hours pounding on this, do you think you could take a look and make another suggestion?

 

The configuration's the same as before. I unpacked the entire archive into ../packages/jQuery.

 

Here's the PHP source:

 

<?php

function date_inForm($fld,$date=null) {
?>
   <input type="text" id="<?php echo $fld ?>" maxlength="16" name="<?php echo $fld ?>"
          onfocus="function() {
            $('<?php echo $fld ?>').datepicker( 'option', 'yearRange', '2008:2011' );
            $('<?php echo $fld ?>').datepicker( 'option', 'changeYear', 'true' );
            $('<?php echo $fld ?>').datepicker( 'option', 'dateFormat', 'mm/dd/yy' );
            $('<?php echo $fld ?>').datepicker( 'option', 'defaultDate', '08/15/2011' );
          }" />
<?php
}

function date_process($fld,$m=null) {
   $date = explode( '/', $m[$fld] );
   $a = array( 'mm'       => $date[0], 'dd' => $date[1], 'yyyy' => $date[2],
               'American' => $date[0].'-'.$date[1].'-'.$date[2],
               'SQL'      => $date[2].'-'.$date[0].'-'.$date[1],
               'UNIX'     => mktime(null,null,null,$date[0],$date[1],$date[2])
            );
   return $a;
}

if ( key_exists('refresh',$_POST) ) {
   $a = date_process("From");
   echo "The date is " . $a['American'];
}

?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
   <title>jQuery test</title>
   <link rel="stylesheet" type="text/css" href="../packages/jquery/ui/css/ui-lightness/jquery-ui-1.8.16.custom.css" />
   <script language="JavaScript1.2" type="text/javascript" src="../packages/jquery/js/jquery-1.6.2.min.js" ></script>
   <script language="JavaScript1.2" type="text/javascript" src="../packages/jquery/js/jquery-ui-1.8.16.custom.min.js" ></script>
   <script language="JavaScript1.2" type="text/javascript" ><!--
      $(document).ready(
         function() { $("#datepicker" ).datepicker(); }
      );
   --></script>
</head>

<body>
   <form name="From" action="datePicker.php" method="POST">
      <?php date_inForm("From") ?><br/>
      <input type="submit" name="refresh" value="Refresh" />
   </form>
</body>

</html>

 

Here's what the browser saw:

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
   <title>jQuery test</title>
   <link rel="stylesheet" type="text/css" 
         href="../packages/jquery/ui/css/ui-lightness/jquery-ui-1.8.16.custom.css" />
   <script language="JavaScript1.2" type="text/javascript"
         src="../packages/jquery/js/jquery-1.6.2.min.js" >
   </script>
   <script language="JavaScript1.2" type="text/javascript" 
         src="../packages/jquery/js/jquery-ui-1.8.16.custom.min.js" >
   </script>
   <script language="JavaScript1.2" type="text/javascript" ><!--
      $(document).ready(
         function() { $("#datepicker" ).datepicker(); }
      );
   --></script>

</head>

<body>
   <form name="From" action="datePicker.php" method="POST">
         <input type="text" id="From" maxlength="16" name="From"
          onfocus="function() {
            $('From').datepicker( 'option', 'yearRange', '2008:2011' );
            $('From').datepicker( 'option', 'changeYear', 'true' );
            $('From').datepicker( 'option', 'dateFormat', 'mm/dd/yy' );
            $('From').datepicker( 'option', 'defaultDate', '08/15/2011' );
          }" />
<br/>
      <input type="submit" name="refresh" value="Refresh" />
   </form>
</body>

</html>

Adam Advanced Member

Adam

Posted
Posted

this is because you are including the jquery ui before including your normal jquery file... jquery defines the $ and the ui extends it.. must include jquery core before including any other jquery class..

 

It's just the UI's stylesheet included before the jQuery core.

 

@jhsachs

 

You're using the plug-in wrong. In your <head> script you're referencing an input with the ID of datepicker ("#datepicker"), but that doesn't seem to exist anywhere in the output you provided. On the onfocus event you're then trying to define an anonymous function that will set four options for the current input, but you're using the syntax which is for already bound datepicker objects -- plus you're missing the hash from the selector. Take a look at the manual and read a few of the examples for setting options before carrying on so you understand what I mean.

 

Also the way you're trying to use the anonymous function is incorrect. All you're doing there is defining it when the onfocus event is called, nothing is actually calling it. You'd need to use a self-executing anonymous function to do it that way:

 

(function() {
    // Statements here
})();

 

However, that's just mercilessly raping the onfocus HTML attribute. Given the way you're implementing this, splitting the logic completely will be a bit difficult, so I'd recommend having a script block underneath each input binding the datepicker object and setting the options at the same time.

 

So remove all other code and change the function to this:

 

function date_inForm($fld,$date=null) {
?>
    <input type="text" id="<?php echo $fld ?>" maxlength="16" name="<?php echo $fld ?>" />
    <script type="text/javascript">
        $('#<?php echo $fld ?>').datepicker({
            yearRange: '2008:2011',
            changeYear: 'true',
            dateFormat: 'mm/dd/yy',
            defaultDate: '08/15/2011'
        });
    </script>
<?php
}

jhsachs Member

jhsachs

Posted
  • Author
Posted

With the assistance of you call, I got my code to work. I've moved it back to the real script I was trying to write, and most aspects of that script now work.

 

Here's the example script in its final form:

 

<?php

function date_inForm($fld,$date=null) {
  echo "   <input type=\"text\" id=\"$fld\" classclass=\"datepicker\" maxlength=\"16\" name=\"$fld\" ";
  if ($date) {
     echo " value=\"$date\"";
  }
  echo " />";
?>
   <script type="text/javascript">
      $('#<?php echo $fld ?>').datepicker( {
         'yearRange':    '2008:2011',
         'changeYear':   'true',
         'dateFormat':   'mm/dd/yy'
      } );
    </script>
<?php
}

function date_process($fld,$m) {
   $date = explode( '/', $m[$fld] );
   $a = array( 'mm'       => $date[0], 'dd' => $date[1], 'yyyy' => $date[2],
               'American' => $date[0].'-'.$date[1].'-'.$date[2],
               'SQL'      => $date[2].'-'.$date[0].'-'.$date[1],
               'UNIX'     => mktime(null,null,null,$date[0],$date[1],$date[2])
            );
   return $a;
}

if ( key_exists('refresh',$_POST) ) {
   $From = $_POST['From'];
   $To =   $_POST['To'];
   echo "The date range is from <strong>$From</strong>. to <strong>$To</strong>.";
}
else {
   $From = "8/7/2011";
   $To   = "8/14/2011";
}

?><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>

<head>
   <title>jQuery test</title>
   <link rel="stylesheet" type="text/css" href="../packages/jquery/ui/css/ui-lightness/jquery-ui-1.8.16.custom.css" />
   <script language="JavaScript1.2" type="text/javascript" src="../packages/jquery/js/jquery-1.6.2.min.js" ></script>
   <script language="JavaScript1.2" type="text/javascript" src="../packages/jquery/js/jquery-ui-1.8.16.custom.min.js" ></script>
   <script language="JavaScript1.2" type="text/javascript" ><!--
      $(document).ready(
         function() { $(".datepicker" ).datepicker(); }
      );
   --></script>
</head>

<body>
   <form name="From" action="datePicker.php" method="POST">
      From <?php date_inForm("From",$From) ?> to <?php date_inForm("To",$To) ?><br/><br/>
      <input type="submit" name="refresh" value="Refresh" />
   </form>
</body>

</html>

 

I'm left with one question and one puzzle.

 

The question: is there a way to make DatePicker return a value that means "the user opened me but did not select a date"? When I try this, it fills in today's date.

 

The puzzle concerns this code, which I use to test for the end of a date range being earlier than the start:

 

if ( $From->diff($To,false) < 0 ) {
   redirectPost( $self, "The end of the reporting period may not be before the beginning." );
}

 

The NetBeans editor's code completion feature is perfectly happy with the $from->... expression. When I try to execute it, though, I get a fatal error: "Call to undefined method DateTime::diff()."

 

$From is unquestionably a DateTime object. The error message says so, the debugger says so, and I get correct results from a call to its format method a few lines earlier.

 

I tried executing the following example from the php.net manual's description of DateTime::diff at the beginning of my script:

 

<?php
$datetime1 = new DateTime('2009-10-11');
$datetime2 = new DateTime('2009-10-13');
$interval = $datetime1->diff($datetime2);
echo $interval->format('%R%a days');
?>

 

It too gives this error.

 

Any idea what could be going on here?

 

In case it matters, I'm running PHP 5.2.5 under Windows XP.

Adam Advanced Member

Adam

Posted
Posted

diff() was only introduced in version 5.3:

 

(PHP 5 >= 5.3.0)

 

By the way, you can remove the following code:

 

   <script language="JavaScript1.2" type="text/javascript" ><!--
      $(document).ready(
         function() { $(".datepicker" ).datepicker(); }
      );
   --></script>

 

 

jhsachs Member

jhsachs

Posted
  • Author
Posted

Yes, I've since learned that in another thread which I started for that problem. I was surprised because diff seems so basic, it didn't occur to me that the class might originally have been implemented without it.

 

I asked how to determine whether one date is later than the other without diff. The only way I could think of is the brute-force way. An ingenious person pointed out that the dates can be formatted as yyyy-mm-dd and compared as strings in a single step.

 

This leaves only the "user did not select a date" question.

jhsachs Member

jhsachs

Posted
  • Author
Posted

Adam, thanks for the suggestion of onClose.

 

I'm afraid I have to ask for one more bit of assistance. I moved my code from my development system to my client's staging server, and it doesn't work there. Calls to $() fail because $ is undefined.

 

I've uploaded a complete copy of the jQuery directory, including jquery-ui-1.8.16.custom.css, jquery-1.6.2.min.js, and jquery-ui-1.8.16.custom.min.js, to the server. Everything is in the right place relative to my script -- I think.

 

I've probably missed something silly, but I don't see it. Is there a tool that will tell me whether the .js files are actually found, and if not, perhaps give a clue to why? Firebug does not give this information, as far as I know.

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.