Forums

ChronoForms v8 is now WordPress ready, ChronoMails is out

The JED needs volunteers!

looking at the mechanics behind chronoconnect page

Mi
Mizpah 25 Sep, 2009
Heya Folks,

As usual a tough one to explain but I will do my best!

Firstly this is not a chrono issue - it works! But to fix my issue I have I need to understand 'how' its working more closely!

I have a chronoconnect page (a 'data view' in connection manager) , which loads a detailed view of a selected record set (this part works). It does this via a value in the url of the link that loads it. The view in question contains this (simple) code in the 'where' box.


<?php
$car_id = JRequest::getString('car_id', '', 'get');
?>
WHERE cf_id = <?php echo $car_id; ?>


Now, rather than trying to load this page normally (which as stated works), I am trying to load it into rokbox - a popup module that display it elegantly without the user changing pages - a module that I am using elsewhere on the site with great results.

However rokbox allows me to load only content within a specified div, so I dont duplicate menus, sidecolumns etc. this syntax is specified in the link itself.

now heres my issue 😈

my dataview here will (by defination) only ever return one result. So I want to encapsulate the output of the header, body and footer box in a div, and load it into rokbox.

If I load the entire page (as if it were an external site - no div peramater) it works, but as I duplicate the header, the side menu and other elements not a solution!

