동적 페이지 생성에 관해 문의 드립니다.

영민 진

unread,

May 2, 2011, 4:02:46 AM5/2/11

to 앱스프레소

a 페이지에서 b페이지로 이동하는데 b 페이지를 동적으로 구현하려고 합니다.

pagebeforeshow 이벤트를 캐취한 다음에 이 부분에 b 페이지를 동적구성하는 식으로 하려 합니다.

이렇게 b 페이지의 body 부분을 해놓고 a페이지의 pagebeforeshow에서

document.getElementById('main').innerHTML =
"<div data-role=\"header\" data-position=\"fixed\">" +
"<h1>Test</h1>" +
"</div>" +
"<div data-role=\"content\">" +
"<a href=\"/a.html\" data-role=\"button\">About jQueryMobile</
a>" +
"</div>"

이렇게 했는데 jquery가 적용되지 않고 그냥 html태그로 인식됩니다.
왜 jquery를 인식하지 못하는지 궁금합니다.
a/b 페이지 모두 jquery 선언 잘되어 있습니다.

답변 부탁드립니다.

감사합니다.

존슨

unread,

May 2, 2011, 6:00:51 AM5/2/11

to 앱스프레소

안녕하세요?
원하시는 동적 마크업 생성시 jQueryMobile 에서 자동초기화(Automatic initialization)가 되지 않는걸
로 보입니다.

b 페이지에서 가능한 모든 마크업을 static하게 정의하는것을 권장 합니다.
단 content role 영역은 pagebeforeshow 이벤트로 동적 적용 가능합니다.
(header role 영역 변경시에는 자동초기화 되지 않습니다.)

content 영역 변경은 아래 샘플을 참조 하세요.

1. b.html
<div id="test" data-role="page">
<div data-role="header">
<h1>헤더영역은 변경하지마세요</h1>
</div>
<div id="test-content" data-role="content">
content 영역은 동적으로 변경 가능합니다.
</div>
</div>

2. 아래는 pagebeforeshow 이벤트 코드입니다.
$("#test").live("pagebeforeshow", function (event, ui) {
var markup = '동적 콘텐츠 내용입니다';
$('#test-content').html(markup);
});

원하시는 답변이 맞는지 모르겠네요.
꼭 성공하세요! ^^

Jin Youngmin

unread,

May 3, 2011, 12:48:18 AM5/3/11

to appspr...@googlegroups.com

답변 감사합니다.

다른 궁금증 하나 더 있어서요^^

b페이지에서는 왜 event가 발생하지 않는지 궁금합니다.

.live를 이용하면 발생하는 걸로 알고 있는데 b페이지에서는 작동하지 않습니다.

a페이지에서 b페이지에 대한 event pagebeforesho / pageshow 둘다 잘 작동하는데

b에서 b에 대한 event pagebeforeshow / pageshow가 작동하지 않습니다.

event가 작동하지 않아서 b페이지에서 동적으로 구성할 수가 없습니다.

원래는 html태그순에 따라서 독립적인 페이지 구성으로 했다가 안되서

<div 형태의 페이지로 구성도 해보았는데 두 방식 모두 되질 않았습니다.

아직 jquery / jquerymobile / html등 웹 쪽 시작한지 얼마 되지 않아서 모르는것도 많고 궁금한것도 많습니다.^^;;

다시 한번 답변 감사드립니다.

2011. 5. 2., 오후 7:00, 존슨 작성:

iolo

unread,

May 3, 2011, 9:59:45 AM5/3/11

to 앱스프레소

한 줄로 간단히 말씀드리면:

markup = '<div data-role="header">new title</div><div data-
role="content">....</div>...';

$('#main').page('destroy').html(markup).page();

좀더 부연설명을 드리면,
jquerymobile이나 jquery UI 등의 대부분의 UI 프레임웍은 html컨텐츠(innerHTML)를 바꿔도 자동으로
UI에 반영되지 않습니다.
단순한 html 태그들을 변형해서 예쁜 UI로 변신시키는 과정이 필요한거죠.
최초 페이지 로딩 시에는 이 작업을 자동으로 합니다만,
동적으로 내용을 바꾼 뒤에는 위에서와 같은 추가적인 작업이 필요합니다.

(jquery UI에 익숙하시다면 이미 해보셨을텐데...)정상적인 방법은
$('#main').html(markup).page('refresh'); 입니다.
다른 대부분의 위젯(폼컨트롤, listview등)은 이렇게하면 됩니다만,
page의 경우엔 현재 jquerymobile은 페이지 화면을 내부적으로 캐싱하고 있어서 안됩니다.(버그...)

정상적인 경우의 몇가지 예를 들어보면:

리스트뷰:

$('#list1').html('<li>first</li><li>second</
li>...').listview('refresh');

체크박스:

$('#check1').attr('checked', false).checkbox('refresh');

단일선택/콤보박스(selectmenu):

<select id="select1">
<option value="1" selected>first</option>
<option value="2">second</option>
<option value="3">third</option>
</select>

$('#select1').html('<option value="1">first</option><option
value="2">second</option>...').selectmenu('refresh');

$('#select1').attr('selectedIndex', 2).selectmenu('refresh');

등과 같습니다.

이 부분은 jquery UI의 위젯 구조와 관련된 것으로, jquery의 사용이 필수적입니다.
document.getElementById() 만으로는 해결이 안됩니다)

더 자세한 내용은 jquerymobile, jquery UI 사이트와 관련 문서 등을 참조하셔야 할 듯...
도움이 되셨길...

On May 2, 5:02 pm, 영민 진 <something...@gmail.com> wrote:

iolo

unread,

May 3, 2011, 10:21:46 AM5/3/11

to 앱스프레소

a,b페이지(div data-role="page")이 같은 html파일에 있느냐 다른 html파일에 있느냐에 따라 다른데...

첫번째 페이지(a.html)에서 두번째 페이지(b.html)로 이동하더라도 두번째 페이지의 head에 정의된
javascript/css는 로딩되지도 않고 실행되지도 않습니다.
그러나, 두번째 페이지(b)의 주소를 주소창에 입력해서 열면 javascript/css가 로딩도 되고 실행도 됩니다. 각각의 경
우에 브라우져의 주소창을 유심히 보시면 조금만 차이를 보실 수 있습니다('#')

이는 jquerymobile의 내부 구조와 깊은 관련된 것으로,
자세한 내용은 http://jquerymobile.com/demos/1.0a4.1/docs/pages/index.html 를 참
조하셔야 합니다만... 보시면 아시겠지만... 꽤 복잡하죠 -_-;
하지만 jquerymobile를 본격적으로 쓰시려면 꼭 이해하셔야 하는 부분입니다.
구글링을 하시면 비슷한 질문이 많을텐데...

간단한 해결책을 말씀드리면:

방법1: 페이지a(<div id="b" data-role="page">)와 페이지b(<div id="b" data-
role="page">)의 내용을 같은 html(a.html) 파일 안에 두고, 두 페이지간의 이동에 내부 링크(<a
href="#a">a</a>, <a href="#b">b</a>)을 사용하는 것입니다.

방법2: a에서 b로 이동하는 링크(<a href="b.html">b</a>)에 data-ajax="false" (혹은
rel="external" 등)을 설정(<a href="b.html" data-ajax="false">b</a>)하는 것입니
다. 대신 페이지 전환등에 버벅거림이 발생하고 자바스크립트 변수등이 초기화되므로 localStorage등을 이용해 필요한 값들
을 저장해두거나 파라메터로 전달해야 합니다.

방법3: 모든 자바스크립트는 페이지a(<div id="a" data-role="page">)가 속한 html 파일
(a.html) 안에 두는 것입니다. 비록 페이지b(<div id="b" data-role="page">)가 다른 html 파일
(b.html)에 있지만, ajax를 통해서 로딩되므로 b페이지가 보일때도 url은 a.html입니다(/
a.html#b.html 또는 /#b.html 등)

(서버를 경유하지 않는)웹앱에서는 방법1을, (웹서버를 통해 제공되는)모바일웹사이트에서는 아래의 방법2가 적합하고, 모바일웹사이
트로 구축된 것을 웹앱형태로 빠르게 변환하는 것이라면 방법3도 고려해볼 수 있고, 이 방법들을 적절히 섞어서 쓸 수도 있습니
다.

게시판에 몇줄로 설명할 수 있는 부분이 아니지만,
제가 설명드린 얘기가 jquerymobile의 문서를 이해하는데 조금이나마 도움이 되길 바라면서
몇 자 적어봤습니다.

그럼 이만...

EclipsE

unread,

May 4, 2011, 5:34:55 AM5/4/11

to 앱스프레소

저도 비슷한듯 다른 질문을 하려고 합니다.
웹으로 구현했을때는 잘 되던것이 소스 그대로 웹앱으로 구현하려하니 잘 안되는 부분이 있어서요

링크를 걸때 여러가지 유형이 존재하는데요
a.html에서
1. <a href='#main'>
같은 a.html에 <div data-role="page" id="main">이 존재하는 경우

2. <a href='/test/list.html'> 물리적으로 다른 html에 존재 하지만 같은 도메인에 있는 경우
*list.html안에 존재하는 <div data-role='page'> <- 요부분만 a.html에 동적으로 붙게 됨

3. <a href='http://test.com/test/list'> 다른 도메인에서 page를 가져오는 경우
*http://test.com/test/list <div data-role='page'> 역시나 요 부분만 동적으로 붙
습니다.

여기서 기존에 웹페이지로 구현 했을때 위 3가지 경우가 전혀 문제 되지 않았습니다.

웹앱으로 변환하는 와중 3번과 같은 경우
최초 <a href='http://test.com/test/list'>를 클릭했을때
*http://test.com/test/list에서 <div data-role='page'> 부문만 가져와서 붙기는하는데
css가 적용이 되지 않습니다.

최초로 css가 적용 되지 않은 상태에서
<a href='http://test.com/test/list?Test=test '>와 같이 최초에 가져와 붙인 data-url
로 이동하는게 아니라
같은 페이지를 다시 요청해서 붙이면 CSS가 적용이 됩니다.

물론 a.html에는 모든 페이지에 적용되는 css파일이 존재합니다.

중복 질문이 되지 않을까 해서 위 내용들을 몇번씩 읽어 보았는데요
다른 내용인것 같아서 질문을 올립니다.(같은 내용이라면 죄송합니다)

Reply all

Reply to author

Forward