?
Solved

WordPress Meta Box Toggle and Drag and Drop Script not loaded

Posted on 2011-10-26
29
Medium Priority
?
1,208 Views
Last Modified: 2012-05-12
@ https://github.com/jasperf/Imagine-/blob/master/functions/seo-central.php I am working on adding meta boxes to a sub page of an admin section of a theme. The entire theme is in that Git branch. I am having several issues, but the issue I need worked out is an issue with jQuery. The scripts needed for drag and drop, that are loaded on main admin page, are not running in the seo central page. Drag and drop does not work. How can this be fixed?
0
Comment
Question by:rhandalthor
  • 13
  • 10
  • 6
29 Comments
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 37029989
I don't seem to be able to recreate the issue. Whee is the problem occurring? It works on the Imagine and the SEO Options pages, but the third is a blank page (test sub-level two)
0
 

Author Comment

by:rhandalthor
ID: 37030003
Can you trag and drop the boxes on the seo options page? I cannot. Neither can I open and close them using toggle
0
 
LVL 10

Expert Comment

by:effx
ID: 37030029
You will need to include the utils library in your functions.php just to make sure you have the required libraries, other users may have a plugin that alreay enables this and thats why it would be working.

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

I would also call it at the "admin_init" point in the queue.
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

Author Comment

by:rhandalthor
ID: 37030127
@ effx I do load several utils in img-options and seo options is included there. Why does that not work? And second, how can I queue them on seo options? With something like:
<?php
function my_scripts_method() {
    wp_enqueue_script('scriptaculous');            
}    
 
add_action('wp_enqueue_scripts', 'my_scripts_method'); // For use on the Front end (ie. Theme)
?>

Open in new window

?
0
 
LVL 10

Assisted Solution

by:effx
effx earned 1560 total points
ID: 37030154
Something like this should work:
<?php
function my_admin_scripts_method() {
    wp_enqueue_script('scriptaculous');            
}    
 
add_action('admin_init', 'my_admin_scripts_method'); // For use on the admin pages
?>

Open in new window

0
 

Author Comment

by:rhandalthor
ID: 37030230
Added
//ensure, that the needed javascripts been loaded to allow drag/drop, expand/collapse and hide/show of boxes
function my_scripts_method() {
		wp_enqueue_script('common');
		wp_enqueue_script('wp-lists');
		wp_enqueue_script('postbox');
		}
		add_action('wp_enqueue_scripts', 'my_scripts_method');

Open in new window

NB Not added to Git yet as I have problems loading my branch
I tested it locally and with this added action the drag and drag and toggle features are not working yet
0
 

Author Comment

by:rhandalthor
ID: 37030238
Added admin_init:
//ensure, that the needed javascripts been loaded to allow drag/drop, expand/collapse and hide/show of boxes
function my_scripts_method() {
		wp_enqueue_script('common');
		wp_enqueue_script('wp-lists');
		wp_enqueue_script('postbox');
		}
		add_action('admin_init', 'wp_enqueue_scripts', 'my_scripts_method');

Open in new window


No luck yet..
0
 

Author Comment

by:rhandalthor
ID: 37030249
Tried
//ensure, that the needed javascripts been loaded to allow drag/drop, expand/collapse and hide/show of boxes
function my_scripts_method() {
            wp_enqueue_script('common');
            wp_enqueue_script('wp-lists');
            wp_enqueue_script('postbox');
            }
            add_action('admin_init',  'my_scripts_method');

No luck either....
0
 
LVL 10

Assisted Solution

by:effx
effx earned 1560 total points
ID: 37030256
Those scripts are not registered in the default installation of WP please use:

wp_enqueue_script('jquery'); // For jQuery Usage

I assumed that you had written your own darg and drop options using scriptaculous
0
 

Author Comment

by:rhandalthor
ID: 37030349
I want to use the built in drag and drop as used by WordPress Dashboard widgets. This works on img-options loading those same scripts I was trying to use. There the same scripts are loaded and used. WordPress already loads jQuery as far as I know.
0
 
LVL 10

Assisted Solution

by:effx
effx earned 1560 total points
ID: 37031744
Usually the admin pages do not load jQuery unless told to do so. Telling your installation to load jQuery will not kill your theme/plugin.

You may need to load these aswell:

jquery-ui-draggable
jquery-ui-droppable

like:

wp_enqueue_script('jquery-ui-draggable');
wp_enqueue_script('jquery-ui-droppable');

But dont forget to load these in the admin_init

to makesure your theme/plugin is loading the libraries you will need to view the source code of the admin page you are requesting.
0
 

Author Comment

