Standalone, colorbox cannot close

[ejeanneaubc]

Hi !

I have a problem with the standalone integration of elFinder.

I have my standalonepopup.js

jQuery(document).ready(function($) {

    $(document).on('click','.popup_selector',function (event) {

        event.preventDefault();
        var updateID = $(this).attr('data-inputid'); // Btn id clicked
        var elfinderUrl = '/elfinder/popup/';

        var triggerUrl = elfinderUrl + updateID;
        $.colorbox({
            href: triggerUrl,
            fastIframe: true,
            iframe: true,
            width: '70%',
            height: '50%'
        });

    });
});
// function to update the file selected by elfinder
function processSelectedFile(filePath, requestingField) {
    $('#' + requestingField).val(filePath).trigger('change');
}

If i don't use document ready like the standalonepopup originaly js file i've got an $.colorbox is undefined error.

When i click on my media in the popup i have this javascript error :

feature_image:38 Uncaught TypeError: Cannot read property 'close' of undefined

This :

parent.jQuery.colorbox.close(); seems to not working

Here my html template :

@extends('layouts.app')
@include('tinymce::tpl')
@section('content')
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="/assets/js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="/assets/js/standalonepopup.js"></script>
<link href="/assets/css/colorbox.css" rel="stylesheet">

<script type="text/javascript">
    function elFinderBrowser (field_name, url, type, win) {

        tinymce.activeEditor.windowManager.open({
            file: '<?= route('elfinder.tinymce4') ?>',// use an absolute path!
            title: 'elFinder 2.0',
            width: 900,
            height: 450,
            resizable: 'yes'
        }, {
        setUrl: function (field_name, type, win, url) {

            win.document.getElementById(field_name).value = url;
        }
        });
        return false;
    }
</script>
<div class="container">
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <div class="panel panel-default">
                <div class="panel-heading">Welcome</div>

                <div class="panel-body">
                    Your Application's Landing Page.
                    <textarea class="tinymce"></textarea>
                    <p>
                        <label for="feature_image">Feature Image</label>
                        <input type="text" id="feature_image" name="feature_image" value=""/>
                        <a href="" class="popup_selector" data-inputid="feature_image">Select Image</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

Have you got an idea please ?

Thank's a lot !

Emmanuel.

[gzai]

in standalonepopup.js

jQuery(document).ready(function($) { <-- no coding like this

    $(document).on('click','.popup_selector',function (event) {

        event.preventDefault();
        var updateID = $(this).attr('data-inputid'); // Btn id clicked
        var elfinderUrl = '/elfinder/popup/';

        var triggerUrl = elfinderUrl + updateID;
        $.colorbox({
            href: triggerUrl,
            fastIframe: true,
            iframe: true,
            width: '70%',
            height: '50%'
        });

    });
}); <-- no coding like this
// function to update the file selected by elfinder
function processSelectedFile(filePath, requestingField) {
    $('#' + requestingField).val(filePath).trigger('change');
}

[ejeanneaubc]

Thank's but when i remove the jquery ready, i have this :

standalonepopup.js:8 Uncaught TypeError: $.colorbox is not a function

When i click on my link to open elFinder Browser with colorbox

[gzai]

<script type="text/javascript" src="/assets/js/jquery.colorbox-min.js"></script>

this source exist in js folder?

[ejeanneaubc]

Yes absolutely.

[ejeanneaubc]

Anyone have other idea please ?

[hungnm144]

Edit your js script in \resources\views\vendor\standalonepopup.php <script type="text/javascript">

  $(document).ready(function () {   var elf = $('#elfinder').elfinder({   // set your elFinder options here   height: 550,   lang: 'vi', // locale   customData: {   _token: 'sonkj1Hfl8YTvrHXwZzJVMhW1ejFBKJR7hGNpN8f'   },   url: 'http://laravel/admin/filemanager/connector', // connector URL   soundPath: 'http://laravel/packages/barryvdh/elfinder/sounds',   dialog: {width: 900, modal: true, title: 'Select a file'},   resizable: false,   onlyMimes: ['image'],   commandsOptions: {   getfile: {   oncomplete: 'destroy'   }   },   getFileCallback: function (file) {   window.parent.processSelectedFile(file.path, 'feature_image');   }).fadeIn('slow');   // Close colorbox   parent.$.colorbox.close();   }   }).elfinder('instance'); </script> Try it

[arturmamedov]

Try a standalone window, without colorbox, modals etc. simple browser window https://goo.gl/4YyP3J