Welcome, Guest

TOPIC: Using Tabs with Cook?

Using Tabs with Cook? 15 Dec 2012 13:25 #6103

gdpodesta
Offline
Senior Member
Posts: 75
Thank you received: 8
Karma: -42

I've tried Joomla's JHtml::_('tabs.panel'.... and jQuery's $( "#tabs" ).tabs(); , and in both cases, when in IE, I get the JS prompt about leaving the page. Obivously this is quite annoying to the user.

I'm reasonably certain this is the code that does it, but am afraid my JS skills aren't sufficient to determine if there's a way to modify it for tabs, or if I would just have to remove it altogether.

//Secure the user navigation on the page, in order preserve datas.
var holdForm = true;
window.onbeforeunload = function closeIt(){	if (holdForm) return false;};

The administrator has disabled public write access.

Re: Using Tabs with Cook? 15 Dec 2012 13:28 #6104

JoomGuy Offline Moderator Joomla Enthusiast, Lover of Cooking Posts: 1115 Thank you received: 195 Karma: 64	Hi @ gdpodesta, Can you elaborate a bit? What are you doing to get the prompt to appear - clicking a tab or just when you land on the page? What are you using the tabs for - separating out your form? Gez
	Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!! The administrator has disabled public write access.

Re: Using Tabs with Cook? 15 Dec 2012 14:24 #6113

gdpodesta
Offline
Senior Member
Posts: 75
Thank you received: 8
Karma: -42

Yes...when clicking on one of the tabs, the "url" seems to trigger that code. I've got about 15 different views, and on one of them there a lot of different fields, particularly 3 text editors and a list of about a dozen colors. For usability, I've split them into tabs, but each click on the tab fires that event in IE (and maybe Safari, but haven't actually tried that yet)

Note, the pages appears as expected, and everything works from a technical standpoint. It's just the JS alert that appears when you click on a tab before it goes to it.

Last Edit: 15 Dec 2012 14:25 by gdpodesta.

The administrator has disabled public write access.

Re: Using Tabs with Cook? 15 Dec 2012 14:32 #6116

JoomGuy Offline Moderator Joomla Enthusiast, Lover of Cooking Posts: 1115 Thank you received: 195 Karma: 64	Do you wanna share your code? It would be easier to debug... There must be something wrong in the code or a collision with the validator somewhere. Gez
	Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!! The administrator has disabled public write access.

Re: Using Tabs with Cook? 15 Dec 2012 14:44 #6119

gdpodesta
Offline
Senior Member
Posts: 75
Thank you received: 8
Karma: -42

with JHtml:

echo JHtml::_('tabs.start', 'tab_group_id', $options);

$fieldSets = $this->form->getFieldsets();
/*
<legend><?php echo JText::_($fieldSets['ourlicense.authentication']->label);?></legend>
*/
echo JHtml::_('tabs.panel', JText::_('SIPS_JFORM_REQUIRED_INFORMATION'), 'panel_id_'.'required');
echo $this->loadTemplate('required');
echo JHtml::_('tabs.panel', JText::_('SIPS_JFORM_IP_AUTHENTICATION'), 'panel_id_'.'authentication');
echo $this->loadTemplate('authentication');
echo $this->loadTemplate('authentication_assistant');
echo JHtml::_('tabs.panel', JText::_('SIPS_JFORM_CUSTOM_TEXT'), 'panel_id_'.'customtext');
echo $this->loadTemplate('customtext');
echo JHtml::_('tabs.panel', JText::_('SIPS_JFORM_CUSTOM_COLORS'), 'panel_id_'.'colors');
echo $this->loadTemplate('colors');
echo JHtml::_('tabs.panel', JText::_('SIPS_FIELDSET_LICENSE_SUMMARY'), 'panel_id_'.'summary');
echo $this->loadTemplate('summary');
echo JHtml::_('tabs.end');

with jQuery:

jQuery(document).ready(function($) {// dollar passed in so you can use it as a short reference in script
    $(function() {
        if (!window.console) window.console = {};
        if (!window.console.log) window.console.log = function () { };
        if (!window.console.info) window.console.info = function () { };
        if (!window.console.debug) window.console.debug = function () { };

        $( "#playlist_tabs" ).tabs();
    });
});

<div id="playlist_tabs" style="margin-top:5px;">
    <ul>
        <li><a href="#tabs-2"><?php echo JText::_('SIPS_LAYOUT_PLAYLIST_CLIP_SELECTION') ?></a></li>
        <li><a href="#tabs-1"><?php echo JText::_('SIPS_LAYOUT_PLAYLIST_DESCRIPTIVE') ?></a></li>
    </ul>
    <div id="tabs-1">
        <fieldset class="fieldsform">
            <?php foreach($fieldSet as $field):
                    if ($field->hidden){
            echo $field->input;
            }else{

            ?>
                <label><?php echo $field->label; ?></label>
                <div><?php echo $field->input ?></div>
                <?php } endforeach;
            ?>
        </fieldset>
    </div>
    <div id="tabs-2">
        <fieldset class="fieldsform">
            <legend>Select/Sequence your Clips by dragging them from one column to the other</legend>
        </fieldset>
    </div>
</div>

The administrator has disabled public write access.

Re: Using Tabs with Cook? 15 Dec 2012 15:39 #6123

JoomGuy
Offline
Moderator
Joomla Enthusiast, Lover of Cooking
Posts: 1115
Thank you received: 195
Karma: 64

Hi,

OK, I've taken a look at your jQuery code...

The only thing that doesn't make sense to me is why you have the window.console stuff wrapped in an anonymous function... This is going to get called when the doc is ready anyway and you're not calling it in any routine further on in the script. Therefore, it shouldn't be in a function.

Also, your call to the .tabs() method is inside this function.

Were or are you getting any JS errors in the console/firebug?

Try replacing your jQuery script with:

jQuery(document).ready(function($) {// dollar passed in so you can use it as a short reference in script
        if (!window.console) window.console = {};
        if (!window.console.log) window.console.log = function () { };
        if (!window.console.info) window.console.info = function () { };
        if (!window.console.debug) window.console.debug = function () { };

        $( "#playlist_tabs" ).tabs();
});

Hope it helps,

Gez

Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!

The administrator has disabled public write access.

Re: Using Tabs with Cook? 15 Dec 2012 15:44 #6124

gdpodesta Offline Senior Member Posts: 75 Thank you received: 8 Karma: -42	All good points, I'll fix my code. I'd just cut/paste this from an older version to show the code I had been using. Since it was failing, I've gone back to the JHtml version, which is actually where I'm having the problem now.
	The administrator has disabled public write access.

Re: Using Tabs with Cook? 15 Dec 2012 15:48 #6125

JoomGuy Offline Moderator Joomla Enthusiast, Lover of Cooking Posts: 1115 Thank you received: 195 Karma: 64	No probs... BTW, in the JHTML version, do you have the behaviour loaded? Just a thought... Gez
	Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!! The administrator has disabled public write access.

Re: Using Tabs with Cook? 15 Dec 2012 15:52 #6126

gdpodesta Offline Senior Member Posts: 75 Thank you received: 8 Karma: -42	Yep, it's there, and with FF, all is good. I only found it after I'd spent the day doing all my mods and ran it under IE to see how close I came to the MS version of the internet, lol. Also, i tried it with a default template and with tmpl=component
	Last Edit: 15 Dec 2012 15:53 by gdpodesta. The administrator has disabled public write access.

Re: Using Tabs with Cook? 15 Dec 2012 16:01 #6127

JoomGuy
Offline
Moderator
Joomla Enthusiast, Lover of Cooking
Posts: 1115
Thank you received: 195
Karma: 64

If it still doesn't work in I.E. try

jQuery(document).ready(function(){
 //Script here using $ to reference jQuery namespace
})(jQuery);

And again, if that doesn't work, try passing the $ in the first line like:

jQuery(document).ready(function($){
 //Script here using $ to reference jQuery namespace
})(jQuery);

It shouldn't actually make a difference but with IE, you just never can tell! If I had my way, I would detect IE and alert('Get a real internet browser');

G

Need help with your Cook/Joomla Project? . PM me to find out what I can help with. NO time wasters please!!!

The administrator has disabled public write access.

Re: Using Tabs with Cook? 15 Dec 2012 16:37 #6139

gdpodesta
Offline
Senior Member
Posts: 75
Thank you received: 8
Karma: -42

I just created a quick/dirty/simple component and tried it on the sandbox, then downloaded it and installed it. I then modified the code as shown below to put each fieldset into a JHtml tab instead of consecutive fieldsets.

It's a little ugly, and doesn't reflect "tabs" well because of the Cook DL/DD/DT styling, which JHTML uses, but the codes works the same, and you can see the difference between FF and IE at beta.iriseducation.org/tmp/JHtmlJavascript.html . I don't know if we can share Sandbox projects, but here's what I started with before the below mods: sandbox.cms25.j-cook.pro/index.php?optio...tem&layout=tableitem

These are the only changes I made:

<?php
    /* Added to test jHTML Tabs on IE */
$options = array(
    'onActive' => 'function(title, description){ description.setStyle("display", "block"); title.addClass("open").removeClass("closed"); }',
    'onBackground' => 'function(title, description){description.setStyle("display", "none");title.addClass("closed").removeClass("open"); }',
    'startOffset' => 0,  // 0 starts on the first tab, 1 starts the second, etc...
    'useCookie' => false, // this must not be a string. Don't use quotes.
);
echo JHtml::_('tabs.start', 'tab_group_id', $options);
echo JHtml::_('tabs.panel', "My Panel 1", 'panel_1_id');
echo $this->loadTemplate('fly_1');
echo JHtml::_('tabs.panel', "My Panel 2", 'panel_2_id');
echo $this->loadTemplate('fly_2');
echo JHtml::_('tabs.panel', "My Panel 3", 'panel_3_id');
echo $this->loadTemplate('form');
echo JHtml::_('tabs.end');
?>
			<?php //echo $this->loadTemplate('fly_1'); ?>
			<?php //echo $this->loadTemplate('fly_2'); ?>
			<?php //echo $this->loadTemplate('form'); ?>
		</div>

Last Edit: 15 Dec 2012 16:38 by gdpodesta.

The administrator has disabled public write access.

Re: Using Tabs with Cook? 15 Dec 2012 16:39 #6140

gdpodesta Offline Senior Member Posts: 75 Thank you received: 8 Karma: -42	Personally, I think that should be core code that should be legally required to be issued WITH IE
	The administrator has disabled public write access.