lonelycat's cellar

!!! IE 6.0밖에 안되는 듯?!!!!
아마도 아래의 FF문제와 같이 locally loaded image에 대해서는 IE6.0밖에 안되는 듯

일단 firefox에서는 image.onload가 업로드 하려는 파일, 즉 locally loaded image에 대해서는 작동하지 않는다
(참고: http://www.tek-tips.com/viewthread.cfm?qid=1452885&page=5)

대신에 image.src="http://www.tek-tips.com/images/logo.gif" 와 같이 어딘가의 서버상에 올려져 있는 파일에 대해서는 작동한다.

function LoadImg(value) {     var imgInfo = new Image();     imgInfo.onload = img_Load;     imgInfo.onerror = function() {         // always called         alert('error');     }; // imgInfo.src = "http://www.tek-tips.com/images/logo.gif"; // 이렇게 하면 firefox에서도 동작함     imgInfo.src = value; } function img_Load() {     var imgSrc, imgWidth, imgHeight, imgFileSize;     var maxFileSize;     maxFileSize = 5000000;     imgSrc = this.src;     imgWidth = this.width;     imgHeight = this.height;     imgFileSize = this.fileSize;     if (imgSrc == "" || imgWidth <= 0 || imgHeight <= 0)     {         alert('그림파일을 가져올 수 없습니다.');         return;     }     if (imgFileSize > maxFileSize)     {         alert('선택하신 그림 파일은 허용 최대크기인 ' + maxFileSize/1024 + ' KB 를 초과하였습니다.');         return;     }     //이미지 사이즈 저장     document.F.imgWidth.value = imgWidth;     document.F.imgHeight.value = imgHeight;     alert(imgWidth);     alert(imgHeight); }

주의할 건 image.onload 이후에 image.src 가 와야한다는 것.
image.src 에서 실제 이미지를 로드하고 나서, onload가 동작하는 원리인 듯.
src가 먼저오면 onload가 되기도 하고 아니기도 하는 듯.

기타 참고 링크
http://dogfeet.tistory.com/20
http://www.juniac.net/183
http://blog.byuli.com/entry/운영체제와-브라우저-체크

radio에 디폴트로 선택되게 하고 싶을 때

public String getMcodeFromMLB() {         HttpURLConnection uc = null; // 연결용 커넥션         URL url = null;         String sUrl = "http://localhost:8080/MLBServerTest/MLBTest.jsp"; // 연결할 주소         String result = "";                 try {                         url = new URL(sUrl);                         uc = (HttpURLConnection) url.openConnection();                         uc.setDoInput(true);             uc.setDoOutput(true);             uc.setUseCaches(false);             uc.setRequestMethod("POST");             uc.setConnectTimeout(10000);  // 커넥션 타임아웃             uc.setAllowUserInteraction(true);                         // Http Header Setting             uc.setRequestProperty("Content-type", "application/x-www-form-urlencoded;charset=euc-kr");                         // Http Parameter Sending             String partner_id = "O00128";    // CP의 파트너ID             String service_code = "001";    // 각 CP서버에 할당된 코드             String music_code = "00293876";    // MLB에서 조회된 MUSIC_CODE             String content_price = "800";     // 컨텐츠 단가             String content_name = "핑계";     // 컨텐츠가 서비스되는 이름             String content_num = "1";     // 패키지에 포함한 컨텐츠의 갯수. 단일상품일 경우 1, 복합상품일 경우 2이상             String pid = "3102306023";     // PID             String sub_code = "12700000012";     // CP서버가 자체적으로 관리하는 Code(SCID등). 12자리 이하             String carrier_code = "00";     // ASP에 서비스하는 캐리어를 구분하기 위한 구분코드                         StringBuffer sb = new StringBuffer();             sb.append(MLBConstants.MCODE_REQUEST_PARTNER_ID).append("=").append(partner_id).append("&");             sb.append(MLBConstants.MCODE_REQUEST_SERVICE_CODE).append("=").append(service_code).append("&");             sb.append(MLBConstants.MCODE_REQUEST_MUSIC_CODE).append("=").append(music_code).append("&");             sb.append(MLBConstants.MCODE_REQUEST_CONTENT_PRICE).append("=").append(content_price).append("&");             sb.append(MLBConstants.MCODE_REQUEST_CONTENT_NAME).append("=").append(content_name).append("&");             sb.append(MLBConstants.MCODE_REQUEST_CONTENT_NUM).append("=").append(content_num).append("&");             sb.append(MLBConstants.MCODE_REQUEST_PID).append("=").append(pid).append("&");             sb.append(MLBConstants.MCODE_REQUEST_SUB_CODE).append("=").append(sub_code).append("&");             sb.append(MLBConstants.MCODE_REQUEST_CARRIER_CODE).append("=").append(carrier_code);                         PrintWriter pw = new PrintWriter(new OutputStreamWriter(uc.getOutputStream(), "euc-kr"));             pw.write(sb.toString());             pw.flush();                                     int resCode = 0; // RMS 와의 연결 응답값             resCode = uc.getResponseCode();                         StringBuffer resp = new StringBuffer();             if(resCode < 400){  // 연결이 성공적일때                                 String line;                 BufferedReader br = new BufferedReader(new InputStreamReader(uc.getInputStream(), "euc-kr"));                 while ((line = br.readLine()) != null) {                     System.out.println(line);                     resp.append(line);                 }                                 pw.close();                 br.close();                                 // html 파싱                 result = getResultCode(resp.toString());                 result = (result.equals("OK")) ? result : "MLB연동 중 에러 발생 : " + getResultCode(resp.toString());             }             else{                 result = "MLB연동 중 에러 발생 : " + resCode + " 에러입니다.";             }                     } catch (IOException e) {             e.printStackTrace();         }         catch(Exception e) {             e.printStackTrace();         }                 return result;     }

넘기고 받을 때 euc-kr로 변환하는 것도 주목.

참고: http://x1210.tistory.com/385
http://htmlcleaner.sourceforge.net/index.php

public String getResultCode(String resp) throws IOException {         // create an instance of HtmlCleaner         HtmlCleaner cleaner = new HtmlCleaner();         // take default cleaner properties         CleanerProperties props = cleaner.getProperties();           //        // customize cleaner's behaviour with property setters //        props.setXXX(...);                 // Clean HTML taken from simple string, file, URL, input stream,         // input source or reader. Result is root node of created         // tree-like structure. Single cleaner instance may be safely used         // multiple times.         TagNode node = cleaner.clean(resp);         // optionally find parts of the DOM or modify some nodes //        TagNode[] myNodes = node.getElementsByName(MLBConstants.MCODE_RESULT_NAME, true);         TagNode[] myNodes = node.getElementsByName("input", true); //        // and/or //        Object[] myNodes = node.evaluateXPath(xPathExpression); //        // and/or //        aNode.removeFromTree(); //        // and/or //        aNode.addAttribute(attName, attValue); //        // and/or //        aNode.removeAttribute(attName, attValue); //        // and/or //        cleaner.setInnerHtml(aNode, htmlContent);           //        // serialize a node to a file, output stream, DOM, JDom... //        new XXXSerializer(props).writeXmlXXX(aNode, ...); //        myJDom = new JDomSerializer(props, true).createJDom(aNode); //        myDom = new DomSerializer(props, true).createDOM(aNode);                 String resultCode = "";                 for(int i = 0; i < myNodes.length; i++) {                         System.out.println("name = " + myNodes[i].getAttributeByName("name"));                         if(myNodes[i].getAttributeByName("name").equals("result")) {                 resultCode = myNodes[i].getAttributeByName(MLBConstants.MCODE_RESULT_ATTRIBUTE);                 System.out.println(">>> value of result = " + resultCode);             }         }                 return MLBConstants.getMcodeRequestResultMessage(resultCode);     }

html

<td nowrap style="width:225px;margin-bottom:1px;">                                 <s:select name="approvalStage" list="stageCodeList" listKey="key" listValue="value" headerKey="" headerValue="--선택(현재 상태)--" onchange="selectStageCode(this);"></s:select>                             </td>                             <td nowrap style="width:85px;margin-bottom:1px;" id="dpStageTd">                                 <div id="dpStage" style="display: none;"><img src="../images/button/btn_next.gif" align="middle"> 상용상태</div>                             </td>                             <td nowrap style="width:225px;margin-bottom:1px;">                                 <div id="dpStageSelect" style="display: none;"><s:select name="dpStageSelect" list="dpStageCodeList" listKey="key" listValue="value" headerKey="" headerValue="전체"></s:select></div>                             </td>                             <td align="right" nowrap style="margin-bottom:1px;">                                 <img id="searchButton" src="../images/button/btn_search.gif" align="middle" onClick="javascript:searchContent();" style="cursor:hand;">                             </td>

script

function selectStageCode(obj) {         var STAGE_CODE_RELEASED = "<%=WorkflowCodeDef.STAGE_CODE_RELEASED%>";                 //alert(obj.value);         if(obj.value == STAGE_CODE_RELEASED) { // 상용이면             document.getElementById("dpStageTd").setAttribute("className", "subject");             document.getElementById("dpStage").style.display="";             document.getElementById("dpStageSelect").style.display="";         }         else {             document.getElementById("dpStageTd").setAttribute("className", "");             document.getElementById("dpStage").style.display="none";             document.getElementById("dpStageSelect").style.display="none";         }     }

출처: http://www.jiny.kr/jiny/417
위의 출처의 예제를 직접 해보면서 작성한 소스를 붙여넣고, 몇몇 사항들은 삭제/추가하였음...
문제있으면 알려주시길...

http://hanjiq.egloos.com/2108204
http://orangenius.tistory.com/5
http://jqueryui.com/home


size( ) 
Returns: Number
size( ), 실행후 숫자를 반환

The number of elements in the jQuery object.
매치되어진 원소들의 갯수를 반환한다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"> <title>01</title> <style> body { cursor:pointer; } div { width:50px; height:30px; margin:5px; float:left; background:blue; } span { color:red; } </style>   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function() {     $(document.body).click(function() {         $(document.body).append($("<div>"));         var n = $("div").size();         //var n = $("div").length; // size()와 같다         $("span").text("There are " + n + " divs. Click to add more.");     }).click(); // 한 번 강제로 클릭 - 아래의 body에는 div가 3개인데 실행되면서 4개로 화면에 표시된다. }); </script> </head> <body> <span></span> <div></div> <div></div> <div></div> </body> </html>

/JQueryTest01/WebContent/Example01/01.html

get( ) 
Returns: Array<Element>
get( ), 실행후 원소 배열 반환

Access all matched DOM elements.
매치되는 모든 문서 원소들을 배열로 반환한다

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"> <title>02</title> <style> span { color:red; } </style>   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function() {     disp($("div").get().reverse()); // get으로 array를 얻어서, reverse로 순서뒤집기 }); function disp(divs) {     var a = [];     for(var i = 0; i < divs.length; i++) {         a.push(divs[i].innerHTML);     }     $("span").text(a.join(" ")); } </script> </head> <body> Reversed - <span></span> <div>One</div> <div>Two</div> <div>2.5</div> <div>Three</div> </body> </html>

/JQueryTest01/WebContent/Example01/02.html

get( index ) 
Returns: Element
get( 인덱스 ), 실행후 매치 되는 원소를 반환

Access a single matched DOM element at a specified index in the matched set.
매치되는 원소들 중 주어진 인덱스에 해당하는 하나의 원소만 반환한다.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=EUC-KR"> <title>02</title> <style> span { color:red; } div { background:yellow; } </style>   <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"> $(document).ready(function() {     $("*", document.body).click(function (e) {         e.stopPropagation(); // 이벤트 정지         var domEl = $(this).get(0); // 클릭한 객체를 받음         $("span:first").text("Clicked on - " + domEl.tagName); // 태그명 표시     }); }); </script> </head> <body> <span> </span> <p>In this paragraph is an <span>important</span> section</p> <div><input type="text" /></div> </body> </html>

event.stopPropagation
https://developer.mozilla.org/en/DOM:event.stopPropagation
jQuery함수가 아니라 DOM 객체 함수임.

Prevents further propagation of the current event.
현재 이벤트가 더 진행하는 것을 방지

<html> <head> <title>Event Propagation</title> <style type="text/css">  #t-daddy { border: 1px solid red }  #c1 { background-color: pink; } </style> <script type="text/javascript"> function stopEvent(ev) {   c2 = document.getElementById("c2");   c2.innerHTML = "hello";   // this ought to keep t-daddy from getting the click.   ev.stopPropagation();   alert("event propagation halted."); } function load() {   elem = document.getElementById("tbl1");   elem.addEventListener("click", stopEvent, false); } </script> </head> <body onload="load();"> <table id="t-daddy" onclick="alert('hi');">  <tr id="tbl1">   <td id="c1">one</td>  </tr>  <tr>   <td id="c2">two</td>  </tr> </table> </body> </html>

/JQueryTest01/WebContent/Example01/03.html

출처: http://docs.jquery.com/Tutorials:Getting_Started_with_jQuery

Using the tablesorter plugin
http://tablesorter.com/docs/

$("#myTable").tablesorter(); --------------------------------------------- <table id="myTable"> <thead> <tr>     <th>Last Name</th>     <th>First Name</th>     <th>Email</th>     <th>Due</th>     <th>Web Site</th> </tr> </thead> <tbody> <tr>     <td>Smith</td>     <td>John</td>     <td>jsmith@gmail.com</td>     <td>$50.00</td>     <td>http://www.jsmith.com</td> </tr> <tr>     <td>Bach</td>     <td>Frank</td>     <td>fbach@yahoo.com</td>     <td>$50.00</td>     <td>http://www.frank.com</td> </tr> <tr>     <td>Doe</td>     <td>Jason</td>     <td>jdoe@hotmail.com</td>     <td>$100.00</td>     <td>http://www.jdoe.com</td> </tr> <tr>     <td>Conway</td>     <td>Tim</td>     <td>tconway@earthlink.net</td>     <td>$50.00</td>     <td>http://www.timconway.com</td> </tr> </tbody> </table>

<thread> 태그 안에 있는 것을 클릭하면 테이블을 정렬한다. 신기하네...
숫자, 문자 등을 알아서 판별한다고 하는군. 상세한 것은 위의 링크를 참조.

$("#myTable").tablesorter( {sortList: [[0,0], [1,0]]} );

This tells tablesorter to sort on the first and second column in ascending order.
정렬 초기값 설정.

Sort multiple columns simultaneously by holding down the shift key and clicking a second, third or even fourth column header!
하나 선택해서 그걸 기준으로 정렬하고 쉬프트 클릭하고 다른 것 선택하면 계단식으로 정렬됨(기존 정렬을 기준으로 다시 정렬).

속도만 받쳐주면 테이블 정렬은 이걸로 해도 될듯?!