Issues using dhtmlxTabbar to display WordPress content

Suite and Optimus Suite 5
#1

In the page
…

... 
  <div id="a_tabbar" style="width:500px; height:450px;"/>
    <script>
   
    var tabbar;
    function doOnLoad() {
            tabbar = new dhtmlXTabBar("a_tabbar", "top");
            tabbar.setSkin('dhx_skyblue');
            tabbar.setImagePath("<?php echo bloginfo('stylesheet_directory').'/js/imgs/';?>");
            tabbar.addTab("a1", "Content", "100px");
            tabbar.addTab("a2", "Transcript", "100px");
            tabbar.addTab("a2", "Excerpt", "100px");
            tabbar.showInnerScroll();
            tabbar.setHrefMode("ajax-html");
           
            tabbar.setContentHTML("a1", '<?php echo addslashes(str_replace("  ", " ", ereg_replace("/\n\r|\r\n|\n|\r|\xe2|\x88|\x9e/", " ", the_content())))?>');
            tabbar.setContentHTML("a2", '<?php echo addslashes(str_replace("  ", " ", ereg_replace("/\n\r|\r\n|\n|\r|\xe2|\x88|\x9e/", " ", get_post_meta($post->ID, "transcript", true)))); ?>');
            tabbar.setContentHTML("a3", '<?php echo addslashes(str_replace("  ", " ", ereg_replace("/\n\r|\r\n|\n|\r|\xe2|\x88|\x9e/", " ", the_excerpt())))?>');
            tabbar.setTabActive("a2");

        }
    </script>   
  </div>

This results (viewing page source) in nothing being shown for the Content in the a1 tab and a CRLF immediately following the

