Tony's Blog: jQuery

顯示具有 jQuery 標籤的文章。顯示所有文章

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.

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月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月30日星期一

2012年7月27日星期五

2012年7月25日星期三

2012年7月23日星期一