Category Archives: daylog

jquery jscript date string function

Date Function by Java Script:

function showdate() {
var t = new Date;
var day = t.getDate();
var month = t.getMonth() + 1;
var year = t.getFullYear();
var weekday = t.getDay();
var daynames = new Array(
      '日','月','火','水','木','金','土');
//if zeros are needed to keep date format correct!
if (day < 10) day = "0" + day;
if (month < 10) month = "0" + month;
var stoday = month + '/' + day + '/' + year;
document.getElementById('showdate').innerHTML = stoday + '(' + daynames[weekday] + ')';

// set the date field of today
$("input#date").val(stoday);
}

jquery thick box

jquery thick box example:

<script type="text/javascript" src="thickbox.js"></script>
<link rel="stylesheet" href="thickbox.css" type="text/css" media="screen" />

<a href="#TB_inline?height=100&amp;width=280&amp;inlineId=input2" class="thickbox" style="font-size: 0.6em;" title="事件">?</a>
<div id="input2" style="display: none;">
<p>發生的事件，應盡量包括有關的金額、單據、支票號碼。時間和地點和有關的項目亦應註明。</p>
</div>

jquery ajax post

.post( url, [data], [callback], [type] )
Load a remote page using an HTTP POST request.
This is an easy way to send a simple POST request to a server without having to use the more complex $.ajax function. It allows a single callback function to be specified that will be executed when the request is complete (and only if the response has a successful response code).
The returned data format can be specified by the fourth parameter.
If you need to have both error and success callbacks, you may want to use $.ajax. $.post is a (simplified) wrapper function for $.ajax.

$("#search_btn").click(function() {
var search = $("input#search").val();
var dataString = 'search='+ search;

$.post("bin/listall.php", dataString, function(data){
$('#results').html(data);
});

return false;
});

jquery tabs

Tabs are cool. And jquery tabs is handy.

Step 1: Include the headers

<script src="jquery-1.2.6.min.js" type="text/javascript"></script>
<script src="ui.tabs.pack.js" type="text/javascript"></script>
<link rel="stylesheet" href="ui.tabs.css" type="text/css" media="print, projection, screen">

Step 2: Create tab object

<script type="text/javascript">
	$(function() {
        $('#worktab > ul').tabs({ fx: { opacity: 'toggle' } });
});
</script>

Step 3: Use a UL list for the tabs

<ul>
<li><a href="#worktab1"><span>輸入活動</span></a></li>
<li><a href="#worktab2"><span>搜索紀錄</span></a></li>
</ul>

Step 4: Use DIV nests to include the tab structure

<div id="worktab">
<ul>
...
</ul>
<div id="worktab1">
</div>
<div id="worktab2">
</div>
</div>

jquery datepicker

Simple example of datepicker html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.datepicker.js"></script>
<link rel="stylesheet" href="jquery-ui-themeroller.css" type="text/css" media="screen" title="jquery UI">
<script>
  $(document).ready(function(){
    $('#example').datepicker();
  });
</script>
</head>
<body>
<input type="text" id="example" value="Click inside me to see a datepicker" style="width:300px;"/>
<input type="text" id="example2" value="" style="width:300px;"/>
</body>
</html>

xhtml form post

The form element creates a form for user input. A form can contain textfields, checkboxes, radio-buttons and more. Forms are used to pass user-data to a specified URL.

Attribute action: A URL that defines where to send the data when the submit button is pushed.
Attribute method: method=”post”: This method sends the form contents in the body of the request. Note: Most browsers are unable to bookmark post requests.
Attribute name: The name attribute is an identification for the form. In XHTML this has been replaced with the id attribute.

*Naming rules:

  • Must begin with a letter A-Z or a-z
  • Can be followed by: letters (A-Za-z), digits (0-9), hyphens (“-”), underscores (“_”), colons (“:”), and periods (“.”)
  • Values are case-sensitive
<div id="contact_form">
<form name="contact" method="post" action="">
<fieldset>
<label for="name" id="name_label">Party</label>
<input type="text" name="name" id="name" size="30" value="" class="text-input" />
<label class="error" for="name" id="name_error">This field is required.</label>

