Tony's Blog

2012年7月30日星期一

jQuery UI Use Info

If you had got jQuery UI. and go to see some example.

I will use the AutoComplete to show you show you something.

you could see the code as bloew.

<head>
<meta charset="utf-8">
<title>jQuery UI Autocomplete - Default functionality</title>
<link rel="stylesheet" href="themes/redmond/jquery.ui.all.css">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.21.custom.min.js"></script>


<script>
$(document).ready($(function() {
var availableTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
$( "#tags" ).autocomplete({
source: availableTags
});
}));

$(document).ready(
$(function() {
$('#tag1').html('Hello jQuery');
}
));
</script>
</head>

Pay attention on the <script type="text/javascript" src="jquery-ui-1.8.21.custom.min.js"></script>

And

<script src="ui/jquery.ui.core.js"></script>
<script src="ui/jquery.ui.widget.js"></script>
<script src="ui/jquery.ui.position.js"></script>
<script src="ui/jquery.ui.autocomplete.js"></script>

that is why the funtion "autocomplete" work as this code:

$( "#tags" ).autocomplete({
source: availableTags
});

Because all the example you see on jQuery page all work by some JS.
Like jquery.ui.autocomplete.js
And they take all in one JS File: jquery-ui-1.8.21.custom.min.js

That is tell you if you want to build some project as the example you learn on jQuery page.
you could use these code by include in

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.21.custom.min.js"></script>

2012年7月27日星期五

Why jQuery Cookie use encodeURIComponent/decodeURIComponent?

因為用JS存Cookie的時候有夾帶中文的內容，發現PHP印出來會變成亂碼，所以自己做了測試後得到結論JS這邊用 encodeURIComponent/decodeURIComponent 方法來編解碼字串內容就OK了，用JS or PHP存取Cookie都不會有問題。

原本從W3C參考來的setCookie method:是用escape編解碼要儲存的cookie內容。

function setCookie(c_name,value,exdays)  
{  
var exdate=new Date();  
exdate.setDate(exdate.getDate() + exdays);  
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()+"; path=/project/");  
document.cookie = c_name + "=" + c_value;  
}

但是用此方式，用PHP想取得輸出Cookie內容時候；setCookie("hello","你好",30) -->JS存一個屬性hello 值為"你好"的cookie內容

echo $_COOKIE['hello'];

你會得到的是編碼後的Unicode 字符：%u4F60%u597D ，而不是"你好"。
所以我在原本JS這邊存取Cookie的編解碼改用encodeURIComponent/decodeURIComponent去處理要存取的Cookie內容：

function encode_setCookie(c_name,value,exdays)
{
var exdate=new Date();  exdate.setDate(exdate.getDate() + exdays); 
//use encodeURIComponent encode string and decodeURIComponent decode it.


var c_value=encodeURIComponent(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString()+"; path=/project/");  document.cookie = c_name + "=" + c_value;
}

我發現PHP的setCookie method似乎也是用同種原理去編碼Cookie內容，
所以這樣一來無論你是用JS存PHP取或者用PHP存JS取"似乎"就不會有通用字符編解碼的問題存在，輸出解碼就很正常。

當然，這也是jQuery Cookie Plugin 採用的方式。

2012年7月25日星期三

jQuery not work on php?

If you are developer,find the jQuery not work on your project,maybe the resaon here.

A lot of teach website will show that example in HTML head
<script language="JavaScript" src="JQuery/jquery-1.7.2.min.js"></script>

Project/yourcode.php call jquery-1.7.2.min.js by this command:

yourcode.php direct in Project

Project->Project/JQuery->Project/JQuery/jquery-1.7.2.min.js

That's fine, but if your code path is

Project/otherwise/yourcode.php

yourcode.php direct in Project/otherwise

Project/otherwise could not find the same "floor".
it will search JQuery/jquery-1.7.2.min.js
Project/otherwise/...

so your should use the code path like this:
<script language="JavaScript" src="../JQuery/jquery-1.7.2.min.js"></script>
it will redirect

Project/otherwise->Project->Project/JQuery->Project/JQuery/jquery-1.7.2.min.js

2012年7月23日星期一

Why jQuery --- Ajax Example

If you want to understand jQuery on this example. You should know these command.

Basic on JS.
Familiar with HTML and JS

Here is the jQuery Link. Next is the ajax code example on all website you search for.

