응답 성있는 파일 관리자 콜백 기능

Question

나는 < 입력> #image_link에서 이미지 선택을 위해 응답 형 파일 관리자 9의 독립 실행 형 버전을 사용합니다.

responsive_filemanager_callback 기능을 사용해야하는 곳과 방법은 무엇입니까?

나는 아래의 코드와 RFM documentation에서 언급 한대로 작동 시키려고합니다. RFM9에서 이미지를 선택한 후 < img> #image_preview의 src 속성을 업데이트해야합니다.

이 내 코드입니다.에

<input id="image_link" name="link" type="text" value=""> 
<a class="btn iframe-btn" type="button" href="<?=FILEMANAGER_PATH;?>/dialog.php?type=1&field_id=image_link">Select</a> 
<img id="image_preview" src="" />; 

<script> 
$('.iframe-btn').fancybox({ 
    'width'  : 900, 
    'height' : 600, 
    'type'  : 'iframe', 
    'autoScale' : false 
}); 

$('#image_link').on('change',function(){ 
    alert('change triggered'); 
}); 

function responsive_filemanager_callback(field_id){ 
    console.log(field_id); 
    var url=jQuery('#'+field_id).val(); 
    alert('update '+field_id+" with "+url); 
    //your code 
} 
</script> 

$ ('#의 이미지 링크') ('변화') 함수는 RFM하여 변경 사항을 인식하지 못합니다.

입력 해 주셔서 감사합니다.

Answer 1

자바 스크립트로 입력 변경 사항을 감지하는 다른 해결책을 발견했습니다.

간격으로 확인하는 것이 좋지 않을 수도 있지만 간단하고 빠르며 신뢰할 만합니다. 감사합니다 @kikito!

https://github.com/splendeo/jquery.observe_field

<input id="image_link" name="link" type="text" value=""> 
<a class="btn iframe-btn" type="button" href="<?=FILEMANAGER_PATH;?>/dialog.php?type=1&field_id=image_link">Select</a> 
<img id="image_preview" src="" style="display:none;" />; 

<script type="text/javascript" src="/jquery.observe_field.js"></script> 
<script> 
$('.iframe-btn').fancybox({ 
    'width'  : 900, 
    'height' : 600, 
    'type'  : 'iframe', 
    'autoScale' : false 
}); 

$(function() { 
    // Executes a callback detecting changes with a frequency of 1 second 
    $("#image_link").observe_field(1, function() { 
     // alert('Change observed! new value: ' + this.value); 
     $('#image_preview').attr('src',this.value).show(); 

    }); 
}); 
</script>  

Answer 2

변경 이벤트는 교차 도메인 예를 위해 데모에서 사용되므로 삭제할 수 있습니다. responsive_filemanager_callback 함수를 편집해야합니다. 나머지 코드는 괜찮습니다. 내 맞춤 예제를 참조하십시오. here

Answer 3

내 솔루션은 500 라인에 include.js 파일에, 그것은

그래서 dialog.php 246 라인)에 정의되어 filemanager/js directory.. (or include.min.js.에 include.js 파일을 수정했다 당신

if (typeof **parent.**responsive_filemanager_callback == 'function') 
    { parent.responsive_filemanager_callback(external); } 

    } 

,691하십시오 function apply_img(file,external)

기능의 말에 다음 줄을 추가 찾을 수 있습니다

"상위" 가장 중요합니다 .. iFrame 때문에 필요합니다. HTML 문서에 .responsive_filemanager_callback 함수를 추가하면 실행됩니다.

Answer 4

문제를 해결하기 위해 관리했습니다.코드를 따르

HTML :

 <input id="image_link" name="link" type="text" value=""> 
     <a class="btn iframe-btn" type="button" href="<?=$filemanager_path;?>/dialog.php?type=1&field_id=image_link">Select</a> 
     <div id="cont-img"><img id="image_preview" src="" style="display:none;" width="303" /></div> 

자바 스크립트 :

 <script> 
     function responsive_filemanager_callback(field_id){ 
      console.log(field_id); 
      var url=jQuery('#'+field_id).val(); 
      //alert('update '+field_id+" with "+url); 
      //your code 
      $('#image_preview').attr('src',document.getElementById("image_link").value).show(); 
      parent.$.fancybox.close(); 
     } 
     </script> 

내가 링크 만들기 팝업

Answer 5

를 열고 닫습니다 fanybox을 사용 :

<a href='Address_Of_dialog.php?type=0&field_id=name'>open_fancybox</a> 

을 마지막 부분을 주목하라. HREF 속성에서 이 매개 변수를 FIELD_ID, 그것은 ID 입력 필드의, 당신은 fancybox이 열립니다 링크를 클릭하면 지금

<input id='name'> 

, 당신이해야에게 있습니다 fancybox를 열려면이 코드를 작성하십시오.

$('a').fancybox({ 
     type: 'iframe', 
     minHeight: '600' 
    }); 

다음 중 하나를 클릭하면 mages in 반응 형 파일 관리자, 해당 이미지의 URL이 입력란에 인쇄되고 fancybox가 자동으로 닫힙니다.

그래서, 당신은 응답 파일 관리자에서 정보를 얻기 위해 어떤 기능을 필요로하지 않지만, 당신이 (선택한 이미지를 미리보기 등) 그 이후로 아무것도 할하려는 경우, 당신은 기능을 추가 할 수 있습니다 :

function responsive_filemanager_callback(field_id){ 
    //write whatever you want 
    //you can change the src of an <img> using the <input> value 
} 

이 기능은 이미지가 선택되고 팬시 박스가 닫히 자마자 트리거되므로 사용하기 쉽고 편리합니다. 당신이 당신의 파일의 깨끗한 주소를 갖고 싶어

이처럼 HREF 주소로 relative_url = 1을 추가 할 수 있습니다

<a href='Address_Of_dialog.php?type=0&field_id=name&relative_url=1'>open_fancybox</a>