by:rhandalthor
ID: 37035644
Do have
//ensure, that the needed javascripts been loaded to allow drag/drop, expand/collapse and hide/show of boxes
function my_scripts_method() {
            wp_enqueue_script('jquery'); // For jQuery Usage
            wp_enqueue_script('common');
            wp_enqueue_script('wp-lists');
            wp_enqueue_script('postbox');
            wp_enqueue_script('jquery-ui-draggable');
            wp_enqueue_script('jquery-ui-droppable');
            }
            add_action('admin_init',  'my_scripts_method');

now. Jquery is loaded in the head. I saw that in the source code. Drag and drop still does not work. admin_init is inside the add_action. But I think you mean something else perhaps?
0
 

Author Comment

by:rhandalthor
ID: 37038758
Anyone any ideas what is still missing to make drag and drop and toggle work?
0
 
LVL 10

Assisted Solution

by:effx
effx earned 1560 total points
ID: 37040250
I have downloaded your entire theme and used it, you need to fix all the JS errors before trying to provide additional options

Line 69 on "seo-central.php" is causing errors
0
 
LVL 10

Accepted Solution

by:
effx earned 1560 total points
ID: 37040428
seo-central.php:
<?php
/*
*Plugin: SEO Central
*Inspiration http://andrewferguson.net/2008/09/26/using-add_meta_box/
*/

//ensure, that the needed javascripts been loaded to allow drag/drop, expand/collapse and hide/show of boxes
//function my_scripts_method() {
//		wp_enqueue_script('common');
//		wp_enqueue_script('wp-lists');
//		wp_enqueue_script('postbox');
//		print "Loaded";
//}
//add_action('init',  'my_scripts_method');
//add_meta_box( $id, $title, $callback, $page, $context, $priority, $callback_args );
global $screen_layout_columns;

add_meta_box('seo-sidebox-zero', //Id
			__('Say Hello', 'seocentral'), //Title
			 array(&$this, 'on_seo_sidebox_3_content'), // Callback to method in img-options
			'seocentral', // Page
			'normal',
			'core');
add_meta_box('seo-sidebox-1', //Id
			__('Say Hello', 'seocentral'), //Title
			 array(&$this, 'on_seo_sidebox_1_content'), // Callback to method in img-options
			'seocentral', // Page
			'side',
			'core');
add_meta_box('seo-sidebox-2', //Id
			__('Say dfa', 'seocentral'), //Title
			array(&$this, 'on_seo_sidebox_2_content'), //callback
			'seocentral', //page
			'side', //context
			'core'); // Piority: low, high, core or default
//do_meta_boxes('page', 'context', 'object') ?>
<div id="howto-metaboxes-general" class="wrap">
  <h2>SEO Options</h2>
  <form action="admin-post.php" method="post">
  <div id="poststuff" class="metabox-holder<?php echo 2 == $screen_layout_columns ? ' has-right-sidebar' : ''; ?>">
    <div id="side-info-column" class="inner-sidebar">
<?php
do_meta_boxes('seocentral', // page or name box as defined
'normal', //context side
null); // object??
?>
    </div>
    <div id="post-body" class="has-sidebar">
      <div id="post-body-content" class="has-sidebar-content">
<?php
do_meta_boxes('seocentral', // page
'side', //context
null); // object??
?>
      </div>
    </div>
	<br class="clear"/>
  </div>
  </form>
</div>
			<script type="text/javascript">
				//<![CDATA[
				jQuery(document).ready( function($) {
					// close postboxes that should be closed
					$('.if-js-closed').removeClass('if-js-closed').addClass('closed');
					// postboxes setup
			postboxes.add_postbox_toggles('<?php echo $this->pagehook; ?>');
				});
				//]]>
			</script>

Open in new window

0
 
LVL 10

Assisted Solution

by:effx
effx earned 1560 total points
ID: 37040433
Add the following lines below "$my_imagine_options = new imagine_options();" on page "img-options.php":
wp_enqueue_script('common');
wp_enqueue_script('wp-lists');
wp_enqueue_script('postbox');

Open in new window

0
 
LVL 10

Expert Comment

by:effx
ID: 37040471
Tested and working:

http://screencast.com/t/f1WehVAH7
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 37040538
I've notice a lot of advice for enqueue_script, but there all instructing you to do it the wrong way. When adding script to the front end in WordPress you need to use if(!is_admin()) to ensure it doesn't interfere with the back-end scripts. Here is an example on how to enqueue the built in thickbox that is bundled with WordPress:
<?php
function thickbox_add_themescript(){
  if(!is_admin()){
    wp_enqueue_script('thickbox',null,array('jquery'));
    wp_enqueue_style('thickbox.css', '/'.WPINC.'/js/thickbox/thickbox.css', null, '1.0');
    }
  }
