0

I am new to plugin coding and have followed John Morris' excellent starter kit tutorial. Everything works great including the JQuery Accordion in the popup modal dialog. I externalized the CSS from the dialog with no problem and would to do the same with the javascript and JQuery that is embedded in the dialog's html. I've tried several thing over the past week and all were failures. A couple of attempts would actually execute the JS file but JQuery is not home.

Here is my code/snipits of everything I've tried and I must apologize for it's length but in order to prevent trying the same things I felt it necessary to include everything I've tried. Well here it is...

//**************************************
//Plugin Code
//**************************************
(function($) {
    var passed_data = lgrriw_data;
    tinymce.create('tinymce.plugins.lgrriw_plugin', {
        init: function(editor, url) {
            editor.addButton('lgrriw_button', {
                title: "LGRRIW's Dumb Shortcode Creator",
                image: url + '/tinymce-button.png',
                cmd: 'lgrriw_command'
            });
            editor.addCommand('lgrriw_command', function() {
                editor.windowManager.open( 
                    {
                        title: "LGRRIW's Dumb Shortcode Creator",
                        file:  url + '/tinymce-dialog.html',
                        width: 600,
                        height: 600,
                        inline: 1
                    },
                    {
                        editor: editor,
                        jquery: $,
                    }
                );
            });
        }
    });
    tinymce.PluginManager.add('lgrriw_plugin', tinymce.plugins.lgrriw_plugin);
})(jQuery);

PHP:

//**************************************
//PHP snipits for the plugin
//**************************************
//This code work great in that the dialog's HTML can see JQuery
add_action( 'admin_enqueue_scripts', 'lgrriw_enqueue_admin_scripts' );
function lgrriw_enqueue_admin_scripts() {
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-core' );
    wp_enqueue_script( 'jquery-ui-dialog' );
    wp_enqueue_script( 'jquery-ui-accordion' );
}
//**********************************************
//This code executes the modal dialog script but inside the script JQuery is not found
add_filter( 'mce_external_plugins', 'lgrriw_register_tinymce_javascript' );
function lgrriw_register_tinymce_javascript( $plugin_array ) {
   $plugin_array['myplugin'] = plugins_url('iframe_embeder/tinymce-dialog.js');
   return $plugin_array;
}

//**************************************
//This code executes the modal dialog script but inside the script JQuery is not found
add_action( 'after_wp_tiny_mce', 'lgrriw_custom_after_wp_tiny_mce' );
function lgrriw_custom_after_wp_tiny_mce() {
    printf( '<script type="text/javascript" src="%s"></script>',  plugins_url('iframe_embeder/tinymce-dialog.js') );
}

tinymce-dialog.js (This is my external file that can't see JQuery)

//**************************************
//Here is the code inside of tinymce-dialog.js
//**************************************
(function($) {
    //alert('hello');
    var passed_arguments = top.tinymce.activeEditor.windowManager.getParams();
    var $ = passed_arguments.jquery;
    var jq_context = document.getElementsByTagName("body")[0];
    $('#accordion', jq_context).accordion({
        active: false,
        autoHeight: true,
        collapsible: true            
    });
    $("form", jq_context).submit(function(event) {
        event.preventDefault();
        //  Get the input text
        var input_text = $("input[name='dumb_shortcode_text']", jq_context).val();
        //  Construct the shortcode
        var shortcode = '[tdsk-dumb-shortcode';
        //  Do we have a value in the input?
        if( input_text != "" ) {
            //  Yes, we do. Add the text argument to the shortcode.
            shortcode += ' text="' + input_text + '"';
        }
        //  Close the shortcode
        shortcode += ']';
        passed_arguments.editor.selection.setContent(shortcode);
        passed_arguments.editor.windowManager.close();
    });

})(jQuery);

And finally my HTML Attempts:

<!-- **************************************  -->
<!-- * html attempts                                                *   -->
<!-- **************************************  -->
<!-- This code the script never executes  -->
<head>
    <!-- Disable browser caching of dialog window -->
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="pragma" content="no-cache" />
    <link rel="stylesheet" type="text/css" href="jquery-ui-1.12.1.custom/jquery-ui.min.css"/>
    <link href="tinymce-dialog.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="tinymce-dialog.js"></script>
</head>


<!-- **************************************  -->
<!-- This is the code that works perfect when put before the </body> tag  -->
<!-- and all non-working php code shown above removed -->
<script type="text/javascript">
    //alert('hello');
    var passed_arguments = top.tinymce.activeEditor.windowManager.getParams();
    var $ = passed_arguments.jquery;
    var jq_context = document.getElementsByTagName("body")[0];
    $('#accordion', jq_context).accordion({
        active: false,
        autoHeight: true,
        collapsible: true            
    });
    $("form", jq_context).submit(function(event) {
        event.preventDefault();
        //  Get the input text
        var input_text = $("input[name='dumb_shortcode_text']", jq_context).val();
        //  Construct the shortcode
        var shortcode = '[lgrriw-dumb-shortcode';
        //  Do we have a value in the input?
        if( input_text != "" ) {
            //  Yes, we do. Add the text argument to the shortcode.
            shortcode += ' text="' + input_text + '"';
        }
        //  Close the shortcode
        shortcode += ']';
        passed_arguments.editor.selection.setContent(shortcode);
        passed_arguments.editor.windowManager.close();
    });
</script>

Thanks for you input cybmeta, you are right Wordpress is out of the picture. I am commenting up here because there wasn't enough character in the comment section.

Let me see if I can explain it the way I understant it. The contents of the embedded script tag that follows the body tag, was copied to an external file named tinymce-dialog.js so the exact script exists both internal to the html file and externally. My test involves using either the internal embedded script or the external script referred to in script tag that resides in the head tag. Note that JQuery is passed to the dialog HTML page via tinymce's editor.windowManager.open method. So at the top of the javascript inside the dialog page The Jquery that was passed is assigned to the $ variable (e.g. var $ = passed_arguments.jquery;) the line following creates a context that must be used for all JQuery lines of code (e.g. var jq_context = document.getElementsByTagName("body")[0];). An example of this context is seen in the $('#accordion', jq_context).accordion({ line of code. Can you think of any kind of workaround that would allow the external js file to see this $ and jq_context variables or should I just deal with having the script embedded in the HTML since it works good?

  • Trying to guess your problem, the description is a bit difficult to follow. The "dialog" you talk about seems to be a separated document loaded inside a iframe, right? In that case, the issue you describe it is absolutely normal; that is how things work. There are workarounds to access jQuery of the parent document, for example this one. As you can see, WordPress has nothing to do with your problem. You may find better help in StackOverflow or asking to that great John Morris. – cybmeta Oct 26 '16 at 14:55
  • Yes it is inside an iframe but because I passed JQuery as a parameter to the HTML dialog page I can access all of the data fine and JQuery as well. Yes I believe that the dialog HTML Page is at this point completely isolated from Wordpress however referring to the HTML Head tag of the dialog I can load my CSS file with the link tag, but cannot load my JS file with a script tag. The only possible reason that I can think of is that Wordpress is looking inside the iframe and the #document into the HTML inside and blocking the script tag that references my JS file. – Larry Robertson Oct 26 '16 at 15:09
  • WordPress doesn't do that, almost 100% sure. Try to describe exactly what you mean with "I can not load JS with a script tag", that sentence says very little about the issue and, by the way, it is not the same problem you describe in the question. For example, Is the script tag in the HTML? Is the URL set in src attribute correct? Just do a little debug. Also, WordPress includes jQuery UI, you don't need to include your own copy. – cybmeta Oct 26 '16 at 15:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.