페이지 전환시에 로딩대화창이 수동으로 띄울때 스크립트에서


$.mobile.pageLoading(); 하면  has no method 뜬다.....


버전업 되면서 저놈이 없어지고


$.mobile.showPageLoadingMsg("a", "Loading theme a...");


이놈으로 대체되었다. 


첫번째 인자는 theme 이고, 두번째는 메세지이다.


끌때는 $.mobile.hidePageLoadingMsg();



YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST


Ajax로는 원래 파일 업로드가 되지않는다.


이제는 된다....요놈만 있으면

jquery.form.js


사용 코드

var options = {

type:"POST",

dataType:"text",

       beforeSubmit: function(formData, jqForm, options) {

       },

       success: function(responseText, statusText, xhr, $form) {

           if(statusText == 'success'){            

        alert("저장되었습니다");

           }

       }

   };


$("#frm").ajaxSubmit(options);

YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST



간단히 서브밋 이 필요할 때, 폼 하나 만들고 바로 서브밋 날린다.


function test(){

$('<form/>').attr({method:"GET",action:"/blabla.do"}).submit();

}


YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST



ajax 쌩으로 쓸려면 코드도 길어지고 xmlhttp 객체 메모리관리도 해야하고 이것저것 귀찮죠
jquery 에서는 상당히 심플한 인터페이스를 제공합니다.. 플젝하다가 갖다썼는데 상당히 만족스럽네요
여러가지 ajax 타입을 소개할까합니다. 재밌는것도 몇개있네요.

타입1.

$.ajax({
  type: "GET",
  url: "test.js",
  dataType: "script"
});

기본형을 보시면 ajax() 라는 메서드안에 속성 3개를 가진 객체를 생성한후 인자로 때려넣고 있군요.
동적으로 js파일을 로드해서 실행시키는 기능을합니다. 기능이 재밌어 보이긴하는데, 실제로 별로 안쓸것같네요 -_-;


타입2.

 $.ajax({
   type: "POST",
   url: "some.php",
   data: "name=John&location=Boston",
   success: function(msg){
     alert( "Data Saved: " + msg );
   }
});
some.php 에 POST 타입으로 name 과 location 을 parameter 로 넘기고있네요. success 프라퍼티는 서버에서 http response 를 받은후에 수행될 콜백함수를 지정합니다. "데이타가 저장되었어염" 라고 알려주네요.
갠적으로 이 타입을 가장많이 사용하고있습니다. 실무에서도 가장많이 사용되죠.

타입3.
$.ajax({
  url: "test.html",
  cache: false,
  success: function(html){
    $("#results").append(html);
  }
});
cache 라는 프라퍼티가 추가되었군요. test.html 을 가장 최근에 수정된 페이지로 받겠다는거죠. 
"캐쉬를 사용하지 않겠다" 이겁니다. html 을 받은후에 results라는 아이디를 가진 엘리먼트의 자식노드로써 추가하고있네요. 쌩 dom api 로 쓰면 이렇겠죠. document.getElementById("results").innerHTML = html;
음 근데 이거랑은 좀 차이점이있어요. append 는 "result 엘리먼트의 자식이 존재할경우, 가장 마지막 자식으로 붙인다" 라는 규칙을 가지고있거든요. 반면에 innerHTML 으로넣으면 자식이 존재하든안하든 덮어써버리는거죠. 기존의 html 엘리먼트는 사라지고 새로운 엘리먼트로 교체되는 개념입니다. 

타입4.
 var html = $.ajax({
  url: "some.php",
  async: false
}).responseText;
async(비동기) 라는 프라퍼티가 추가되었군요. false를 때려넣었으니까 "동기"로 요청한다는말이네요.
뭔말이냐면, some.php로 request를 날린후에 response가 오기전까지는 브라우저를 블락킹 시켜버립니다.
유저의 어떠한 인터렉션도 허용되지않죠. 보시면 콜백함수를 때려넣는 success라는 프라퍼티도없네요
그럼 어떻게 응답데이타를 받나염? 바로 저렇게요. var html = $.ajax().responseText; 
어차피 서버로부터 response 가 오기전까지는 스크립트수행이 블락되어있으니까 저 코드가 가능한겁니다.
웹플밍을 하다보면 이 타입을 "써야만" 할때가 종종있더군요.

타입 5.
 var xmlDocument = [create xml document];
$.ajax({
   url: "page.php",
   processData: false,
   data: xmlDocument,
   success: handleResponse
});


출처 : 
http://boast.tistory.com/105 
YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST



jQuery 선택자


예) 테이블중 첫번째 행에 체크박스중 체크된 놈 선택


$('#test tr td:nth-child(1) :checked')


자식, 즉 한단계(1 Depth) 아래 항목만 선택할때

$('#test > div') ; // div 하위의 div들은 선택되지 않는다.

 



페인드인, 페이드아웃, (fadeIn, fadeOut) - 페이드 효과

$('#test').fadeIn();

$('#test').fadeOut();

$('#test').fadeIn(3000); // 3초동안 fadeIn 이 수행됩니다.

$('#test').fadeIn('slow'); - fast, normal

$('#test').fadeOut('fast', function(){

alert("페이드아웃이 완료되고나면, 이 콜백 메소드가 실행됩니다.');



slideUp, slideDown, slideToggle - 슬라이드 효과

 $('#test').slideUp('fast'); 
 $('#test').slideDown('fast');  
 $('#test').slideToggle('fast', function(){ 
        alert("슬라이드 토글 이 완료된후 실행되는 콜백메소드");
}); 

 




mouseOver, mouseOut, hover -  마우스 오버, 마우스 아웃, 호버

   $('#celebs tbody tr').mouseover(function(){

            $(this).addClass('zebraHover');

  });
 

  $('#celebs tbody tr').mouseout(function(){

            $(this).removeClass('zebraHover');

  });


 
Hover !!! 

$('#celebs tbody tr').hover(function(){

    $(this).addClass('zebraHover');

  }, function(){

    $(this).removeClass('zebraHover');

  });


// 첫번째, 이벤트 핸들러는 마우스 오버일때 실행되는 메소드이고,
두번째 핸들러는 마우스아웃 이벤트를 처리하는 메소드다.



토글 클래스 팁


if( x == 1){

$(this).addClass('opened');

}else{

$(this).removeClass('opened');

}



위 코드를 토글클래스로 바꾸면


$(this).toggleClass('opened', x == 1);


 



YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST