요즘 따라 포스팅이 자주 올라오죠?
개발이 거의 끝나고, 자잘한 버그를 수정하는 중이라 그렇습니다 ㅎㅎ.
이 버그 이외에도 몇 가지 버그와 팁 등을 발견했는데, 시간이 나는대로 포스팅하도록 하겠습니다.
모바일 어플리케이션을 제작할 때 간혹 jQuery의 serialize메소드를 이용해야 할 경우가 있습니다. ajax를 이용하여 비동기 액션을 해야 하는 경우가 이에 해당됩니다.
그런데 가끔가다 serialize메소드가 정상적으로 동작하지 않는 경우가 있습니다.
이 중 가장 많이 나오는 문제는 아무런 직렬화 없이 공백 문자를 반환하는 경우이죠.
이 경우는 원인이 너무 많아서 일일이 다 적기는 힘들고(..)
가장 많이 하는 실수는 폼의 각 요소들에 name속성을 부여하지 않아서 생긴 문제입니다.
대부분의 개발자들은 폼의 요소들에 id속성만 주지 name속성은 부여하지 않거든요. 하지만 jQuery의 serialize메소드를 이용하기 위해서는 반드시 name속성을 부여해 줘야 합니다.
그리고 두 번 째 문제. 현재 JQTouch에서 가장 많이 일어나는 문제인데,
폼 요소들 중 email타입만 직렬화가 되지 않는 경우입니다.
<form method="post">
<ul class = "rounded-each">
<li>
<label for="from">From</label>
<input type="email" id="from" name="from" autocapitalize="off"/>
</li>
<li>
<label for="to">To</label>
<input type="email" id="to" name="to" autocapitalize="off"/>
</li>
<li>
<label for="content">Content</label>
<textarea id="content" name="content"></textarea>
</li>
<input class="submit" id="submit" name="commit"
type="submit" value="Send" />
</ul>
</form>
<ul class = "rounded-each">
<li>
<label for="from">From</label>
<input type="email" id="from" name="from" autocapitalize="off"/>
</li>
<li>
<label for="to">To</label>
<input type="email" id="to" name="to" autocapitalize="off"/>
</li>
<li>
<label for="content">Content</label>
<textarea id="content" name="content"></textarea>
</li>
<input class="submit" id="submit" name="commit"
type="submit" value="Send" />
</ul>
</form>
위 폼의 경우는 content의 내용만 직렬화가 되고, from과 to의 내용은 직렬화가 되지 않습니다.
이 문제는 사파리 브라우저(모바일, 데스크톱 포함)에서만 일어나는 문제이며, 파이어폭스 브라우저에서는 일어나지 않는 특이한 버그입니다.
(사파리,파이어폭스를 제외한 브라우저는 잘 모르겠습니다. 아마도 webkit엔진을 사용하는 브라우저라면 비슷한 버그가 일어나겠죠?)
해결 방법은 간단하게도, jQuery의 버전을 최신으로 업그레이드 해주시면 됩니다.
이 버그가 특히나 JQTouch개발자에게 자주 일어나는 이유는 JQTouch가 최근까지 업그레이드가 되지 않고 있기 때문이죠. 개발자가 경쟁 프레임워크인 Sencha로 옮겼기 때문입니다.
덕분에 JQTouch에 포함되어 있는 jQuery는 무려 1.3.2! 오래되도 한참 오래 된 버전이죠 ㅎㄷ.
그렇기때문에 굳이 JQTouch를 사용하고 있지 않더라도, jQuery버전이 1.3.2인 분들에게도 동일한 버그가 일어날 것입니다.
