고민의힘: Ajax

레이블이 Ajax인 게시물을 표시합니다. 모든 게시물 표시

2008년 11월 5일 수요일

jQuery] file tree

http://abeautifulsite.net/notebook.php?article=58

나이스 한데~~

http://www.bram.us/projects/js_bramus/jsprogressbarhandler/#install_config

사실 내가 원하는 프로그래스바는 예를 들어 5분이 걸리는 작업이 있다고 치자.
그 작업은 일단 클릭하면 기본 5분은 걸린다. 그때 아무것도 못 하고 기다리고 있는것 보다는 사용자에게 피드백을 주고 싶다는 거다.

아무리 해도 구현이 안 되더라...흠흠..
어떻게 해야 가능할까?

Drag & Drop 쇼핑 카트

http://demo.script.aculo.us/shop

공부 해볼 것들

2008년 4월 3일 목요일

[json] Json 방식으로 Ajax request

먼저 json방식의 자료를 만들어야겠다.

array일 경우
var Beatles = ["Paul","John","George","Ringo"];
var Beatles = new Array("Paul","John","George","Ringo");

Object일 경우
var Beatles = {
"Country" : "England",
"YearFormed" : 1959,
"Style" : "Rock'n'Roll"
}

아래의 경우는 위와 동일함
var Beatles = new Object();
Beatles.Country = "England";
Beatles.YearFormed = 1959;
Beatles.Style = "Rock'n'Roll";

Object 출력
alert(Beatles.Style); //Dot Notation
alert(Beatles["Style"]); //Bracket Notation

Array를 Object에 사용할 경우
var Beatles = {
"Country" : "England",
"YearFormed" : 1959,
"Style" : "Rock'n'Roll",
"Members" : ["Paul","John","George","Ringo"]
}

Array내부에 Object사용
var Rockbands = [
{
   "Name" : "Beatles",
   "Country" : "England",
   "YearFormed" : 1959,
   "Style" : "Rock'n'Roll",
   "Members" : ["Paul","John","George","Ringo"]
},
   {
"Name" : "Rolling Stones",
"Country" : "England",
"YearFormed" : 1962,
"Style" : "Rock'n'Roll",
   "Members" : ["Mick","Keith","Charlie","Bill"]
   }
]

Json Syntax
Javascript Object 와 흡사함

{
"Name" : "Beatles",
"Country" : "England",
"YearFormed" : 1959,
"Style" : "Rock'n'Roll",
"Members" : ["Paul","John","George","Ringo"]
}

내가 원하는것은 만들어진 Json을 어떻게 Ajax를 사용해 전송 할 것인가? 하는 것이다.
그 전에 Json Parser란게 필요하다.
사실 eval( ) 을 사용해서 parsing을 하고 있었는데 parser를 쓰면 더 좋단다. 흠흠..

http://www.json.org/json.js

JSON.parse(strJSON) - converts a JSON string into a JavaScript object.

JSON.stringify(objJSON) - converts a JavaScript object into a JSON string.

순서는 다음과 같다.
Client Side
1. Json을 만든다.
2. Json파서를 사용해 stringify() 작업을 한다. 이건 object를 string으로 만들어 버리겠다는것?
3. Send the URL-encoded JSON string to the server as part of the HTTP Request

Sample:

var objJSON = {
   "msg" : MSG
};
var strJSON = encodeURIComponent(JSON.stringify(objJSON));
new Ajax.Request("ReceiveJSON.jsp",
   {
method: "post",
parameters: "strJSON=" + strJSON,
onComplete: Respond
   });

Server Side(php)
strJSON 파라미터를 받아서 json_decode() 하게 되면 array의 형식으로 변경됨.
알아서 작업하면 됨....

-------------------------
헌데 분명
Content_Type => 'application/json',
Content => $json_req,
의 방법을 이용한 경우가 있는데 이럴때는 서버측에서 어떻게 해야 하나?

2008년 3월 27일 목요일

[jquery] table row 삭제

<table>
<tr id="_tr1">
<td>test</td>
</tr>
</table>

<script language='javascript'>
$("#_tr1").remove()
</script>

remove() 를 사용해서 삭제 할 수 있음

$("table").each( function(){
// 로직
});
을 사용해서 삭제 하는것도 가능

//==================================================
<tr onClick='javascript:del(this)'>
일 경우라면
$(this).remove() 또는 $(this).get().remove()가 가능할 것 같음

2008년 3월 24일 월요일

jQuery post sample

var params = {}
params['template'] = "EG00";
params['action'] = "get_list";

// param parameters
// str_query
params = build_params( "#mail_menu .search_form", params );

$.get("function.htm", params,
function(data){
// $("#menu_list").html( data );
$("#menu_list").html( $("#list", data).html() );
$("#msg").fadeOut();
}
);

모 이런 식으로 하고 있음

2008년 3월 23일 일요일

Adobe Flex Ria관련 자료

Video: Adobe RIA examples in Korea

2008년 3월 12일 수요일

[extjs] Grid 출력

샘플 사이트
http://3pl.ezadmin.co.kr/extjs/grid_test_json2.html

구성을 보자..
1. 먼저 라이브러리들을 가져와야 한다.

<link rel="stylesheet" type="text/css" href="/js/ext-2.0.2/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/js/ext-2.0.2/grid-examples.css" />
<link rel="stylesheet" type="text/css" href="/js/ext-2.0.2/examples/examples.css" />


<script type="text/javascript" src="/js/ext-2.0.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="/js/ext-2.0.2/ext-all.js"></script>

2. store객체를 만든다.
store객체는 Grid에 출력할 데이터를 가져오는 역할을 수행한다.
여기서는 json방식을 사용할 것이다.
json은 모 테스트라 간단히 json_encode를 사용해서 만들었다.

$_val = array();
$_val[totalCount] = 40;
$_val[data][] = array( id => 1, title=> iconv( 'CP949','UTF-8','하하하'));
$_val[data][] = array( id => 2, title=> iconv( 'CP949','UTF-8','2 jacking') );
$_val[data][] = array( id => 3, title=> iconv( 'CP949','UTF-8','3 jacking 흠흠 123') );

echo json_encode ( $_val );

json을 가져오기 위해 메뉴얼에서는 jsonStore를 사용하라고 했지만 아무리 해도 안된다. 개구라가 아닌가 싶다. 모르지 공력이 쌓이면 될런지..일단은 Ext.data.Store 를 사용했다.

var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy(
new Ext.data.Connection({
url: './json_data.php',
extraParams: params,
method: 'POST'
})),
reader: new Ext.data.JsonReader({
totalProperty: 'totalCount',
root: "data",
fields: ['id', 'title']
})
});

흠..다 날려 먹었다.

proxy:
Ext.data.HttpProxy는 외부의 데이터를 연동할 때 사용한다.
Ext.data.Connection은 파라미터를 전송하기 위해 사용함
Grid에서 footer를 사용할 경우 starter, limit은 기본 parameter롤 전송된다.

reader:
Ext.data.JsonReader 를 사용한다, 서버로 부터 받는 데이터가 Json방식일 경우 사용한다.
totalProperty: jSon방식의 값에서 Total 파라미터를 보낼 경우 정의 이 값은 나중에 footer와 자동연동된다.
root: 데이터들의 root 엘리먼트라고 하면 될까?
field: [] 다음과 같은 방식으로 저장되어 있다라고 포맷을 알려 줌 향후 값, 포맷의 설정이 가능함

3. Grid 생성 부분

///////////////////////////////////////////////////////////
// grid 생성 부분
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: 'id', width: 120, sortable: true, dataIndex: 'id'},
{header: 'title', width: 190, sortable: true, dataIndex: 'title'}
],
viewConfig: {
forceFit: true
},
renderTo: 'div_grid',
title: '그리드',
width: 500,
height: 500,
loadMask: true,
frame: false,
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: store,
displayInfo: true,
displayMsg: '총계 {2}중 {0} - {1}',
emptyMsg: "조회값이 없습니다."
})
});

