Forums

ChronoForms v8 is now WordPress ready, v6 & v7 forms import is now supported, latest v8.0.29 release details

The JED needs volunteers!

Two forms on the same page problems in ie7

om
omri 20 Jul, 2011
Hi,

I have two forms on the same page. (It's actually the same form with different name).
I'm using the same form with different name because if I use the same form twice (with the same name) I have issues with required fields.

Anyway...

In all browsers it looks OK besides ie7. The whole template becomes messy...

I guess it's related to declaring the classes twice.

Any idea what can I do?

Here is the link:
http://kitchen-guide.co.il/%D7%9C%D7%99%D7%9E%D7%95%D7%9F-%D7%90%D7%93%D7%A8%D7%99%D7%9B%D7%9C%D7%95%D7%AA-%D7%9E%D7%98%D7%91%D7%97%D7%99%D7%9D

Many thanks!
Gr
GreyHead 20 Jul, 2011
Hi omri,

Have you fixed this? I just looked in FireFox 5, IE 7, 8 & 9 and Chrome and don't see what the problem is :-( Maybe I'm in looking in the wrong place?

I think that there are problems re-using the classes on the same page, and there are some fixes in the forums here.

Bob
om
omri 20 Jul, 2011
No. I didn't fix it.

Here are two images from ie7 and FF.

in IE7 the template is LTR where it should be RTL. Also the upper banner is wrong.
It look to me like the RTL css is not loading or something similar to that.

[attachment=1]ie7.jpg[/attachment]

[attachment=0]ff.jpg[/attachment]
Gr
GreyHead 20 Jul, 2011
Hi omri,

Thank you. I can see the problem now. It looks as though many of the ChronoForms files are being loaded twice and then the template CSS files that come after that, including the template_rtl.css file are listed in the page header but not loaded in IE7.

The ideal solution would be for ChronoForms to use the Joomla! $doc->loadStylesheet() syntax as this appear to handle duplicated files, this would need some fairly extensive hacking :-(

I wonder if it's possible to find out what loads the rtl stylesheet and move that into the page header earlier so that it loads before the ChronoForms sytlesheets?

Bob
om
omri 20 Jul, 2011
Hi Bob,

Thanks you for your answer.

I'm not sure what do you mean by 'moving it to the page header' so I'm attaching my template file below.

Another option for me is to put the same form with the same name twice (this is actually what I need). The problem with that is the 'required' does not work. Do you think it is easier to handle this?

<?php
/**
 * @copyright	Copyright (C) 2005 - 2010 Open Source Matters. All rights reserved.
 * @license		GNU/GPL, see LICENSE.php
 * Joomla! is free software. This version may have been modified pursuant
 * to the GNU General Public License, and as distributed it includes or
 * is derivative of works licensed under the GNU General Public License or
 * other free or open source software licenses.
 * See COPYRIGHT.php for copyright notices and details.
 */

// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
$menu = & JSite::getMenu();
if ($menu->getActive() == $menu->getDefault()) {
		$defaultPage=true;
        //echo 'This is the front page';
}
else
	$defaultPage=false;
	
$itemId = JRequest::getVar('id');
if ( strpos($itemId,':') > 0 ) {
$itemId = substr($itemId,0,strpos($itemId,':'));
}	

?>
<!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="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >
<head>
<jdoc:include type="head" />
<script type="text/javascript" src="<?php echo $this->baseurl ?>/templates/lemon_theme/js/form_js.js"></script>
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/lemon_theme/css/template.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/lemon_theme/css/<?php echo $this->params->get('colorVariation'); ?>.css" type="text/css" />
<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/lemon_theme/css/<?php echo $this->params->get('backgroundVariation'); ?>_bg.css" type="text/css" />
<!--[if lte IE 6]>
<link href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/ieonly.css" rel="stylesheet" type="text/css" />
<![endif]-->

<?php if($this->direction == 'rtl') : ?>
	<link href="<?php echo $this->baseurl ?>/templates/lemon_theme/css/template_rtl.css" rel="stylesheet" type="text/css" />
<?php endif; ?>
<!--//
<link href="<?php echo $this->baseurl ?>/templates/lemon_theme/css/white_bg_inner2.css" rel="stylesheet" type="text/css" />
//-->
<?php if(($itemId==44) || ($itemId==66) || ($itemId==69)) : ?>
    <link href="<?php echo $this->baseurl ?>/templates/lemon_theme/css/white_bg_inner.css" rel="stylesheet" type="text/css" />
<?php endif; ?>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<jdoc:include type="modules" name="googleanalytics" style="raw" />
</head>
<body id="page_bg" class="color_<?php echo $this->params->get('colorVariation'); ?> bg_<?php echo $this->params->get('backgroundVariation'); ?> width_<?php echo $this->params->get('widthStyle'); ?>">
<a name="up" id="up"></a>
<div class="center" align="center">
	<div id="wrapper">
    
		<div id="wrapper_r"> 
			<div id="header">
				<div id="header_l">
					<div id="header_r">
						<div id="logo"></div>
						<jdoc:include type="modules" name="top" />
					</div>
				</div>
			</div>

			<div id="tabarea">
				<div id="tabarea_l">
					<div id="tabarea_r">
						<div id="tabmenu">
						
						</div>
					</div>
				</div>
			</div>

			<div id="search">
				<jdoc:include type="modules" name="user4" />
			</div>

			<div id="pathway">
				<jdoc:include type="modules" name="breadcrumb" />
			</div>

			<div class="clr"></div>

			<div id="whitebox">
				<div id="whitebox_t">
					<div id="whitebox_tl">
						<div id="whitebox_tr"></div>
					</div>
				</div>

				<div id="whitebox_m">
               
					<div id="area">
                    
									<jdoc:include type="message" />

						<div id="leftcolumn">
						
						<?php if($this->countModules('left')) : ?>
							<jdoc:include type="modules" name="left" style="rounded" />
						<?php endif; ?>
						
                        
                        	
                        
                        </div>



						<?php if($this->countModules('left')) : ?>
                        
                        
                        
						<div id="maincolumn">
						<?php else: ?>
						<div id="maincolumn_full">
						<?php endif; ?>
							<?php if($this->countModules('user1 or user2')) : ?>
								<table class="nopad user1user2">
									<tr valign="top">
										<?php if($this->countModules('user1')) : ?>
											<td>
												<jdoc:include type="modules" name="user1" style="xhtml" />
											</td>
										<?php endif; ?>
										<?php if($this->countModules('user1 and user2')) : ?>
											<td class="greyline"> </td>
										<?php endif; ?>
										<?php if($this->countModules('user2')) : ?>
											<td>
												<jdoc:include type="modules" name="user2" style="xhtml" />
											</td>
										<?php endif; ?>
									</tr>
								</table>

								<div id="maindivider"></div>
							<?php endif; ?>

							<table class="nopad">
								<tr valign="top">
									<td>
										<jdoc:include type="component" />
										<jdoc:include type="modules" name="footer" style="xhtml"/>
									</td>
									<?php if($this->countModules('right') and JRequest::getCmd('layout') != 'form') : ?>
										<td class="greyline"> </td>
										<td width="170">
											<jdoc:include type="modules" name="right" style="xhtml"/>
										</td>
									<?php endif; ?>
								</tr>
							</table>

						</div>
						<div class="clr"></div>
					</div>
					<div class="clr"></div>
				</div>

				<div id="whitebox_b">
					<div id="whitebox_bl">
                    	<div id="lemon_cube_all">
                        	<div id="lemon_cube"></div>
                         </div>
						<div id="whitebox_br"></div>
					</div>
				</div>
			</div>

			<div id="footerspacer"></div>
		</div>

		<div id="footer">
			<div id="footer_l">
				<div id="footer_r">
					<p id="feedback">אהבתם את האתר? למה שלא תספרו לי?<a href="http://kitchen-guide.co.il/%D7%A6%D7%95%D7%A8-%D7%A7%D7%A9%D7%A8"> לחצו כאן.</a></p>
					<jdoc:include type="modules" name="syndicate" />
					
				</div>
			</div>
		</div>
	</div>
</div>
<jdoc:include type="modules" name="debug" />

</body>
</html>
om
omri 20 Jul, 2011
BTW, I tried to copy the form HTML and place it as the second form but it didn't work as expected. Again, 'required' didn't work.
om
omri 21 Jul, 2011
Sorry for jumping this, but I saw you answered other people and skipped me...
Gr
GreyHead 21 Jul, 2011
Hi omri,

I looked at this last night but don't have any useful answer for you. I can't see why the rtl CSS files aren't loading :-(

Bob
om
omri 21 Jul, 2011
OK.

So my second option is to copy the form html and place it where I want the second form in the page. (reminder - I need the same form twice on the same page).

The problem was that the 'required' didn't work. It actually worked for one of the form, but If I hit 'submit' on the second form it worked with all the fields empty.

Any ideas how to solve this would be really appreciated.

Thanks again,
Omri
Gr
GreyHead 21 Jul, 2011
Hi Omri,

The validation is tied to the form name - so copying the form HTML with the same form name will break it; changing the form name won't help either as the corresponding code to set up the validation is no longer being loaded.

I did have a thought as I posted my last message - you might try adding the code to the second Form HTML to load the missing CSS classes - I don't know if that would work but it's worth a go. You just need to add the CSS link to the Form HTML box.

Bob
om
omri 21 Jul, 2011
Can I, in some way, prevent the 2'nd form from appearing in ie7?
Gr
GreyHead 21 Jul, 2011
Hi Omri,

Yes you probably could use the JBrowser method to detect the browser and use that to suppress the Form HTML - not sure if that would stop the CSS files being loaded or not though but a simple test would tell. Add this to the Form HTML
<?php
return;
?>
If it works then you can add the JBrowser code to make it conditional.

Bob
om
omri 21 Jul, 2011
I put the second form in a module and disable it in ie7 using Advanced Module Manager.

It works OK this way.

Thanks,
Omri
This topic is locked and no more replies can be posted.