CI 묻고 답하기

제목 popup 창에서 부모창의 화면을 바꿔주고싶어요
글쓴이 승버미 작성시각 2011/11/15 14:49:40
댓글 : 14 추천 : 0 스크랩 : 0 조회수 : 32965   RSS
 현재 부모창에서 이미지를 업로드하기위해

팝업창을 띠워주고 팝업창에서 이미지를 업로드시키면서 팝업이 닫히도록 만들어 놓았는데요..

서버에 업로드된 이미지를 부모창에서 확인하도록하고 싶어요


여기서 문제는!!

++ 부모창을 새로고침을 하길 원하지않아요 ++
      (부모창의 콘텐츠가 form 이어서, 입력되었던 자료를 유지하고싶음)


보통 하나의 창에서는 ajax를 이용해서 일부분만 갱신시켜서 확인하게했었는데

창을 2개 다루게 되다보니 어떻게 연결을 시켜줘야할지 잘 모르겠어요 ㅠㅠ


자식창(popup 창) 에서 부모창의 javascript 를 수행하게 할수있으면 좋을것같은데...


 다음글 ASP 할줄 아시는분....ㅠㅠ (4)
 이전글 파일 upload 할때 파일명을 한글도 인식 시키고 싶... (1)

댓글

변종원(웅파) / 2011/11/15 15:22:11 / 추천 0
 부모창이던 원 창이던 jquery 적용하시면 됩니다. 자식창에서 액션을 끝내고 창 닫을때 서버에 업로드된 이미지 주소를 부모창의 이미지 주소로 바꿔주면 됩니다. 
검색해보시면 jquery로 부모창 접근하는 방법 찾으실 수 있습니다.
승버미 / 2011/11/15 15:30:50 / 추천 0
현재 파일명은 자식창에서 부모창으로 전달시켜서 DB로 까지 저장을 시키고있어요

그 이미지를 실제로 불러오고 갱신되면서 바로바로 이미지리스트부분만 새로고침시키려고 하고싶은데


제가 잘 몰라서 이해를 못하나봐요.. 일단 소스를 일부분 올려보자면...
승버미 / 2011/11/15 15:36:54 / 추천 0
부모창의 이미지를 업로드 시켜주는 부분
<div id="pictureEditTab">
 <ul class="company_info_tab">
 <?php foreach ($pictures as $picture):?>
  <li><?=img(array('src' => 'image/picture/'.$picture['media_url'], 'width' => 650, 'height' => 380))?></li>
  <li id="pictureDelBtn<?=$picture['media_id']?>"><span class="btn" onclick="deletePicture(<?=$picture['media_id']?>, <?=$picture['media_company_id']?>);"><?=$this->lang->line('funding_delete')?></span></li> 
 <?php endforeach;?>
 </ul>
 <div id="pictureAddZone"><span class="btn" ><?=anchor_popup('/startup/popupPictureUpload/'.$company_id, $this->lang->line('picture_add'), array('width' => 250, 'height' => 150))?></span></div>
</div> <!-- end fundingEditTab -->
 이곳에서 버튼을 클릭하면 팝업창이 뜨게되요
승버미 / 2011/11/15 15:39:59 / 추천 0
 팝업창 뷰

<div id="pictureAddForm">
 <form method="post" action="<?=DOC_ROOT?>/index.php/startup/addPicture" enctype="multipat/form-data">
  <table>
   <thead>
    <tr>
     <th colspan="2"><?=$this->lang->line('picture_info')?></th>
    </tr>
   </thead>
   <tfoot>
    <tr>
     <td>
      <input class="btn" type="submit" value="<?=$this->lang->line('funding_reg')?>" />
           
     </td>
    </tr>
   </tfoot>
   <tbody>
    <tr>
     <td><input type="file" name="c_picture"></td>
    </tr>
   </tbody>
  </table>
  <input type="hidden" name="media_company_id" value="<?=$company_id?>" />
 </form>
</div>
팝업창에서 파일을 등록하고 submit 을 실행하면 컨트롤러로 보내지고
승버미 / 2011/11/15 15:41:55 / 추천 0
 컨트롤러 페이지 addPicture 메서드

function addPicture() {
  
  $mediaData = $this->input->post();
  $company_id = $this->input->post('media_company_id');
  
  $config['upload_path']='image/picture/';
  $config['allowed_types']='gif|jpg|png';
  
  $this->load->library('upload',$config);
  $field_name="c_picture";
  
  if(! $this->upload->do_upload($field_name)) {
   
   $error = array('error' => $this->upload->display_errors());
   
  } else {
   
   $data = array('upload_data' => $this->upload->data());
   
   $mediaData['media_url'] = $data['upload_data']['file_name']; 
   $this->load->model('startup/media_model');
   $this->media_model->add_media($mediaData);
   $successData['company_id'] = $company_id;
   $this->load->view('company/picture/uploadSuccessPage', $successData);
  }
  
 }
업로드가 성공하면 성공페이리로 가게되고.. 
승버미 / 2011/11/15 15:44:41 / 추천 0
 성공페이지

성공페이지에서 내용은 아무것도 없고 자바스크립트 부분만 설정을 해보았어요
<script type="text/javascript">

var root = location.href.substring(0, location.href.indexOf('index.php')); //루트경로
var url = root + 'index.php/ajaxAction/printHtmlPictureEditTable';

alert(url);

$.post(url, {company_id: company_id}, function (data) {
 alert(data);
// opener.document.getElementById("pictureEditTab").html(data);
});
window.close();
</script>

이부분에서 $.post(); 부분이 이하로는 실행이 안되어지고 있어요 ㅠㅠ
변종원(웅파) / 2011/11/15 15:44:52 / 추천 0
 자식창에서 폼전송으로 처리하시는 것보다 ajax로 post전송후 서버에 업로드를 하고 그 파일명을 받고
성공했을 경우 다시 부모창의 <img>태그를 바꾸도록 jquery로 작업하셔야 합니다.


승버미 / 2011/11/15 15:51:50 / 추천 0
 이미지와같은 기타 데이타 타입들(enctype="multipat/form-data") 을 ajax 로 보내는 방법이....

아직 초보라 잘 모르겠네요 ㅠㅠ
승버미 / 2011/11/15 15:56:33 / 추천 0
 일단 구글링 해볼께요 감사합니닷
변종원(웅파) / 2011/11/15 16:09:28 / 추천 0
 $.ajax 또는 $.post 검색해보시면 됩니다.
승버미 / 2011/11/15 16:24:26 / 추천 0
 아!! 다시 본론을 돌아와서...

제가 마지막에 올린 코드의 Line 8~12 부분은 왜 동작을 안하는 걸까요..??


변종원(웅파) / 2011/11/15 16:31:39 / 추천 0
 ajaxAction 에서 에러가 났을 수도 있구요.
request값을 확인해보세요. (파이어폭스-파이어버그)
승버미 / 2011/11/15 16:37:02 / 추천 0
 아!!!!!!!!!!!!!!!!!!!!!!!!! ㅋ

다시보니 company_id 값을 받아오는곳이 없네요........ 하하하하하...................... ㅠㅠ
승버미 / 2011/11/17 09:52:04 / 추천 0
 업로드 성공후 팝업페이지에서 부모페이지를 수정하는 코드는 다음과같이 하여 완료하였습니닷

성공페이지 Line 8~11 중..
$.post(url, {company_id: company_id}, function (data) {
 $(opener.document).find("#pictureEditTab").html(data);
 window.close();
});

웅파님 감사합니닷 ㅋ