Run!

appendTo를 이용해 객체를 동적 추가 시  $(document).ready(function() 에 선언해 놓은 이벤트들이 작동하지 않을 수 있다.

예를들어 다음과 같은 코드가 있다.

<ul id="list">

<li class="alert">클릭</li>

<li class="alert">클릭</li>

<li class="alert">클릭</li>

</ul>

<a href="#none" class="add">추가</a>

<script type="text/javascript">

$(document).ready(function() {

$(".alert").click(function() {  

        alert("Hello!");

});

$(".add").click(function() {  

        $("<li class=\"alert\">클릭</li>").appendTo("#list");

});

});

</script>

추가를 클릭할때마다 li태그가 추가가 되는데 기존의 세개 li를 클릭하면 알럿창으로 Hello를 출력하지만

새로 추가된 li를 클릭하면 변화가 없다. 즉 document.ready에서 문서가 로딩될때 있었던 세개의 li에만 클릭이벤트가 적용된 것이다.

그렇다면...새로 추가된 li에 이벤트를 적용하고 싶다면?

live를 추가해주면 된다. 어떻게?

이렇게!

$(".alert").live("click", function(){

alert("Hello!");

});

<style>

.comm_file {position:relative;background:url('btn_attachSch.png') no-repeat right center; }

.comm_file .inp_file_btn {display:block;position:absolute;top:0;right:0;width:58px;height:22px;opacity:0;filter:alpha(opacity=0); }

.comm_file .inp_file_txt {float:left; border:1px solid #bbb;background:none;}

.clfix:after{content:".";display:block;height:0px;clear:both;visibility:hidden; }

</style>

<div class="comm_file clfix" style="width:575px;">

<input type="file" id="attach" name="attach" class="inp_file_btn" onchange="document.getElementById('b_f_name_imsi').value=this.value;">

<input type="text" id="b_f_name_imsi" name="b_f_name_imsi" class="inp_file_txt" style="width:495px">

</div>

mysql에서 사용자 정의 함수를 만들 때 나는 에러

1. Not allowed to return a result set from a function SQL Statement

select할 때 값을 =가 아닌 into로 넣어준다.

예를 들면

select v_id = m_id from tblMember; => select m_id into v_id from tblMember;

2. ERROR 1418: This function has none of DETERMINISTIC, NO SQL, or READS SQL DATA in its declaration and binary logging is enabled

create 문 실행하기전에

SET GLOBAL log_bin_trust_function_creators = 1; 

를 실행해준다.

이놈의 IE가 항상 문제다.

저번에 FormData를 이용하여 간단하게 ajax로 파일업로드를 했는데

테스트를 해보니 ie9 이하에서는 작동을 하지않는다. (부셔버릴꺼야 ㅠㅠ)

또 막 구글구글을 하였으나 ie는 안됨 이라는 글 밖에 안나왔는데 모처럼! 네이버검색으로 건졌다.

바로바로 jquery.form.js 

jquery.form.min.zip

(출처 :  http://malsup.com/jquery/form/#download)

이 플러그인으로 구현해 보니 ie7~9 뿐만아니라 크롬 다 된다.

게다가 이것도 별로 복잡하지 않다!

아마도...이벤트나 쿠폰 등 기간 설정을 할 때 쓸 수 있을 듯 하다.

asp의 datediff함수가 쵸큼 아쉽다. (많이는 아니고)

datediff 함수

function dateDiff($date1, $date2, $date3){ $_date1 = explode("-",$date1); $_date2 = explode("-",$date2); $_date3 = explode("-",$date3); $result = "대기"; $tm1 = mktime(0,0,0,$_date1[1],$_date1[2],$_date1[0]); $tm2 = mktime(0,0,0,$_date2[1],$_date2[2],$_date2[0]); $tm3 = mktime(0,0,0,$_date3[1],$_date3[2],$_date3[0]); //오늘 날짜와 시작일 $s_diff = ($tm1 - $tm2) / 86400; //오늘 날짜와 종료 $e_diff = ($tm3 - $tm1) / 86400; if($s_diff>=0 && $e_diff>=0) { $result = "ING"; //진행중 }else if($s_diff<0){ $result = "BEFORE"; //시작전 }else if($e_diff<0){ $result = "END"; //종료 } return $result; }  

함수호출

php는 (거의)첨해보는거나 다름없는데

엄청 편한거 같다

더 들어가면 복잡하겠지만 ㅋ

date("Y-m-d") //오늘 날짜

date("Y-m-t")  //이번달 말일

date("Y-m-1")  //이번달 초

date("Y-m-t", strtotime("-1 month") ) //지난달 말일

date("Y-m-d", strtotime("-1 month") ) //오늘로부터 한달전

date("Y-m-1", strtotime("-1 month") ) //지난달 초

date("Y-m-d", strtotime("last friday") ) //오늘로부터 마지막 금요일 (획기적이다!)

굉장히 심플한  코드를 알려준 멋진 블로그가 있다 

http://digipiph.com/blog/submitting-multipartform-data-using-jquery-and-ajax

여기를 보고 따라하면 금방 쉽게할수 있는데....

문제는 jquery 버전이다.

난 1.4.2버전을 쓰고있었는데 이런 하위버전은 먹지 않는다는 것.

1.7.1로 바꿔주었더니 잘된다 아주...ㅠㅠ 이런 삽질은 이제 디폴트.

-----------------------------------

별로 필요없지만... 본문해석 및 편의를 위해 소스도 좀 살짝 고침

-----------------------------------

제목 : jQuery와 ajax를 이용한 multipart/form-data전송

글쓴이 : d.cochran 

작성일 : Wed, 08/14/2013 - 08:04 

내용 : 

ajax와 multipart/form-data를 이용하여 파일전송이 가능합니다. 이를 복잡하게 구현한 많은 사이트들이 존재하지만 사실은 쉽습니다. 이 방법은 약간의 jquery ajax 과정과 FormData()함수를 이용하여 폼데이터들을 가져오는 것을 요구합니다.

다음 방법을 이용하면 당신은 하나 이상의 다중 파일업로드를 할 수 있어요.

일단 폼을 봅시다.

<form method="post" name="frmReview" id="frmReview"> 블로그주소 <input type="text" maxlength="256" id="blog_url" name="blog_url" style="width:400px;" value="http://3mhappyhouse.blog.me/30185320565"/> 대표사진 <input type="file" id="thumb_img" name="thumb_img" /> <input type="submit" value="작성하기"> </form>

위의 폼은 히든필드, username필드 그리고 이미지파일업로드 필드를 가지고 있습니다. 우리의 php페이지에서 처리하도록 전송할겁니다.

자 이제  jQuery와 ajax를 이용한 script부분을 보시죵

$("form#frmReview").submit(function(event){ //disable the default form submission event.preventDefault(); var fd = new FormData($(this)[0]); $.ajax({ url: "action.php", type: "POST", data: fd, async: false, cache: false, contentType: false, processData: false, success: function(data){ alert(data); /* alert(data); if json obj. alert(JSON.stringify(data));*/ } }); return false; });

마지막으로 php에서 처리하는 부분입니다.

/* 파일업로드 */ $img_id = $g4[server_time]; //thumbnail저장 $thumbnail = $_FILES[thumb_img][name]; $thumb_ext = end(explode('.', $thumbnail)); $thumb_savename = $img_id."_thumb.".$thumb_ext; if ($thumbnail) upload_file($_FILES[thumb_img][tmp_name], $thumb_savename, "$g4[path]/data/recipe/review"); $blog_url = $_POST['blog_url'];

사족을 붙이자면

원글에서는 Profile Image: <input name="profileImg[]" type="file" />이렇게 필드이름뒤에 []를 붙였는데 굳이 붙일 필요는 없다는 것이 나의 결론. 괜히 배열이 되어 귀찮다. 그러나 혹시 나중에 동적으로 추가가되는 기능이 구현된다면 필요할지도?

jplayer로 플레이어를 붙여봤는데 확인해보니 ie낮은 버전에서는 플레이가 되지를 않는다.

audio태그 역시 구 ie는 지원을 잘 해주지 않기 땜에...또 이리저리 소스를 주어다 조합해 보았다.

음 그리고 bject태그는 object태그이다. 이상한 스크립트가 붙어서 o를 뺐음

우선 html부터

<!-- 컨트롤버튼 --> <p> <a href="#" class="jp-play"><img src="skin/play.png" alt="play" style="width:10%" />재생</a> <a href="#" class="jp-pause"><img src="skin/pause.png" alt="pause" style="width:10%" />일시정지</a> </p> <!-- 플레이어 --> <p> <audio controls id="objAP" loop="true"> <source src="mp3/gae.mp3" type="audio/mpeg" /> <source src="mp3/gae.ogg" type="audio/ogg"> <!-- ie7,8은 audio source태그가 안먹으므로 오브젝트태그로 해준다.--> <bject id="objAP_8" classid="clsid:6BF52A52-394A-11d3-B153-00C04F79FAA6" style="display:none;"> <param name="URL" value="mp3/gae.mp3" /> <param name="uiMode" value="invisible" /> <param name="autoStart" value="false" /> <param name="volume" value="80" /> <param name="playCount" value="10000" /> </bject> </audio> </p>

다음은 스크립트 소스~

<script> $(document).ready(function(){ $(".jp-pause").hide(); //일단 일시정지버튼은 안보이게... $('.jp-play').click(function () { //플레이버튼 클릭했을 때 액션 $(".jp-play").hide(); //플레이버튼대신 $(".jp-pause").show(); //멈춤버튼이 나오고 if (browser.name == "msie" && parseInt(browser.version) <9) //ie 7,8이면 { document.getElementById('objAP_8').controls.play(); //이렇게 재생 }else{ //아니면 $("#objAP").trigger('play'); //이렇게 재생 } }); $('.jp-pause').click(function () { //멈춤버튼 클릭시 액션 $(".jp-pause").hide(); //멈춤버튼을 숨기고 $(".jp-play").show(); //플레이버튼이 나옴 if (browser.name == "msie" && parseInt(browser.version) <9) //ie 7,8이면 { document.getElementById('objAP_8').controls.pause(); //이렇게 멈춤 }else{ //아니면 $("#objAP").trigger('pause'); //이렇게 멈춤 } }); $("#objAP").hide(); 일단 플레이어는 안보여줌 }); //browser detect 브라우저 체크 함수 var browser = (function() { var s = navigator.userAgent.toLowerCase(); var match = /(webkit)[ \/](\w.]+)/.exec(s) || /(opera)(?:.*version)?[ \/](\w.]+)/.exec(s) || /(msie) ([\w.]+)/.exec(s) || !/compatible/.test(s) && /(mozilla)(?:.*? rv:([\w.]+))?/.exec(s) || []; return { name: match[1] || "", version: match[2] || "0" }; }()); </script>