Отзывчивая функция обратного вызова filemanager

Question

Я использую автономную версию Responsive Filemanager 9 для выбора изображения на входе <> #image_link.

Где и как следует использовать функцию responsive_filemanager_callback?

Я пытаюсь заставить его работать, как указано в RFM documentation и приведенном ниже коде. Это необходимо для обновления атрибута src < img> #image_preview после выбора изображения в RFM9.

Это мой код:.

<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> 

в $ ('# image_link') на ('изменение') функция не распознает изменения от RFM.

Спасибо за ваши данные!

Answer 1

Я нашел другое решение, которое теперь обнаруживает изменения ввода с помощью javascript.

Возможно, не очень красиво проверять это по интервалу, но просто, достаточно быстро и надежно. Благодаря @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

Мое решение было изменить include.js файл в filemanager/js directory.. (or include.min.js. он определен в dialog.php 246 линии)

Так, в include.js файле в строке 500 можно найти function apply_img(file,external)

добавить в конец функции следующие строки:

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

    } 

«Родитель». является самым важным .. Я думаю, это необходимо из-за iFrame .. Так что если вы добавите функцию .responsive_filemanager_callback в свой html-документ, он запустит его.

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> 

JavaScript:

 <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> 

Я использовал fanybox, чтобы открыть и закрыть всплывающее окно

Answer 5

Создать ссылку:

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

Обратите внимание на последнюю часть в HREF атрибута, то field_id параметра, то есть ID поля ввода,

<input id='name'> 

Теперь, если вы нажмете на ссылку FancyBox откроется, вы должны напишите этот код, чтобы открыть fancybox:

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

Тогда, если вы нажмете на любой из i магов в Ответственный файловый менеджер, URL-адрес этого изображения будет напечатан в поле ввода, а fancybox будет автоматически закрываться.

Таким образом, вам не нужна какая-либо функция для того, чтобы получить информацию из Отзывчивого файлменеджера, но если вы хотите сделать что-нибудь после этого (как предварительного просмотра выбранного изображения), вы можете добавить функцию:

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

Эта функция срабатывает как только выбранный образ и FancyBox закрыт, так что это довольно удобный и простой в использовании.

Если вы хотите иметь чистый адрес вашего файла вы можете добавить relative_url = 1 в HREF адрес, как это:

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