// Function On Click Btn like 'onclick="loginsys()"', here is check for log in Info,when you click it.
function loginsys()
{

if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
   }
 else
   {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 
//Here is the http-reponse event function.
xmlhttp.onreadystatechange = function getreponse()
{

if (xmlhttp.readyState==4 && xmlhttp.status == 200)
     {
         var reponseType = xmlhttp.responseText;
   switch(reponseType)
   {
//When log in failed, return error string by setting.
   case "ERROR_588":
    alert("Plz Check Your Sign In Info");
    break;
//When log in successed
   default:
//Change the HTML node by reponse Info.
   document.getElementById('Control_Tab2').innerHTML = reponseType;
   document.getElementById('Control_Tab3').innerHTML = "Sign Out";
   document.getElementById('Control_Tab3').setAttribute("onclick", "logoutsys()");
//element "Contain_Ele" is div element which had two childe element .
//LoginInfo and SignInBtn is  and in Contain_Ele.
//When Log in success , remove node.
   var mom = document.getElementById("Contain_Ele");
   var child1 = document.getElementById("LoginInfo");
   var child2 = document.getElementById("SignInBtn");
   mom.removeChild(child1);
   mom.removeChild(child2);
   break;
    }
     }


}

//Here is the request when you click log in Btn, send the log info by "POST".
 userid = document.getElementById("UserID").value;
 password =  document.getElementById("PasWd").value;
 if(userid.length == 0 || password.length == 0)
 {
 alert("Check Your userID or passWord");
 }
 else
 {
 xmlhttp.open("POST","SignCenter/checkCookie.php",true);
 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
 xmlhttp.send("userid="+userid+"&password="+password);
 }


}

Now we see the same code use as jQuery

function loginsys()
{
 if (window.XMLHttpRequest)
   {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
   }
 else
   {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
   }
 userid = $('#UserID').val();
 password = $('#PasWd').val();
 if(userid.length == 0 || password.length == 0)
 {
 alert("Check Your userID or passWord");
 }
 else
 {        
//function(result) do the same action as xmlhttp.onreadystatechange event.
  $.post("SignCenter/checkCookie.php",{userid:userid,password:password},
function(result)
{
   switch(result)
   {
   case "ERROR_588":
           alert("Plz Check Your Sign In Info");
    break;
   default:
    //JQuery Code
    $('#Control_Tab2').html(result);
    $('#Control_Tab3').html("Sign Out");
    $('#Control_Tab3').attr("onclick", "logoutsys()");
    $('#SignInBtn').remove();
    $('#LoginInfo').remove();
    break;
    }
   });

}
}

That is why jQuery become popular in these years. It help web developer code more easy and faster.

2012年7月2日星期一

Social Plugin

The Like button lets a user share your content with friends on Facebook. When the user clicks the Like button on your site, a story appears in the user's friends' News Feed with a link back to your website.

When your Web page represents a real-world entity, things like movies, sports teams, celebrities, and restaurants, use the Open Graph protocol to specify information about the entity. If you include Open Graph tags on your Web page, your page becomes equivalent to a Facebook page. This means when a user clicks a Like button on your page, a connection is made between your page and the user. Your page will appear in the "Likes and Interests" section of the user's profile, and you have the ability to publish updates to the user. Your page will show up in same places that Facebook pages show up around the site (e.g. search), and you can target ads to people who like your content. Note: The count on the Like button will include all likes and shares whereas the like connection on the Graph API includes only the number of likes for the object.

There are two Like button implementations: XFBML and Iframe. The XFBML (also available in HTML5-compliant markup) version is more versatile, but requires use of the JavaScript SDK. The XFBML dynamically re-sizes its height according to whether there are profile pictures to display, gives you the ability (through the Javascript library) to listen for like events so that you know in real time when a user clicks the Like button, and it always gives the user the ability to add an optional comment to the like. If users do add a comment, the story published back to Facebook is given more prominence.

Note: The URLs in the code are protocol relative. This lets the browser to load the SDK over the same protocol (HTTP or HTTPS) as the containing page, which will prevent "Insecure Content" warnings. Missing http and https in the code is intentional.

To get started, just use the configurator below to get code to add to your site.

The site： https://developers.facebook.com/docs/reference/plugins/like/

Tony's Blog

2012年7月30日星期一

jQuery UI Use Info

2012年7月27日星期五

Why jQuery Cookie use encodeURIComponent/decodeURIComponent?

2012年7月25日星期三

jQuery not work on php?

2012年7月23日星期一

Why jQuery --- Ajax Example

2012年7月2日星期一

Social Plugin

關於我自己

網誌存檔

2012年7月30日 星期一

jQuery UI Use Info

2012年7月27日 星期五

Why jQuery Cookie use encodeURIComponent/decodeURIComponent?

2012年7月25日 星期三

jQuery not work on php?

2012年7月23日 星期一

Why jQuery --- Ajax Example

2012年7月2日 星期一

Social Plugin

2012年7月30日星期一

2012年7月27日星期五

2012年7月25日星期三

2012年7月23日星期一

2012年7月2日星期一