add_action('init','thickbox_add_themescript'); ?>

Open in new window


Notice the init, this ensures that it loads on time and not too late. You can just substitiue the thickbox with your needed script.

You need to make sure to add it in a functions. Be sure that the function has a unique name so not to conflict with any plugins or other scripts you may be using or may use in the future. The last step is to create or activate the action via the add_action init.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 37040565
On a side note and in addition to effx:'s advice, you should probably disable your plug-ins to be sure the results aren't cause by a bad plug-in. Once you have it working then you can diagnose rogue plugin scripts.
0
 
LVL 23

Assisted Solution

by:jeremyjared74
jeremyjared74 earned 440 total points
ID: 37040595
I re-read all posts. I originally thought you wanted the scripts on the back-ind only. After reading your comment I thought you wanted to use them on the front-end of the site.

It appears you want them on the back-end only right?

If so I was able to drag and expand/close the panels when I installed the theme. Maybe you should go back to what you had and dis-able your plugins and see what happens. Sorry for the mix-up.
0
 
LVL 10

Expert Comment

by:effx
ID: 37040658
My fixes above will fix your issue.
0
 

Author Comment

by:rhandalthor
ID: 37042650
Going through it all now. Thanks a billion in advance! Will post back in a bit..
0
 

Author Comment

by:rhandalthor
ID: 37042703
@ effx With the scripts queued after the class imagine_options() is loaded seems to work. What I do not understand is why I could not add this on the SEO options page. Why is that? Perhaps I should create a separate class for seo options and load it at the end of class imagine_options()?
0
 

Author Comment

by:rhandalthor
ID: 37042708
Just wanted to organize the code for SEO and General Options better by separating the two...
0
 
LVL 23

Assisted Solution

by:jeremyjared74
jeremyjared74 earned 440 total points
ID: 37043129
If you organize the options page code it will create additional Database tables which will result in clutter and unnecessary quarries. The WordPress options pages are a little hard to grasp at first. They don't actually exist, they are pretty much "Virtual Pages". The only actual data lives on your server. The admin pages don't have a file like page.php, index.php etc... I am picky when it comes to code, but I've had to accept the WordPress options pages for what they are. In case you didn't read my previous comments, I was able to drag and drop and close expand the panel in the SEO and General Options pages. That is why I think it could have been a plugin causing your issues.
0
 
LVL 10

Assisted Solution

by:effx
effx earned 1560 total points
ID: 37043184
it's got nothing to do with other plugins, start with the basics, only one plugin installed, the one in question, find out why it ain't working and get it fixed, which is what I did.

The reason the scripts didn't load in the seo page was because it was too late in the action sequence this the load scripts function didn't even get executed, by placin the enqueue scripts where I did this ensures the scripts are loaded in a timely fashion for all your sub pages
0
 

Author Comment

by:rhandalthor
ID: 37043286
@ jeremyjared74 Thanks for the explanation on admin pages. Would you normally recommend all admin sub pages to be added to the main admin page? What do you mean by the addtional tables created? I will add met boxes there where I need to add meta data and the tables to store that data already exist.
@ effx Thanks for the explanation. All clear. Now I will be moving on to other issues such as creating the proper meta boxes, making sure data is stored and fix the two column issue.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 37043418
Basically the Admin pages are created using using options. Each option would normally need a table to store it's data in your database. When it's done correctly you can create one Options table and make the additional settings an array of the option table created during the admin_init (when WordPress fires up at log-in).

The performance issue is important but it pales in comparison to the possibilities of adding an exploit via a theme options panel. If the data that is entered into the DB to create the options, or if the options that get created don't sanitize the the input it can cause total disaster on your entire site and server.

I've learned quite a bit over the past few months. The main thing I've learned is to use the WordPress API when creating the pages.; It does a few things for you. Your site will be safer, you will have less code and smaller DB, and you will be less prone to issues when WordPress updates. If you want to learn about theme options I'm probably not the best to teach you since I'm still learning my self. I can however share with you the source I use. Chip Bennett is one of the Top Contributors to the WordPress Core. He specializes in data sanitation, and is currently head of the WordPress Repository Theme Review Team (He recently reviewed his 1,000 them). Here is the link:
Chip Bennett Incorporation the Settings API in WordPress

He also has a theme that you can download if you prefer looking at the code, but I suggest trying to make it though his tutorial.

I hope that helps, let me know if you have any other questions.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
While Plesk offers many potential benefits to website administrators, including compatibility with Windows Server and other leading technologies, the company has also been working to differentiate it from other control panels for content management…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses
Course of the Month16 days, 1 hour left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question