page-modal.md

Page Modal

Page Modal

XE.page의 기능을 사용하기 위해서는 xe-page.js파일을 로드하여야 합니다.

//blade파일(php)에서 로드할 경우
{{ XeFrontend::js('assets/core/xe-ui-component/js/xe-page.js')->load() }}

XE.pageModal(url, options, callback)

xeModal을 실행하여 html을 해당 modal영역에 랜더링합니다. response로 html 및 js, css파일들의 경로를 전달 받습니다.

동작 순서

1. js, css파일 로드
2. html로드
3. callback 실행
4. xeModal 실행

arguments

• url (string)
  • ajax가 호출될 url
• options (object)
  • data (object) 전송 파라미터
  • type (string) http method 'get'|'post'
• callback (function)
  • html append이후에 실행될 callback

DOM Element data-* attruibute를 이용한 XE.pageModal 사용 방법

xe.page.js파일을 로드하면 data-toggle="xe-page-modal" attribute를 사용한 DOM에 click이벤트를 바인딩 합니다.

• assets/core/common/xe.page.js의 파일을 로드합니다.
• 클릭되는 DOM에 data-toggle='xe-page-modal' attribute를 명시하여야 합니다.
• href or data-url에 ajax를 요청할 url정보를 명시합니다.
• data-callback으로 callback명을 명시합니다.
• data-params로 요청시 전송할 파라미터 정보를 명시합니다. (JSON string)

<a href="api/test" 
    data-toggle="xe-page-modal" 
    data-params="{'param1':'value1'}" 
    data-callback="callbackFunc">[XE.pageModal 실행]</a>

Controller 예시

class ExampleController extends Controller
{
    public function exampleReturnPopup()
    {
        //api_render 헬퍼 함수의 인자로 blade 파일의 경로를 지정하면 팝업으로 띄울 수 있도록 변환해줍니다. 
        return api_render('example_blade');
    }
}