cm-web-legacy/application/views/admin/advertisement/ad_reg.php

<?
	$menu_code = '15';
	require_once (APPPATH.'views/skin/admin/_content_comm.php');
?>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
label, input { display:block; }
input.text { margin-bottom:12px; width:95%; padding: .4em; }
fieldset { padding:0; border:0; margin-top:25px; }
h1 { font-size: 1.2em; margin: .6em 0; }
div#users-contain { width: 350px; margin: 20px 0; }
div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
.ui-dialog .ui-state-error { padding: .3em; }
.validateTips { border: 1px solid transparent; padding: 0.3em; }
</style>

<div class="common_depth3 clearfix">
<ul class="clearfix depth3_tep">
    <li><a href="/admin/advertisement/1">광고 페이지 관리</a></li>
    <li><a href="/admin/advertisement/ad_detail" class="on fw700">개별 광고 관리</a></li>
</ul>
</div>

<div class="write_btn">
	<a href="ad_detail" id="ad_detail">취소</a>
</div>

<div class="inner_content">
<form name="input_form" id="input_form" action="/admin/advertisement/ad_detail_reg" method="post" enctype="multipart/form-data">
  <div class="common_table">
    <table><tbody>
    <tr>
      <th class="fw500">페이지 이름</th>
        <td class="tl">
          <input type="text" name="page_title" id="page_name" value="" readonly style="display:none">
          <SELECT id="page_list" NAME="page_name" SIZE=1></SELECT>
        </td>
    </tr>
    <tr>
      <th class="fw500">광고 위치 등록</th>
        <td class="tl">
          <SELECT id="ad_pos" NAME="ad_pos" SIZE=1></SELECT>
        </td>
    </tr>
    <tr>
      <th class="fw500">광고등록 옵션</th>
        <td class="tl">
          <input type="radio" name="ad_option" value="0" id="ad_option_0">파일 업로드<br>
          <input type="radio" name="ad_option" value="1" id="ad_option_1">광고 코드 등록<br>
        </td>
    </tr>
    <tr class="option_file" style="display: none;">
      <th class="fw500">업로드 파일 선택</th>
        <td class="tl">
          <input type="file" name="ad_file" id="ad_file" onchange="change_img(this)">
          <div style="width:600px;height:200px">
          <img id="image_section" src="#" style="max-height: 100%; max-width: 100%;"/>
          </div>
        </td>
    </tr>
    <tr class="option_file" style="display: none;">
      <th class="fw500">랜딩 페이지 주소</th>
        <td class="tl">
          <input type="text" name="ad_lending" id="ad_lending" value="">
        </td>
    </tr>
    <tr class="option_HTML" style="display: none;">
      <th class="fw500">HTML</th>
      <td class="tl">
        <textarea style="width:600px;height:200px" name="ad_code" id="ad_code"></textarea>
      </td>
    </tr>
    </tbody></table>
  </div>
  <div class="write_btn tc">
    <a href="javascript:setting_ad_reg_proc()">저장하기</a>
  </div>
</form>

<script type="text/javascript">
const page_name=<?=json_encode($page_name)?>;
const ad_pos_name =<?=json_encode($ad_pos_name)?>;

$(document).ready(function(){
  setting_page_list(page_name)
  setting_ad_pos_option();
  <?if($mode=='modify'){?>
    var edit_data = <?=json_encode($edit_data)?>;
    setting_edit_data(edit_data);
  <?}?>
  ad_option_check();
});

//load 데이터 setting
function setting_edit_data(edit_data){
  console.log(edit_data);
  if(edit_data){
  //페이지 이름 
  let page_key=page_name.indexOf(edit_data.page_name);
  $("#page_list").val(page_key).prop("selected", true);
  //광고 위치 
  $("#ad_pos option").remove();
  setting_ad_pos_option();
  $("#ad_pos").val(edit_data.ad_pos_name).prop("selected", true);
  //광고 옵션
  (edit_data.ad_option==0)?$("#ad_option_0").prop("checked", true):$("#ad_option_1").prop("checked", true);
  ad_option_check();
  //File
  $('#image_section').attr('src', edit_data.ad_file);
  //lending
  $("#ad_lending").val(edit_data.ad_lending);
  //HTML
  $("#ad_code").val(edit_data.ad_code);
  }else{
    //image
    $("#ad_file").val("");
    $('#image_section').attr('src', "");
    $('#image_section').css('display', "noen");
    //lending
    $("#ad_lending").val("");
    //HTML
    $("#ad_code").val("");
    $("input:radio")[0]['checked']=false;
    $("input:radio")[1]['checked']=false;
    ad_option_check();
  }
}

//page name setting
function setting_page_list(page_name){
  for (var i in page_name) {
    $("#page_list").append(new Option(page_name[i], i));
  }
}

//ad_pos option setting
function setting_ad_pos_option(){
  let num =$("#page_list").val();
  for (var i in ad_pos_name[num]) {
    $("#ad_pos").append(new Option(ad_pos_name[num][i], ad_pos_name[num][i]));
  }
}

//페이지 이름 변경 이벤트
$("#page_list").change(function(){
  $("#ad_pos option").remove();
  setting_ad_pos_option();
  call_data_ajax();
})

// 광고 등록 옵션 변경 이벤트
$('input[name="ad_option"]').change(function(){
  ad_option_check();
})

// ad_option radio btn check event
function ad_option_check(){
  if($('input[name="ad_option"]:checked').val()==null) {
      $(".option_file").css("display","none");
      $(".option_HTML").css("display","none");
  }else if($('input[name="ad_option"]:checked').val()==0){
      $(".option_file").css("display","");
      $(".option_HTML").css("display","none");
  }else if($('input[name="ad_option"]:checked').val()==1){
      $(".option_file").css("display","none");
      $(".option_HTML").css("display","");
  } 
}

//광고 위치등록 변경 이벤트
$("#ad_pos").change(function(){
  call_data_ajax();
});


//ad_file 변경 이벤트
function change_img(value){
  if (value.files && value.files[0]) {
        var reader = new FileReader();
 
        reader.onload = function (e) {
            $('#image_section').attr('src', e.target.result);
        }
 
        reader.readAsDataURL(value.files[0]);
    }
    }

function call_data_ajax(){
  var page_name=$("#page_list option:selected").text();
  var pos_name=$("#ad_pos").val();
  $.ajax({
        type : 'POST',
        url : "/admin/advertisement_ajax/ajax_call_ad_detail_ad_idx",
        // data : {"pagename" : page_name,
        //         "pos_name" : pos_name},
        data : {"page_name" : page_name,
                "pos_name" : pos_name},
        dataType: 'json',
        success : function (response) {
          setting_edit_data(response);
        }
      })
  }

//validation
function setting_ad_reg_proc(){
    if($('input[name="ad_option"]:checked').val()==null) {
         alert("광고옵션을 선택해주세요");
         return false;
    }else{
      if($('input[name="ad_option"]:checked').val()=='0') {
          // if($('#ad_file').val()==''){
          //   alert("file을 선택해주세요");
          //   return false;
          // }
          // if($('ad_lending').val()==''){
          //   alert("페이지 주소를 입력해주세요");
          // }
      }else if($('input[name="ad_option"]:checked').val()=="1"){
          
      }
    }

    $("#page_name").val(page_name[$("#page_list").val()]);
    $("#input_form").submit();
}
</script>

</div>