<label for="event" id="event_label">Event</label>
<input type="text" name="event" id="event" size="60" value="" class="text-input" />
<label class="error" for="event" id="event_error">This field is required.</label>

<input type="submit" name="submit" class="button" id="submit_btn" value="Send" />
</fieldset>
</form></div>

Core Attributes

Not valid in base, head, html, meta, param, script, style, and title elements.

Attribute Value Description
class class_rule or style_rule The class of the element
id id_name A unique id for the element
style style_definition An inline style definition
title tooltip_text A text to display in a tool tip

Keyboard Attributes

Attribute Value Description
accesskey character Sets a keyboard shortcut to access an element
tabindex number Sets the tab order of an element 



				

			



			

				

					
xhtml basic

					
				
				


Some must have lines for Transitional type:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DaYLoG</title>
<script src="js/jquery-1.2.3.pack.js"></script>
<script src="js/runonload.js"></script>
<script src="js/daylog.js"></script>
<link href="css/tutorial.css" media="all" type="text/css" rel="stylesheet">
</head>



*XHTML elements must be properly nested

*XHTML elements must always be closed

*XHTML elements must be in lowercase

*XHTML documents must have one root element

*Attribute names must be in lower case

*Attribute values must be quoted

*Attribute minimization is forbidden

*The id attribute replaces the name attribute

*HTML 4.01 defines a name attribute for the elements a, applet, frame, iframe, img, and map. In XHTML the name attribute is deprecated. Use id instead.

*To interoperate with older browsers for a while, you should use both name and id, with identical attribute values

*The XHTML DTD defines mandatory elements

*All XHTML documents must have a DOCTYPE declaration. The html, head and body elements must be present, and the title must be present inside the head element.

*The DOCTYPE declaration is not a part of the XHTML document itself. It is not an XHTML element, and it should not have a closing tag.

*An XHTML document consists of three main parts: the DOCTYPE, the Head, the Body

*XHTML 1.0 specifies three XML document types that correspond to three DTDs: Strict, Transitional, and Frameset.


XHTML 1.0 Strict


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets. The Strict DTD includes elements and attributes that have not been deprecated or do not appear in framesets.


XHTML 1.0 Transitional


<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">



Use this when you need to take advantage of HTML’s presentational features and when you want to support browsers that don’t understand Cascading Style Sheets. The Transitional DTD includes everything in the strict DTD plus deprecated elements and attributes.


Validate page here:

http://www.w3schools.com/xhtml/xhtml_validate.asp



				

			



			

				

					
php mysql basic

					
				
				


Codes to receive variable from javascript:


if ((isset($_POST['name'])) && (strlen(trim($_POST['name'])) > 0)) {
	$name = stripslashes(strip_tags($_POST['name']));
} else {$name = 'No name entered';}



*strip_tags — Strip HTML and PHP tags from a string

*stripslashes — Un-quotes a quoted string


Insert record:


$query="INSERT INTO `daylog` (`party`,`event`,`date`) values ('" . $name . "','" . $event . "',CURDATE())";



Set unicode operation:


$db = "SET NAMES 'utf8'";
$result=mysql_query($db);



*SET NAMES indicates what character set the client will use to send SQL statements to the server. 


Get records out from database:


$query="SELECT * FROM `daylog`";
$result=mysql_query($query);




				

			



			

				

					
jquery ajax example 1

					
				
				


To run a php file and display that into an ID area, just use: 


.click(function(){
$('#message').load("bin/listall.php");
});



To pass some data to your php file and ajax if success, try:


$.ajax({
type: "POST",
url: "bin/process.php",
data: dataString,
success: function() {
$('#contact_form').html("<div id='message'></div>");
.hide()
.fadeIn(1500, function() {
$('#message').append("<img src='images/check.png' />");
})
}
});




				

			



			

				

					
Project – DaYLog

					
				
				


Date Started: 22 August 2008


Objective: To record my daily activity easily.


Tech Milestone: My first jquery ajax test.