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;
});

php string functions 1

trim — Strip whitespace (or other characters) from the beginning and end of a string

This function returns a string with whitespace stripped from the beginning and end of str . Without the second parameter, trim() will strip these characters:

• ” ” (ASCII 32 (0×20)), an ordinary space.
• “\t” (ASCII 9 (0×09)), a tab.
• “\n” (ASCII 10 (0×0A)), a new line (line feed).
• “\r” (ASCII 13 (0×0D)), a carriage return.
• “” (ASCII 0 (0×00)), the NUL-byte.
• “\x0B” (ASCII 11 (0×0B)), a vertical tab.

stripos — Find position of first occurrence of a case-insensitive string
Unlike strpos(), stripos() is case-insensitive.
Warning
This function may return Boolean FALSE, but may also return a non-Boolean value which evaluates to FALSE, such as 0 or “”. Please read the section on Booleans for more information. Use the === operator for testing the return value of this function.

$search = trim($search);
if (((stripos($row['party'],$search)) !== false) || ($search=="none")) {
...
}

validate email address

This very simple PHP script calls a function called storeAddress and returns to the Ajax object the message that’s returned by storeAddress. Communicating with the Ajax object is as simple as printing a string.

The first thing storeAddress does is initialize a variable called $message to a non-breaking space. Then, it makes sure the script has received an email address in the query string. If it hasn’t, we’ll leave $message variable set as a non-breaking space. $message will be returned to the caller at the end of this function.

function storeAddress() {
 $message = " ";
 // Check for an email address in the query string
 if( !isset($_GET['address']) ){
   // No email address provided
 }

Once we are certain we have an email address to work with, we’ll want to make sure it’s a valid address. We’ll use a regular expression to look for some alphanumeric characters followed by the @ symbol, more alphanumeric characters, a period, and some more alphanumeric characters. If this test fails, we’ll set $message to an error message, informing the user that the entered email address was invalid:

 else {
   // Get email address from the query string
   $address = $_GET['address'];
   // Validate Address
   if(!preg_match("/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@
   [a-z0-9-]+(\.[a-z0-9-]+)*$/i", $address)) {
     $message = "<strong>Error</strong>: An invalid email address was provided.";
   }

If the address passes this test, we’ll store it in the database.

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>

Include a CSS

External Style Sheet

<head>
<link rel="stylesheet" type="text/css"
href="mystyle.css" />
</head>

*Do NOT leave spaces between the property value and the units! If you use “margin-left: 20 px” instead of “margin-left: 20px” it will only work properly in IE6 but it will not work in Mozilla/Firefox or Netscape.

Internal Style Sheet

<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
</style>
</head>

A browser normally ignores unknown tags. This means that an old browser that does not support styles, will ignore the tag, but the content of the tag will be displayed on the page. It is possible to prevent an old browser from displaying the content by hiding it in the HTML comment element:

<head>
<style type="text/css">
<!--
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}
-->
</style>
</head>

Inline Styles

<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.

basic css

The class Selector
With the class selector you can define different styles for the same type of HTML element.

Say that you would like to have two types of paragraphs in your document: one right-aligned paragraph, and one center-aligned paragraph. Here is how you can do it with styles:

p.right {text-align: right}
p.center {text-align: center}

You have to use the class attribute in your HTML document:

<p class="right">This paragraph will be right-aligned.</p>
<p class="center">This paragraph will be center-aligned.</p>

Note: To apply more than one class per given element, the syntax is:

<p class="center bold">This is a paragraph.</p>

The paragraph above will be styled by the class “center” AND the class “bold”.

You can also omit the tag name in the selector to define a style that will be used by all HTML elements that have a certain class. In the example below, all HTML elements with class=”center” will be center-aligned:

.center {text-align: center}

In the code below both the h1 element and the p element have class=”center”. This means that both elements will follow the rules in the “.center” selector:

<h1 class="center">This heading will be center-aligned</h1>
<p class="center">This paragraph will also be center-aligned.</p>

Do NOT start a class name with a number! It will not work in Mozilla/Firefox.

Add Styles to Elements with Particular Attributes
You can also apply styles to HTML elements with particular attributes.

The style rule below will match all input elements that have a type attribute with a value of “text”:

input[type="text"] {background-color: blue}
<h2>The id Selector</h2>

You can also define styles for HTML elements with the id selector. The id selector is defined as a #.

The style rule below will match the element that has an id attribute with a value of “green”:

#green {color: green}

The style rule below will match the p element that has an id with a value of “para1″:

p#para1
{
text-align: center;
color: red
}

Do NOT start an ID name with a number! It will not work in Mozilla/Firefox.

CSS Comments
Comments are used to explain your code, and may help you when you edit the source code at a later date. A comment will be ignored by browsers. A CSS comment begins with “/*”, and ends with “*/”, like this:

/* This is a comment */
p
{
text-align: center;
/* This is another comment */
color: black;
font-family: arial
}

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);