4. data 로드
store.load();

5. html 소스 부분

</head>
<body>
<h1>XML Grid 테스트</h1>
<div id="div_grid"></div>
</body>
</html>

2008년 3월 7일 금요일

[jquery] jquery context를 사용한 select box 관련 정리

select box의 내용 가져오기
$("#select_box > option:selected").val();

select box의 값 설정
$("#select_box > option[@value=지정값]").attr("selected", "true")

2008년 3월 6일 목요일

[jquery] select box의 선택값 출력

<select id="cnt_type">
<option value=1>1</option>
</select>

<script>
/////////////////////////////////////////
// case 1: 노가다
$("#cnt_type")
.find("option[@selected]")
.each(
function(){
alert ( this.value );
})

/////////////////////////////////////////
// case 2: jQuery context 사용
alert ( $("#cnt_type > option:selected").val() );
</script>

2008년 2월 22일 금요일

How to make a Flash movie with a transparent background

swf를 web page내부에 사용할 경우 html layer가 가려지는 오류가 있다.
이럴때 swf의 transparent 속성을 변경해서 이 문제를 해결할 수 있다.

참조 사이트: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14201&sliceId=2

Editing HTML code manually

To edit an existing HTML page, add the WMODE parameters to the HTML code.

Add the following parameter to the OBJECT tag:
```
<param name="wmode" value="transparent">
```
Add the following parameter to the EMBED tag:
```
wmode="transparent"
```

2007년 10월 25일 목요일

[Ajax] file을 그냥 call을 하면 한글때문에 절단 난다, reader를 사용해서 파일을 읽어야 함

<?
header("Content-type: text/html; charset=euc-kr");

switch ($type)
{
case "menu":
$file = "menu.htm";
break;

default :
$file = $template . ".htm";
break;
}

$master_code = substr( $template, 0,1 );
$_location = "${master_code}/" . $file;

// is exist check 없넹~~귀챦아~

readfile($_location);
?>

2007년 10월 12일 금요일

[jQuery] timer sample

Usage:

$.timer.start();
// some code
$.timer.mark('optional label');
// some code
$.timer.pause();
// some code to exclude from profiling
$.timer.resume();
// some code
$.timer.mark();
// some code
$.timer.show('optional label'); // displays a list of all marks to this point in an alert pop-up

The code:

// usage: $.debug({x:x, y:y, z:z})
$.debug = function(o) {
var s = [];
for (var name in o)
s.push(name + ': ' + o[name])
alert(s.join('\n'));
}

$.timer = {
start: function() {
this.info = {};
this.count = 0;
this.pauseTime = 0;
this.time = new Date().getTime();
},
mark: function(s) {
var t = ((this.pauseTime == 0) ? new Date().getTime() : this.pauseTime) - this.time;
this.count++;
if (s == undefined) s = 'mark ' + this.count;
this.info[s] = '' + t + ' ms (' + (t/1000) + ' s)';
this.time = new Date().getTime();
if (this.pauseTime != 0) this.pauseTime = this.time;
},
pause: function() {
if (this.pauseTime == 0)
this.pauseTime = new Date().getTime();
},
resume: function() {
if (this.pauseTime != 0)
this.time += new Date().getTime() - this.pauseTime;
this.pauseTime = 0;
},
show: function(s) {
this.mark(s);
$.debug( this.info);
}
}

2007년 10월 5일 금요일

[jQuery] checkbox선택 하기

<html>
<head><title>pimz dashboard</title></head>
<script src="js/jquery-1.1.3.1.js" type="text/javascript"></script>
<script src="js/corners.js" type="text/javascript"></script>
<script src="js/jquery.easydrag.js" type="text/javascript"></script>
<script type="text/JavaScript">

$(document).ready(function(){
$("a.link1").click ( bind_click2 );
});

str = "<ul><ul><li>test</li></ul><ul><li>aaa</li></ul></ul>";

