| 제목 | popup 창에서 부모창의 화면을 바꿔주고싶어요 | ||
|---|---|---|---|
| 글쓴이 | 승버미 | 작성시각 | 2011/11/15 14:49:40 | 
| 
                         | 
                |||
| 
                         현재 부모창에서 이미지를 업로드하기위해 팝업창을 띠워주고 팝업창에서 이미지를 업로드시키면서 팝업이 닫히도록 만들어 놓았는데요.. 서버에 업로드된 이미지를 부모창에서 확인하도록하고 싶어요 여기서 문제는!! ++ 부모창을 새로고침을 하길 원하지않아요 ++ (부모창의 콘텐츠가 form 이어서, 입력되었던 자료를 유지하고싶음) 보통 하나의 창에서는 ajax를 이용해서 일부분만 갱신시켜서 확인하게했었는데 창을 2개 다루게 되다보니 어떻게 연결을 시켜줘야할지 잘 모르겠어요 ㅠㅠ 자식창(popup 창) 에서 부모창의 javascript 를 수행하게 할수있으면 좋을것같은데...  | 
                |||
| 다음글 | ASP 할줄 아시는분....ㅠㅠ (4) | ||
| 이전글 | 파일 upload 할때 파일명을 한글도 인식 시키고 싶... (1) | ||
| 
                             
                                변종원(웅파)
                                /
                                2011/11/15 15:22:11 /
                                추천
                                0
                             
                             | 
                    
| 
                             
                                승버미
                                /
                                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();
});웅파님 감사합니닷 ㅋ  | 
                    
검색해보시면 jquery로 부모창 접근하는 방법 찾으실 수 있습니다.