Enqueue Scripts on Wordpress Plugin Dialog Window

Question

I'm working on a plugin for Wordpress that requires adding a button to the editor. On clicking the button, a dialog opens with some form fields. The user can fill in the data and when they "submit" it creates a shortcode in the editor.

I was able to successfully get the button added to the editor and I've got it firing off an AJAX call to load the dialog. Here's a snippet of the JS that makes that possible:

ed.windowManager.open(
    {
        file : ajaxurl + '?action=my_dialog_window',
        width : 480 + parseInt(ed.getLang('my_app.delta_width',0)),
        height : 300 + parseInt(ed.getLang('my_appdelta_height',0)),
        inline : 1
    },
    {
        plugin_url : url,
        some_custom_arg : 'custom arg'
    }
)

In my module I'm calling the following:

add_action('wp_ajax_my_dialog_window', 'my_dialog_window');

That basic function looks like this:

function my_dialog_window()
{
    // Queue JavaScript
    wp_enqueue_script("jquery");
    wp_enqueue_script("tiny_mce_popup",MY_WP_PLUGIN_URL."/js/tiny_mce_popup.js");
    wp_enqueue_script("my-dialog",MY_WP_PLUGIN_URL."/js/my-dialog.js");

    // Display Form
    echo "<form id=\"myForm\" method=\"post\">
        <tr>
            <td align=\"right\" class=\"gray dwl_gray\"><strong>Field:</strong></td>
            <td valign=\"top\"><input name=\"answer1\" type=\"text\" id=\"answer1\" size=\"40\" /></td>
        </tr>
        ...
    </table>

    <div class=\"mceActionPanel\">
        <div class=\"fl\"><input type=\"button\" id=\"insert\" name=\"insert\" value=\"Insert\" onclick=\"MyInsertDialog.insert();\" /></div>
        <div class=\"fr\"><input type=\"button\" id=\"cancel\" name=\"cancel\" value=\"Cancel\" onclick=\"tinyMCEPopup.close();\"/></div>
    </div>
    </form>";
}

So, you click the button in the editor and the dialog loads. I'm seeing 2 issues.

First, the javascript isn't being included. I can switch to straight links for it but "best practices" is using wp_enqueue_script so I'm really trying to accommodate this.

Second, at the bottom of the form is the text: "0". It looks like it can't find the callback function which is the same function. I don't really need a callback function on this one since I just want to use the my-dialog.js to create the shortcode and drop it into the editor.

for text: "0". you have to put die() or exit at end of your function my_dialog_window — softsdev

softsdev softsdev · Accepted Answer · 2013-06-25T13:12:19

why you can not do like that

For first point

function my_dialog_scripts() {
    wp_enqueue_script("jquery");
    wp_enqueue_script("tiny_mce_popup",MY_WP_PLUGIN_URL."/js/tiny_mce_popup.js");
    wp_enqueue_script("my-dialog",MY_WP_PLUGIN_URL."/js/my-dialog.js");
}
add_action('wp_enqueue_scripts', my_dialog_scripts);

for second point

You have to call die() or exit function at the end of your callback function ( my_dialog_window )

Enqueue Scripts on Wordpress Plugin Dialog Window

1 Answers