Responsive filemanager callback function

Question

I use the standalone version of Responsive Filemanager 9 for image-selection on a < input> #image_link.

Where and how the responsive_filemanager_callback function should be used?

I'm trying to get it work as mentioned in the RFM documentation and the code below. This is needed to update the src attribute of the < img> #image_preview after selecting an image in RFM9.

This is my code:

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

The $('#image_link')on.('change') function doesn't recognize the changes by RFM.

Thanks for your inputs!

cool · Answer 1 · 2017-01-24T11:44:16.310

Create a link:

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

Notice the last part in the href attribute, the field_id parameter, that is the ID of an input field,

<input id='name'>

Now if you click the link the fancybox will open, you should write this code to open fancybox:

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

Then if you click on any of the images in Responsive filemanager, the url of that image will be printed on the input field, and the fancybox will close automatically.

So, you don't need any function in order to get information out of Responsive filemanager, but if you want to do anything after that (like previewing the selected image), you can add the function:

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

This function will trigger as soon as the image selected and the fancybox closed, so it is pretty handy and easy to use.

If you want to have a clean address of your file you can add relative_url=1 to the href address, like this:

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

score 2 · Answer 2 · edited Nov 10 '14 at 13:27

My solution was to modify the include.js file in filemanager/js directory.. (or include.min.js. it is defined in dialog.php 246 line )

So, in include.js file in the 500th line you can find a function apply_img(file,external)

add into the end of function the following lines:

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

    }

The "parent." is the most important.. I guess, it is needed because of the iFrame.. So if you add a .responsive_filemanager_callback function to your html document, it will run it.

score 1 · Answer 3 · answered Oct 25 '14 at 06:43

1

On change event is used on demo for cross domain example so you can delete. You must edit the responsive_filemanager_callback function. The rest of the code is ok, see my custom example here

answered Oct 25 '14 at 06:43

tr1pp0

31
1
6

Sorry, the callback doesn't fire. I set it up [here](http://test.pcardsolution.ch/rfm/) seperately. Do you see what's wrong? thx! – wamaro Oct 27 '14 at 08:55

score 1 · Accepted Answer · answered Oct 30 '14 at 13:28

I've found an other solution now that detects input changes by javascript.

It's maybe not very beautiful to check this by interval but simple, fast enough and reliable. Thanks to @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>

score 1 · Answer 5 · edited Jul 15 '15 at 13:43

Managed to solve the problem.follow the code:

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>

I used fanybox to open and close the popup

Thank You. Passing argument `field_id` to dialog.php solved my problem. Thats the best answer. — instead, Jan 24 '16 at 21:44

Responsive filemanager callback function

5 Answers5