tag in the a3 tab:

  <div id="a_tabbar" style="width:500px; height:450px;"/>
    <script>
    
    var tabbar;
    function doOnLoad() {
            tabbar = new dhtmlXTabBar("a_tabbar", "top");
            tabbar.setSkin('dhx_skyblue');
            tabbar.setImagePath("http://127.0.0.1/mublogs/wp-content/themes/qute/js/imgs/");
            tabbar.addTab("a1", "Content", "100px");
            tabbar.addTab("a2", "Transcript", "100px");
            tabbar.addTab("a3", "Excerpt", "100px");
            tabbar.showInnerScroll();
            tabbar.setHrefMode("ajax-html");
            
            tabbar.setContentHTML("a1", '');
            tabbar.setContentHTML("a2", 'This is the recorded interview with <b>Prof Little</b>. Any text in here <will> have to be & raw html as there is no WYSIWYG editor\'s associated with with custom field text boxes.');
            tabbar.setContentHTML("a3", '<p>He is a Barrister at Law and holds a Bachelor of Laws, Master of Laws and a PhD.</p>

');
tabbar.setTabActive(“a2”);

        }
    </script>	
  </div>

After capturing the page source, using an editor to remove the CRLF and saving the page as html results in the expected output when viewed in the browser.

As for the missing the_content - this may be my lack of understanding of how this WordPress function works.

wp_content.jpg857×54 18.3 KB

#2

setContentHTML method requires the correct JavaScript string as the 2nd attribute. So, you need to format the data before they are passed to the function.

#3

Okay, so how is that done?

Looking at the examples (docs.dhtmlx.com/doku.php?id=dhtm … nt_loading) it would appear that you can load static data (viz: tabbar.setContentHTML(“a1”,“Some static text here”):wink: or from a url (tabbar.setContentHref(“a2”,“http://some.url/here”);).

In both cases the second parameter is a literal string.

What I find curious is that I was able to load the “a2 - Transcript” content dynamically but when I try the same method on the other two tabs with data from different fields in the table it fails and breaks the Tabbar.

This works:
tabbar.setContentHTML(“a3”, “<?php echo 'Fred' ?>”);

This doesn’t:

<?php $excerpt = addslashes(str_replace(" ", " ", ereg_replace("/\n\r|\r\n|\n|\r|\xe2|\x88|\x9e/", " ", the_excerpt()))); ?> 
  <div id="a_tabbar" style="width:500px; height:450px;"/>

…
tabbar.setContentHTML(“a3”, “<?php echo $excerpt ?>”);

What is the optimal or most efficient way to load dynamic content (or load content dynamically) into the tab bar?

What is the best example for this if you are using a CMS - Joomla, Drupal, WordPress …

#4

Trying something different: XML load

There were two variations of the following. The current variant is the one that is working (but it’s a real hack)

  <div id="a_tabbar" style="width:500px; height:450px;">
    <script>
  		tabbar = new dhtmlXTabBar("a_tabbar", "top");
  		tabbar.setSkin('dhx_skyblue');
  		tabbar.setImagePath("<?php echo bloginfo('stylesheet_directory').'/js/imgs/';?>");
  		tabbar.loadXML("<?php echo bloginfo('stylesheet_directory')?>/get_xml.php?pid=" + <?php echo $post->ID?>);
    </script>	
  </div>

The get_xml looks like this:

$link = mysql_pconnect($mysql_host, $mysql_user, $mysql_pasw);
$db = mysql_select_db ($mysql_db);

$div1 = ‘

’;
$div2 = ‘
’; 
	$sql = "SELECT * FROM wp_1_posts where id=". $pid;
	$res = mysql_query ($sql);
	$row = mysql_fetch_array($res);
	$pcontent = $row[4];

	$sql = "SELECT * FROM wp_1_postmeta where post_id=". $pid . " AND meta_key='transcript'";
	$res = mysql_query ($sql);
	$row = mysql_fetch_array($res);
	$pmeta = $row[3];

//include XML Header (as response will be in xml format)
if ( stristr($_SERVER[“HTTP_ACCEPT”],“application/xhtml+xml”) ) {
header(“Content-type: application/xhtml+xml”); } else {
header(“Content-type: text/xml”);
}
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");

print('<tabbar><row>');
print('<tab id="a1" width=' . "'100px'" . ' selected="1">Biography');
print("<content><![CDATA[" . $div1.$div2 . $pcontent . "</div></div>]]></content>");
print("</tab>");
print('<tab id="a2" width=' . "'100px'" . '>Transcript');
print("<content><![CDATA[" . $div1.$div2. $pmeta . "</div></div>]]></content>");
print("</tab>");
print("</row></tabbar>");

?>

As you would appreciate, the database calls are a bit of a kludge - would be much better if I could use WP’s inbuilt objects and methods. However, if I try and use something like the inbuilt:

$mylink = $wpdb->get_row(“SELECT * FROM $wpdb->links WHERE link_id = 10”);

It returns an XML error.

Likewise, when I tried (my earlier incantation of the solution) to fetch the XML using a function

tabbar.loadXML("<?php qute_tabbar()?>");

function qute_tabbar(){
$div1 = ‘

’;
$div2 = ‘
’;

//include XML Header (as response will be in xml format)
if ( stristr($_SERVER[“HTTP_ACCEPT”],“application/xhtml+xml”) ) {
header(“Content-type: application/xhtml+xml”); } else {
header(“Content-type: text/xml”);
}
echo("<?xml version=\"1.0\" encoding=\"iso-8859-1\"?>\n");

print('<tabbar><row>');
print('<tab id="a1" width=' . "'100px'" . ' selected="1">Biography');
print("<content><![CDATA[" . $div1.$div2. the_content() ."</div></div>]]></content>");
print("</tab>");
print('<tab id="a2" width=' . "'100px'" . '>Transcript');
print("<content><![CDATA[" . $div1.$div2. get_post_meta($post->ID, "transcript", true) . "</div></div>]]></content>");
print("</tab>");
print("</row></tabbar>");

}

How is it possible to debug such code so I can get an I dea of what I may be wrong?