[jQueryUI] AJAX를 이용한 비동기적 대화상자

Front-End/jQueryUI

[jQueryUI] AJAX를 이용한 비동기적 대화상자

리딩리드 2017. 1. 23. 19:36

AJAX를 이용한 비동기적 대화상자

- $.get()을 이용하여 비동기적으로 대화상자의 내용을 변경 한다

1. 구현

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>Dialog</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/redmond/jquery-ui.min.css"/> </head> <input class="open" data-path="dl" type="button" value="down"/> <input class="open" data-path="quest" type="button" value="flyer"/> <input class="open" data-path="help" type="button" value="question"/> <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script> <script> $(function(){ $('.open').click(function(){ var target = $(this); $.get(target.data('path')+'.html').done(function(data){ $('<div></div>').attr('title',target.val()).html(data).dialog({ width:500, height:400, modal:true }); }); }) ; }); </script>

- data-path를 이용하여 특정 파일의 html 을 호출 한다