If I place a div (<div id="cardetails>) at the top of the header box, and close it at the bottom of the footer box, its as if the query is not being run, no output and a blank result.

When I look at the template, I can see there is a div called 'maincol' that on the output when I view source seems to encapsulate everything 'chronoform'. However when I specify this div, its as if the where statement is ignored - it returns the main body area as many times as there are records!

essentially the source of the page is somthing like.

<body>
<div id="menu">
(mainmenu)
</div>
<div id="sidecol">
(side column modules and menu)
</div>
<div id="maincol">
<div id="cardetails">
(headerbox)
(bodybox)
(footerbox)
</div>
</div>
</body>

So after all that - how can I specify the part of the output I want displayed, and still have the where statement run, without including the top menu, sidemenu etc etc ?!

Cheers

/Miz
Gr
GreyHead 25 Sep, 2009
Hi Miz,

First off, if there is only a single record being displayed then I would always use a *ChronoForm* instead of ChronoConnectivity! It's much more flexible and quicker to configure.

You cna use the same 'where' plus the db code in the Form HTML. (You could probably also use one of the Extra Code boxes and avoid the Form processign compeletely).

That said, I know of no reason why the wrapping div would stop ChronoConnectivity working. I see there is a typo (a missing quoe) in the div you posted - if that is also in the ChronoConnectivity it would break it.

Bob
Mi
Mizpah 25 Sep, 2009
Heya Grey,

I see you are on early morning patrol! Just in case its relevent heres the source of the page in question;

As stated if I output the 'maincol' div my where statement is ignored (multiple records returned), if I output the 'cardetails' div theres no responce.

heres the link: http://dev.carsavingexpert.com/index.php?option=com_chronoconnectivity&connectionname=single_car&car_id=4 (note this is the link the rokbox syntax produces, not what it looks like)



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
	<head>
		  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="robots" content="index, follow" />
  <meta name="keywords" content="joomla, Joomla" />
  <meta name="description" content="Joomla! - the dynamic portal engine and content management system" />
  <meta name="generator" content="Joomla! 1.5 - Open Source Content Management" />
  <title>Single Car View</title>

  <link rel="stylesheet" href="/plugins/system/rokbox/themes/light/rokbox-style.css" type="text/css" />
  <script type="text/javascript" src="/includes/js/joomla.javascript.js"></script>
  <script type="text/javascript" src="/media/system/js/mootools.js"></script>
  <script type="text/javascript" src="/plugins/system/rokbox/rokbox.js"></script>
  <script type="text/javascript" src="/plugins/system/rokbox/themes/light/rokbox-config.js"></script>
  <script type="text/javascript">
var rokboxPath = '/plugins/system/rokbox/';
  </script>

		
<link rel="shortcut icon" href="/images/favicon.ico" />
<link href="/templates/rt_akiraka_j15/css/template.css" rel="stylesheet" type="text/css" />
<link href="/templates/rt_akiraka_j15/css/typography.css" rel="stylesheet" type="text/css" />
<link href="/templates/system/css/system.css" rel="stylesheet" type="text/css" />
<link href="/templates/system/css/general.css" rel="stylesheet" type="text/css" />
<link href="/templates/rt_akiraka_j15/css/rokmoomenu.css" rel="stylesheet" type="text/css" />
<style type="text/css">
	div.wrapper { margin: 0 auto; width: 958px;padding:0;}
	#leftcol { width:200px;padding:0;}
	#rightcol { width:0px;padding:0;}
	#inset-block-left { width:0px;padding:0;}
	#inset-block-right { width:0px;padding:0;}
	#maincontent-block { margin-right:0px;margin-left:0px;padding:0;}
			#footer { position: fixed;bottom: 0;width: 100%;}
		#header-main, #searchmod .inputbox {background-color: #121212;}
	#section1 {background: #86140a;}
	#section2 {background: #232b00;}
	#bottom-bar {background: #000000;}
	#bottom-section {background: #191919;}
	body, #footer {background: #262626;}
	.line1, .logo-desc, #roksearch_results a {color: #cc0000;}
	.featured-image {background: #cc0000;}
	.article-image {background: #afc78c;}
	.article-image .line1 {color: #afc78c;}
	.rokbox-images img {border: 3px solid #afc78c;}
	body, #horiz-menu a, #horiz-menu .separator, .logo-module, #top-bar {color: #cccccc;}
	#top-bar a, .logo-module a {color: #ffffff;}
	#section1 {color: #ffffff;}
	#section1 a, #section1 h3, #section1 ul.menu li a, #section1 ul.menu li .separator, #section1 ul.menu li.active li a, #section1 ul.menu li.active li .separator, #section1 ul.menu li.active li.active li a, #section1 ul.menu li.active li.active li .separator span {color: #ff9b01;}
	.front-showcase-desc em {background: #ff9b01;color: #000000;}
	#section2 h3 span, .contentheading,h4 {color: #ff9b01;}
	#section2, .roktabs-wrapper .dark .roktabs-links ul li, #section2 ul.menu li a, #section2 ul.menu li .separator, #section2 ul.menu li.active li a, #section2 ul.menu li.active li .separator, #section2 ul.menu li.active li.active li a, #section2 ul.menu li.active li.active li .separator {color: #afc78c;}
	h4 {border-bottom: 1px solid #afc78c;}
	#section2 a, #section2 legend, form.form-login .inputbox, #section2 h3, #main-body ul.menu li.active a, #main-body ul.menu li.active a:hover, #main-body ul.menu li.active .separator, #main-body ul.menu li.active .separator:hover, #main-body ul.menu li.active li.active a, #main-body ul.menu li.active li.active .separator, #main-body ul.menu li.active li.active li.active a, #main-body ul.menu li.active li.active li.active .separator, #main-body ul.menu li a:hover, #main-body ul.menu li .separator:hover, .roktabs-wrapper .dark .roktabs-links ul li.hover, .roktabs-wrapper .dark .roktabs-links ul.roktabs-top li.active, .roktabs-wrapper .dark .roktabs-links ul.roktabs-bottom li.active, span.number, span.inset-left, span.inset-right, span.dropcap, span.important-title, span.important-title-blue, span.important-title-red, span.important-title-green, span.important-title-purple, span.important-title-orange, span.important-title-brown, span.important-title-grey {color: #ffffff;}
	#bottom-bar {color: #666666;}
	#bottom-bar a {color: #cccccc;}
	#bottom-section, #copyright, #bottom-section h3 span {color: #666666;}
	#bottom-section a, #bottom-section h3 {color: #cccccc;}
	#footer, #footer a#clear-cookies {color: #666666;}
	#footer a {color: #999999;}
	</style>	
<script type="text/javascript">
	window.fixedHeader = false;
	window.fixedFooter = true;
</script>
<script type="text/javascript" src="/templates/rt_akiraka_j15/js/rokutils.js"></script>
<script type="text/javascript" src="/templates/rt_akiraka_j15/js/rokfonts.js"></script>
<script type="text/javascript">
	window.addEvent('domready', function() {
		var modules = ['side-mod-surround','module','moduletable'];
		var header = "h3";
		RokBuildSpans(modules, header);
	});

</script>
<script type="text/javascript" src="/templates/rt_akiraka_j15/js/rokmoomenu.js"></script>
<script type="text/javascript" src="/templates/rt_akiraka_j15/js/mootools.bgiframe.js"></script>
<script type="text/javascript">
window.addEvent((window.webkit) ? 'load' : 'domready', function() {
	new Rokmoomenu($E('ul.menutop '), {
		bgiframe: false,
		delay: 500,
		verhor: true,
		animate: {
			props: ['height'],
			opts: {
				duration: 600,
				fps: 200,
				transition: Fx.Transitions.Sine.easeOut			}
		},
		bg: {
			enabled: true,
			overEffect: {
				duration: 500,
				transition: Fx.Transitions.Expo.easeOut			},
			outEffect: {
				duration: 600,
				transition: Fx.Transitions.Sine.easeOut			}
		},
		submenus: {
			enabled: true,
			overEffect: {
				duration: 50,
				transition: Fx.Transitions.Expo.easeOut			},
			outEffect: {
				duration: 600,
				transition: Fx.Transitions.Sine.easeIn			},
			offsets: {
				top: 0,
				right: 0,
				bottom: 0,
				left: 0			}
		}
	});
});
</script>
	</head>
	<body id="ff-akiraka" class="f-default style1 texture1 iehandle">
		<!-- Begin Main Header -->
		<div id="header-main" class="h-dark">
			<div id="header-main-texture" class="png">

				<div id="header-main2" class="png">
										<div id="top-bar" class="png">
						<div class="wrapper">
																					<div id="top-right">
																										<a href="#" id="lock-button" class="png" rel="rokbox[300 210][module=login-module]"><span>Logout</span></a>
																																	<div id="accessibility">
									<div id="buttons">
										<a href="/?option=com_chronoconnectivity&connectionname=single_car&car_id=4&fontstyle=f-larger" title="Increase Font Size" class="large"><span class="button png"> </span></a>

										<a href="/?option=com_chronoconnectivity&connectionname=single_car&car_id=4&fontstyle=f-smaller" title="Decrease Font Size" class="small"><span class="button png"> </span></a>
									</div>
									<div class="textsizer-desc">Text Size</div>
								</div>
																
							</div>
													</div>
					</div>
															<div id="header-grad-top" class="png">

						<div id="header-grad-bottom" class="png">
							<div class="wrapper">
								<div class="padding">
																		<a href="/" id="logo" class="png"><span class="logo-desc">February Design 09</span></a>
																											<div class="clr"></div>
								</div>
							</div>
						</div>

					</div>
															<div id="horiz-menu" class="moomenu png">
						<div class="wrapper">
													<ul class="menutop png" >
			<li class="item1 png " >
			<a class="topdaddy png" href="http://dev.carsavingexpert.com/"  >
						<span class="menuitem png">Home</span>
		</a>	
			

</li>	
			<li class="item31 parent png " >
			<a class="topdaddy png" href="/index.php?option=com_content&view=article&id=23&Itemid=35"  >
						<span class="menuitem png">Customers</span>
		</a>	
				<div class="drop-wrap columns-2"><div class="drop1 png"></div>
	<ul class="png columns-2">
					
			<li class="item35 png  c0 coltop" >
			<a  href="/index.php?option=com_content&view=article&id=23&Itemid=35"  >
						<span class="menuitem png">Why Use Us ?</span>

		</a>	
			
</li>	
					
			<li class="item42 png  c0" >
			<a  href="/index.php?option=com_content&view=article&id=30&Itemid=42"  >
						<span class="menuitem png">How We Work ?</span>
		</a>	
			
</li>	
					
			<li class="item36 png  c1 coltop" >
			<a  href="/index.php?option=com_content&view=article&id=32&Itemid=36"  >
						<span class="menuitem png">Guided Tour</span>

		</a>	
			
</li>	
			</ul>
	</div>
		
</li>	
			<li class="item32 parent png " >
			<a class="topdaddy png" href="/index.php?option=com_content&view=article&id=24&Itemid=34"  >
						<span class="menuitem png">Dealers</span>
		</a>	
				<div class="drop-wrap columns-2"><div class="drop1 png"></div>

	<ul class="png columns-2">
					
			<li class="item34 png  c0 coltop" >
			<a  href="/index.php?option=com_content&view=article&id=24&Itemid=34"  >
						<span class="menuitem png">Why Use Us ?</span>
		</a>	
			
</li>	
					
			<li class="item37 png  c0" >
			<a  href="/index.php?option=com_content&view=article&id=34&Itemid=37"  >
						<span class="menuitem png">How We Work ?</span>

		</a>	
			
</li>	
					
			<li class="item38 png  c0" >
			<a  href="/index.php?option=com_content&view=article&id=33&Itemid=38"  >
						<span class="menuitem png">Dealers Guided Tour</span>
		</a>	
			
</li>	
					
			<li class="item39 png  c1 coltop" >
			<a  href="/index.php?option=com_content&view=article&id=36&Itemid=39"  >
						<span class="menuitem png">Subscription levels</span>

		</a>	
			
</li>	
					
			<li class="item40 png  c1" >
			<a  href="/index.php?option=com_content&view=article&id=35&Itemid=40"  >
						<span class="menuitem png">Dealer Benifits</span>
		</a>	
			
</li>	
			</ul>
	</div>
		
</li>	
			<li class="item21 png " >

			<a class="topdaddy png" href="/index.php?option=com_chronoconnectivity&Itemid=21"  >
						<span class="menuitem png">View Cars</span>
		</a>	
			
</li>	
			<li class="item33 png " >
			<a class="topdaddy png" href="/index.php?option=com_chronocontact&Itemid=33"  >
						<span class="menuitem png">Register</span>
		</a>	
			
</li>	
			<li class="item30 png " >

			<a class="topdaddy png" href="/index.php?option=com_contact&view=contact&id=6&Itemid=30"  >
						<span class="menuitem png">Contact Us</span>
		</a>	
			
</li>	
			<li class="item3 png " >
			<a class="topdaddy png" href="/index.php?option=com_content&view=article&layout=form&Itemid=3"  >
						<span class="menuitem png">Submit Article</span>
		</a>	
			
</li>	
			<li class="item2 png " >

			<a class="topdaddy png" href="/index.php?option=com_content&view=section&layout=blog&id=1&Itemid=2"  >
						<span class="menuitem png">Dev Notes</span>
		</a>	
			
</li>	
			<li class="item43 png " >
			<a class="topdaddy png" href="/index.php?option=com_content&view=article&id=40&Itemid=43"  >
						<span class="menuitem png">Test</span>
		</a>	
			
</li>	
	</ul>

												</div>
					</div>
									</div>
			</div>
		</div>
		<div class="clr"></div>
		<!-- End Main Header -->
		<!-- Begin First Section -->
		<div id="main-body">

				<!-- End First Section -->
		<!-- Begin Second Section -->
		<div id="section2" class="b-dark">
			<div id="section2-top-texture" class="png">
			<div id="section2-bottom-texture" class="png">
				<div id="section2-bottom" class="png">
					<div class="wrapper">
						<!-- Begin Top Main Modules -->
												<!-- End Top Main Modules -->

						<div class="main-body-top png"><div class="main-body-top2 png"><div class="main-body-top3 png"><div class="main-body-top4 png"></div></div></div></div>
							<div class="main-body-surround png">
								<div class="main-body-surround2 png">
									<div class="main-body-surround3 png">
																				<div id="leftcol">
											<div class="padding">
																										<div class="modulehiddenbyjuga">
			<div>
				<div>

					<div>
													<div class="module">
			<div>
				<div>
					<div>
													<h3>JUGA dealermenu</h3>
											<ul class="menu"><li class="item29"><a href="/index.php?option=com_content&view=article&id=16&Itemid=29"><span>My Adverts</span></a></li><li class="item27"><a href="/index.php?option=com_content&view=article&id=18&Itemid=27"><span>My Inbox</span></a></li><li class="parent item17"><a href="/index.php?option=com_content&view=article&id=13&Itemid=18"><span>View Cars Offered</span></a></li><li class="item16"><a href="/index.php?option=com_content&view=article&id=12&Itemid=16"><span>Offer A Car</span></a></li><li class="item28"><a href="/index.php?option=com_content&view=article&id=17&Itemid=28"><span>Update My Details</span></a></li><li class="item45"><a href="/index.php?option=com_acctexp&Itemid=45"><span>My Subscriptions</span></a></li></ul>					</div>

				</div>
			</div>
		</div>
						</div>
				</div>
			</div>
		</div>
	
											</div>
										</div>

																				<div id="maincol" style="width: 755px"><div class="padding">
																																												<div id="maincontent-block">
												
																									<h1>Single Car View</h1>   
	<form action="index.php?option=com_chronoconnectivity&connectionname=single_car" method="post" name="connectivity">	
		<div id="cardetails">
<p>
Simple Single record Demo
</p><p>
 BMW  M3
</p></div></form>

        <!-- You are not allowed to remove or edit the following 3 lines anyway if you didnt buy a ChronoConnectivity license --> 
        <div class="chronoform">
        <a href="http://www.chronoengine.com">Powered By ChronoConnectivity - ChronoEngine.com</a>
        </div>
        <!-- You are not allowed to remove or edit the above 3 lines anyway if you didnt buy a ChronoConnectivity license -->
																							</div>
																					</div></div>
																			</div>
								</div>

							</div>
						<div class="main-body-bottom png"><div class="main-body-bottom2 png"><div class="main-body-bottom3 png"><div class="main-body-bottom4 png"></div></div></div></div>
						<!-- Begin Bottom Main Modules -->
												<!-- End Bottom Main Modules -->
					</div>
				</div>
			</div>
			</div>
		</div>

		</div>
		<!-- End Second Section -->
		<!-- Begin Bottom Section -->
						<!-- Begin Footer Bar -->
				<div id="footer" class="bt-dark">
			<div id="footer2" class="png">
				<div class="wrapper">
										<a href="#" title="Return to Top" id="top-scroll" class="png"></a>
					<a id="clear-cookies" href="/?reset-settings=true">Restore Default Settings</a>

										<div class="copyright-block">
						<a href="http://www.rockettheme.com/" title="RocketTheme Joomla Templates Club" id="rocket" class="png"></a>
						<div id="copyright">
							© Copyright 2009, All Rights Reserved						</div>
					</div>
									</div>
			</div>
		</div>

				<!-- End Footer Bar -->
		<!-- End Bottom Section -->
				<div id="login-module">
					<div class="moduletable">
					<h3>Login</h3>
					
<form action="index.php" method="post" name="login" class="log">
		<p>
	Hi Bronze,	</p>

		<div class="submit-m png"><div class="submit-l png"><div class="submit-r png">
		<input type="submit" name="Submit" class="button" value="Log out" />
	</div></div></div>
	<input type="hidden" name="option" value="com_user" />
	<input type="hidden" name="task" value="logout" />
	<input type="hidden" name="return" value="P29wdGlvbj1jb21fY2hyb25vY29ubmVjdGl2aXR5JmNvbm5lY3Rpb25uYW1lPXNpbmdsZV9jYXImY2FyX2lkPTQjY29udGVudA==" />
</form>
		</div>
	
		</div>

			</body>
</html>


Im not sure if that will help or not - but on that note I have been up all night and I am off to get some sleep!!

Cheers,

?Miz
Gr
GreyHead 04 Oct, 2009
Hi MIzpah,

Just got back to look at this again.

Why not try &tmpl=component in the url for the RokBox - that should tell Joomla to load just the component element without the template frame.

Later: needs some styling but this works OK :-)

Bob
Mi
Mizpah 05 Oct, 2009
Thanks Bob!

i only just noticed this reply - I have indeed rebuilt the page in question in chronoforms, I will now have another go at getting the responce in the rokbox!

thanks as always!

/Miz
This topic is locked and no more replies can be posted.