function bind_click2()
{

a = $("ul", str).get(1);

$("ul", str).each( function(){
// alert ( $(this).html() );
})

//===========================================
// checkbox 선택..
// 항복 체크
i = 0; // 문제 번호
j = 1; // 항목 번호
$("#test ul")
.eq( i )
.find("input[@type=checkbox]")
.eq( j )
.attr("checked", "true");

}
</script>

<body>
Parameter passing test

</div>
</body>
</html>

2007년 9월 29일 토요일

[jQuery] Submit form

# post에 전송할 params 생성
var params = {};

$(this)
.find("input[@checked], input[@type='text'], input[@type='hidden'], input[@type='password'], input[@type='submit'], option[@selected], textarea")
.filter(":enabled")
.each(
function()
{
params[ this.name || this.id || this.parentNode.name || this.parentNode.id ] = this.value; }
);

#================================================================
Add a "curWait" class to the body, giving a hourglass symbol
$("body").addClass("curWait");

Post, via AJAX to the current form's action ("dbFormSubmission"), adding a "?call=ajax" to the URL
$.post(this.getAttribute("action") + "?call=ajax", params, function(xml){

2007년 9월 28일 금요일

[jQuery] 테이블의 홀,짝의 배경색 변경

가독성 있는 테이블을 만들려면, 다른 클래스 이름을 테이블의 모든 짝수 또는 홀수 행에 붙인다. 이를 다른 말로 테이블의 스트라이핑(striping)이라고 한다. jQuery를 사용하면 :odd pseudo-selector 덕택에 쉽게 수행할 수 있다. 아래 예제는 테이블의 모든 홀수 행의 백그라운드를 striped 클래스를 사용하여 변경한다.

$('table.striped > tr:odd').css('background', '#999999');

2007년 9월 27일 목요일

한글의 처리

javascript에서 server로 전송할 경우

encodeURIComponent(form.object.value);

server쪽에서 decode할 경우

UTF-8 로 iconv를 사용해서 convert

$content= iconv("UTF-8", "CP949", $content);

2007년 9월 4일 화요일

jQuery Context

다음에서 E,F,G는 HTML의 태그에 해당합니다. 예) DIV, P, SPAN

* - 모든 태그
E - 모든 E
E:nth-child(n) - E의 n번째 자식
E:first-child - E의 첫번째 자식
E:last-child - E의 마지막 자식
E:only-child - ?
E:empty - 자식이없는 E
E:enabled - 활성화된 E (예- 활성화된 텍스트에어리어)
E:disabled - 비활성화된 E (예- 비활성화된 인풋박스)
E:checked - 체크된 E(예- 라디오버튼, 체크박스)
E:selected - selected속성 활성화된 E(선택된 OPTION )
E.warning - class속성이 warning인 E
E#myid - id속성이 myid인 E
E:not(s) - s셀렉터와 맞지않는 E
E F - E의 자손인 F
E > F - E의 자식인 F
E + F - E 바로뒤의 F
E ~ F - E가 선행되는 F
E,F,G - 모든 E,F,G,

E[@foo] - foo속성이 있는 E
E[@foo=bar] - foo속성이 bar인 E
E[@foo^=bar] - foo속성이 bar로 시작하는 E
E[@foo$=bar] - foo속성이 bar로 끝나는 E
E[@foo*=bar] - foo속성에 bar가 포함되는 E

2007년 8월 22일 수요일

[jQuery] 가져온 xml data의 control이 필요함

date: 2007.8.22

XSLT와 XML을 사용해 사이트 개발 중

XSLT구현에서도 몇 가지 문제점이 있음.
jQuery를 사용해 xsl과 xml을 가져옴 google에서 배포한 ajaxslt를 사용해 특정 div에 결과값을 출력 함
=> 여기까지는 전혀 문제 없음

가져온 xml 데이터를 looping하고 결과를 바꿔주려 함, Client에서 해당 값을 변경함으로써 Server로부터 값을 가져오는데 따른 overhead를 방지 할 수 있음.