[ASP] jquery modal 을 이용하고 ajax 형태의 간편한 '조회하기' 예제

조회하기 클릭하면

모달창이 뜬다.

조회하기 내역 - 성공시

조회하기 내역 - 실패시

 

 

실무에서 작업할때 신청예약한 내역에 대하여 '조회하기' 를 구현하고자 할때 고전적 방법으로는 팝업형태의 window.open 창을 자주 이용하였다.

 

이번에는 jquery Modal 을 이용하고 ajax 형태로 조회 결과를 이 Modal 창으로 바로 나타내는 실무예제를 정리해 보았다. 예제는 백엔드가 ASP 를 이용하였으나, PHP 나 JSP 의 다른 웹개발언어로 충분히 응용하면 될것이다.

 

우선 필자가 Modal 에 관해서는 아래의 포스팅글을 참고하기 바란다.

https://wonpaper.tistory.com/110

jquery modal 모달창 띄우기

 

 

[ 최초페이지 - main.asp ]

 

<!--#include virtual="dbcon.asp"-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-modal/0.9.1/jquery.modal.min.css" />
 
<a href="#applicationView">대관신청 조회하기</a>
 
<div id="applicationView" class="modal">
    <div id="apViewContent">
        <form method="post" name="f2">
        <h4>대관신청 조회하기</h4>
        <table width="600" style="border-collapse:collapse;" border="1">
        <tr>
            <td style="width:180px;">신청자명 </td>
            <td ><input type="text" id="f2_name" name="name" value="" maxlength="10"></td>
        </tr>
        <tr>
            <td>휴대폰번호</td>
            <td><input type="text" id="f2_hp" name="hp" value="" placeholder="'-' 없이 숫자만 입력" maxlength="11"></td>
        </tr>
        </table>
        <p style="text-align:center;padding:14px;"><input type="button" value="조회하기" onclick="applyViewChk()"/></p>
        </form>
    </div>
</div>
 
<script>
    $('a[href="#applicationView"]').click(function(event) {
      event.preventDefault(); 
 
      $(this).modal({
        fadeDuration: 250,
/*
      escapeClose: false,
      clickClose: false,
      showClose: false
*/
      });
    });
function applyViewChk() {
    var form = document.f2;
    if (!form.name.value) {
        alert("신청자명을 입력해 주십시오.");
        form.name.focus();
        return;
    }
    if (!form.hp.value) {
        alert("휴대폰번호를 입력해 주십시오.");
        form.hp.focus();
        return;
    }
    
    $.ajax({
        type: "post",
        url: "ajax_applyViewChk.asp",
        data: {
            name: $("#f2_name").val(),
            hp: $("#f2_hp").val(),
            target_month: '<%=target_month%>'
        },
        dataType: "text",
        success: function(data,status,xhr) {
            var display   = document.getElementById("applicationView");
            if (data != "") {
                display.innerHTML = data;
            }
 
        },
        error: function(xhr,status,error) {
            console.log(error);
        }
        
    });
}
 
</script>

 

[ ajax_applyViewChk.asp ]

 

<!--#include virtual="dbcon.asp"-->
<%
name    = request("name")
hp        = request("hp")
target_month        = request("target_month"))
 
sql = "select * from rental where name='"& name &"' and hp='"& hp &"' order by no DESC"
Set rs = dbcon.Execute(sql,,adCmdText)
 
 
    if Not rs.EOF then
        reserve_date = rs("reserve_date")
        reserve_time = rs("reserve_time")
        status = rs("status")
        if status <> "" then
            status_str = "<span style='color:green;'><strong>"& status &"</strong></span>"
        end if
%>
        <h5>대관신청 조회하기</h5>
        <table>
        <tr>
            <td>신청자명</td>
            <td><%=name%></td>
        </tr>
        <tr>
            <td>휴대폰번호</td>
            <td><%=hp%></td>
        </tr>
        <tr>
            <td>신청일자</td>
            <td><%=reserve_date%></td>
        </tr>
        <tr>
            <td>신청시간</td>
            <td><%=reserve_time%></td>
        </tr>
        <tr>
            <td>진행상태</td>
            <td><%=status_str%></td>
        </tr>
        </table>
        <p style="text-align:center;padding:14px;color:red;">
        '예약취소' 및 '예약삭제'를 원하실 때에는 <br>관리자에게 문의바랍니다.
        <br>
        <input type="button" value="창닫기" onclick="location.href='main.asp?target_month=<%=target_month%>'">
        </p>
<%
    else
%>
        <p style="text-align:center;"><b><%=name%></b> ( <b><%=hp%></b> ) 님의 신청예약 정보가 정확하지 않습니다.<br><br>확인 하신후 다시 시도해 주십시오.
        <br><br>
        <input type="button" value="다시 조회하기" onclick="location.href='main.asp?target_month=<%=target_month%>';">
        </p>
 
<%
    end if 
rs.Close
Set rs = Nothing
%>