I've created two plugins (A and B), where plugin B is dependent on plugin A.
In plugin A I use jQuery UI Dialog for user interaction and this works fine.
Dependency: Plugin A is a filebrowser. Clicking a button opens a dialog window where user can select file to relate to wordpress post. Plugin A loads all JS necessary to use the dialog box.
Now I try using Dialog box in plugin B and I get an error:
(this.uiDialogTitlebarCloseText = c("<span/>")).addClass("ui-icon ui-icon-closethick").text(m.closeText).appendTo is not a function
Plugin B
I'm testing with very simple code:
// Javascript code from custom_plugin.js
jQuery(document).ready(function() {
jQuery('#dialog').dialog();
});
// Code from my custom_plugin.php
<div class="icon32" id="icon-tools"><br></div>
<h2>Gallery manager</h2>
<div id="poststuff" class="metabox-holder">
<div id="post-body">
<div id="post-body-content">
<div id="dialog" title="File browser"> This is a dialog.</div>
</div>
</div>
</div>
I have no idea why I'm getting this error. Any suggestions on how I can resolve this?
Plugin A
This is the codeI use in plugin A. I'm getting the above error without ever interacting with plugin A.The scripts for plugin A is just loaded normally.
jQuery("#fileBrowser").dialog({
title: "File browser",
modal: true,
autoOpen: false,
height: 700,
width: 800,
open: function() {
jQuery("#fileBrowser").load("../wp-content/plugins/wp-filebrowser/fileBrowser.php", function() {
// Clear input / feedback text when entering new folder name
jQuery('#newDirDialog input[type=text]').focus(function() {
jQuery(this).val('');
jQuery('.newDirFedback').fadeOut(function(){ jQuery(this).empty(); });
});
// Initialize create new dir dialog window
jQuery("#newDirDialog").dialog({
autoOpen: false, modal: true, title: "New dir"
});
});
}
}
);
//Open dialog box on click from WP admin
jQuery('.addImage').click(function() {
imageUrlInputBox = jQuery(this).siblings(":text");
imagePreviewLink = jQuery(this).siblings("a");
jQuery("#fileBrowser").dialog("open");
});