Databases
StackOverflow2013
Postsdbo
POUsing custom jquery in page template
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POUsing custom jquery in page template
    text
    copied!<p>I made custom page template Which displays all the subpages of the 1st level pages in tabs with nested accordions with second level subpages. Here is my page : <a href="http://avgustin.dn.ua/en/menu/" rel="nofollow noreferrer">http://avgustin.dn.ua/en/menu/</a></p> <p>Because of this problem - <a href="https://stackoverflow.com/questions/1542161/jquery-ui-accordions-within-tabs">jquery ui accordions within tabs</a> I can't use plugin JQuery UI because it initialize tabs before accordions by default. So I add jquery manualy like so (I edit that like in folowing advice in function.php):</p> <pre><code> function my_enqueue_jquery_ui() { wp_enqueue_script( 'jquery-ui-1.8.2', '/wp-content/themes/papyrus/js/jquery-1.8.2.js', '1.8.2', array( 'jquery' ) ); } function my_enqueue_jquery_ui2() { wp_enqueue_script( 'jquery-ui-1.9.1.custom', '/wp-content/themes/papyrus/js/jquery-ui-1.9.1.custom.js', '1.9.1', array( 'jquery' ) ); } add_action('wp_enqueue_scripts', 'my_enqueue_jquery_ui'); add_action('wp_enqueue_scripts', 'my_enqueue_jquery_ui2'); </code></pre> <p>and than initialize accordions before tabs </p> <pre><code>jQuery(document).ready(function($) { &lt;?php foreach( $mypages as $page ) { $content = $page-&gt;post_content; if ( ! $content ) // Check for empty page continue;?&gt; $("#accordion&lt;?php echo $page-&gt;ID ?&gt;").accordion({collapsible: true, active: -10 }); &lt;?php } ?&gt; $("#tabs").tabs(); }); </code></pre> <p>Everything works fine until I activate any plugin that uses jquery, for example flash gallery. How can I add custom jquery support to page template in the rigth way. Is it real to make universal working page template with jquery, that can be used whith any template without modifications? Help me please! Here is the complete code</p> <pre><code>&lt;?php /* Template Name: Menu_page */ ?&gt;&lt;?php get_header(); ?&gt; &lt;div id="content"&gt; &lt;div class="entry"/&gt; &lt;?php if (have_posts()) : while (have_posts()) : the_post(); ?&gt; &lt;div class="post" id="post-&lt;?php the_ID(); ?&gt;"&gt; &lt;h2&gt;&lt;?php the_title(); ?&gt;&lt;/h2&gt; &lt;div class="post-content"&gt; &lt;?php $mypages = get_pages( array( 'child_of' =&gt; $post-&gt;ID, 'sort_column' =&gt; 'post_date', 'sort_order' =&gt; 'desc', 'parent' =&gt; $post-&gt;ID) );?&gt; &lt;div id="tabs"&gt; &lt;ul&gt; &lt;?php foreach( $mypages as $page ) { $content = $page-&gt;post_content; if ( ! $content ) // Check for empty page continue; $content = apply_filters( 'the_content', $content ); ?&gt; &lt;li&gt;&lt;a href="#tab&lt;?php echo $page-&gt;ID ?&gt;"&gt;&lt;?php echo $page-&gt;post_title; ?&gt;&lt;/a&gt;&lt;/li&gt; &lt;?php }?&gt; &lt;/ul&gt; &lt;?php foreach( $mypages as $page ) { $content = $page-&gt;post_content; if ( ! $content ) // Check for empty page continue; $content = apply_filters( 'the_content', $content ); ?&gt; &lt;div id="tab&lt;?php echo $page-&gt;ID ?&gt;"&gt; &lt;?php echo $content;?&gt; &lt;div id="accordion&lt;?php echo $page-&gt;ID ?&gt;"&gt; &lt;?php $mypages2 = get_pages( array( 'child_of' =&gt; $page-&gt;ID, 'sort_column' =&gt; 'menu_order', 'sort_order' =&gt; 'asc', 'parent' =&gt; $page-&gt;ID) ); foreach( $mypages2 as $page2 ) { $content2 = $page2-&gt;post_content; if ( ! $content2 ) // Check for empty page continue; $content2 = apply_filters( 'the_content', $content2 );?&gt; &lt;h3&gt;&lt;a href="#"&gt;&lt;?php echo $page2-&gt;post_title; ?&gt;&lt;/a&gt;&lt;/h3&gt; &lt;div&gt; &lt;?php echo $content2;?&gt; &lt;/div&gt; &lt;?php }?&gt; &lt;/div&gt; &lt;/div&gt; &lt;?php }?&gt;&lt;/div&gt; &lt;script&gt; jQuery(document).ready(function($) { &lt;?php foreach( $mypages as $page ) { $content = $page-&gt;post_content; if ( ! $content ) // Check for empty page continue;?&gt; $("#accordion&lt;?php echo $page-&gt;ID ?&gt;").accordion({collapsible: true, active: -10 }); &lt;?php } ?&gt; $("#tabs").tabs(); }); &lt;/script&gt; &lt;?php the_content('&lt;p class="serif"&gt;Читать полностью &amp;raquo;&lt;/p&gt;'); ?&gt; &lt;?php link_pages('&lt;p&gt;&lt;strong&gt;Страницы:&lt;/strong&gt; ', '&lt;/p&gt;', 'number'); ?&gt; &lt;/div&gt; &lt;/div&gt; &lt;?php endwhile; endif; ?&gt; &lt;/div&gt; &lt;/div&gt;&lt;!--/content --&gt; &lt;?php get_sidebar(); ?&gt; &lt;?php get_footer(); ?&gt; </code></pre> <p>When I activate other plugin (flash galery) in source code in chrome I see:</p> <pre><code>&lt;script type='text/javascript' src='http://avgustin.dn.ua/wp-includes/js/jquery/jquery.js?ver=1.7.2'&gt;&lt;/script&gt; </code></pre> <p>after my lines with jquery initialize. And so my jquery does not work :(</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload