Hall of Famer Posted December 14, 2011 Share Posted December 14, 2011 Well I see a tutorial of Ajax tabs system, but it uses html code to display the tab instead of php. Therefore, I made a tiny bit of changes, but got this weird T_STRING error on line111, where $text is defined. Here is the script I currently have: <style type="text/css"> body { font-family: Arial; font-size: 12px; } .container { float: left; width: 400px; border: 1px solid #000000; } .navcontainer ul { background-color: #5F707A; border-bottom:1px solid #DFDFDF; border-top:1px solid #DFDFDF; float:left; font-family:arial,helvetica,sans-serif; font-size:12px; margin:0pt; padding:0pt; width:100%; } .navcontainer ul li { display: inline; text-align: center; } .navcontainer ul li a:hover { background-color:#CCCCCC; color:#FFFFFF; } .navcontainer ul li a { border-right:1px solid #DFDFDF; background-color: #BBBBBB; font-weight: bold; color:#FFFFFF; float:left; padding:10px; text-decoration:none; width: 50px; } .navcontainer ul li a.current { border-right:1px solid #f00; background-color: #f00; font-weight: bold; color:#fff; float:left; padding:10px; text-decoration:none; width: 50px; } #tabcontent { min-height: 200px; padding-top: 80px; padding-left: 10px; } #preloader { position: absolute; top: 150px; left: 100px; z-index: 100; padding: 5px; text-align: center; background-color: #FFFFFF; border: 1px solid #000000; } </style> <script type="text/javascript" src="jquery-1.2.3.pack.js"></script> <script type="text/javascript"> function loadTabContent(tabUrl){ $("#preloader").show(); jQuery.ajax({ url: tabUrl, cache: false, success: function(message) { jQuery("#tabcontent").empty().append(message); $("#preloader").hide(); } }); } jQuery(document).ready(function(){ $("#preloader").hide(); jQuery("[id^=tab]").click(function(){ // get tab id and tab url tabId = $(this).attr("id"); tabUrl = jQuery("#"+tabId).attr("href"); jQuery("[id^=tab]").removeClass("current"); jQuery("#"+tabId).addClass("current"); // load tab content loadTabContent(tabUrl); return false; }); }); </script> <?php $text="<div class="container"> <div class="navcontainer"> <ul> <li><a id="tab1" href="tabs.php?id=1">Google</a></li> <li><a id="tab2" href="tabs.php?id=2">Yahoo</a></li> <li><a id="tab3" href="tabs.php?id=3">Hotmail</a></li> <li><a id="tab4" href="tabs.php?id=4">Twitter</a></li> </ul> </div> <div id="preloader"> <img src="loading.gif" align="absmiddle"> Loading... </div> <div id="tabcontent"> Simple AJAX Tabs </div> </div>"; echo $text; ?> Can anyone of you please tell me how to fix this problem? Thanks. Quote Link to comment Share on other sites More sharing options...
QuickOldCar Posted December 14, 2011 Share Posted December 14, 2011 Your entire php block, from <?php to ?> needs to be properly echoed, escaping all quotes. but I see no need, as the only php code i see there is the $text variable is this the tutorial? http://blog.chapagain.com.np/simple-and-easy-jquery-tabs-with-ajax-and-php/ I downloaded the source, tested it and works just fine. Quote Link to comment Share on other sites More sharing options...
QuickOldCar Posted December 14, 2011 Share Posted December 14, 2011 In that code, there is a tabs.php file this would be the area where you insert any new data you would want displayed there <?php $p = $_GET['id']; switch($p) { case "1": echo '<h2>Google</h2>Content goes here !<br style="clear:both;" />'; break; case "2": echo 'Yahoo content ?<br style="clear:both;" />'; break; case "3": echo 'My hotmail content goes here...<br style="clear:both;" />'; break; case "4": default: echo 'Twitter status update <br style="clear:both;" />'; break; } ?> Quote Link to comment Share on other sites More sharing options...
Drummin Posted December 14, 2011 Share Posted December 14, 2011 <?php $text="<div class=\"container\"> <div class=\"navcontainer\"> <ul> <li><a id=\"tab1\" href=\"tabs.php?id=1\">Google</a></li> <li><a id=\"tab2\" href=\"tabs.php?id=2\">Yahoo</a></li> <li><a id=\"tab3\" href=\"tabs.php?id=3\">Hotmail</a></li> <li><a id=\"tab4\" href=\"tabs.php?id=4\">Twitter</a></li> </ul> </div> <div id=\"preloader\"> <img src=\"loading.gif\" align=\"absmiddle\"> Loading... </div> <div id=\"tabcontent\"> Simple AJAX Tabs </div> </div>"; echo $text; ?> Quote Link to comment Share on other sites More sharing options...
Hall of Famer Posted December 14, 2011 Author Share Posted December 14, 2011 In that code, there is a tabs.php file this would be the area where you insert any new data you would want displayed there <?php $p = $_GET['id']; switch($p) { case "1": echo '<h2>Google</h2>Content goes here !<br style="clear:both;" />'; break; case "2": echo 'Yahoo content ?<br style="clear:both;" />'; break; case "3": echo 'My hotmail content goes here...<br style="clear:both;" />'; break; case "4": default: echo 'Twitter status update <br style="clear:both;" />'; break; } ?> Well this I know of, but I cannot use simple html in my script files since these html codes will completely mess up the template design. Quote Link to comment Share on other sites More sharing options...
Hall of Famer Posted December 14, 2011 Author Share Posted December 14, 2011 <?php $text="<div class=\"container\"> <div class=\"navcontainer\"> <ul> <li><a id=\"tab1\" href=\"tabs.php?id=1\">Google</a></li> <li><a id=\"tab2\" href=\"tabs.php?id=2\">Yahoo</a></li> <li><a id=\"tab3\" href=\"tabs.php?id=3\">Hotmail</a></li> <li><a id=\"tab4\" href=\"tabs.php?id=4\">Twitter</a></li> </ul> </div> <div id=\"preloader\"> <img src=\"loading.gif\" align=\"absmiddle\"> Loading... </div> <div id=\"tabcontent\"> Simple AJAX Tabs </div> </div>"; echo $text; ?> This works, thank you so much. I also planned to use a php class to define ajax tabs, which can be easily called in a php script file. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.