Forums (Obsolete)


Member	vcarter - 5/22/2013 10:24:37 AM Using jquery tabs on an alternate form. I have created a custom document type for press releases that adds some multiselect fields. I have created a custom form and would like to use a tabbed layout(utilizing jquery). So my question is how do I access jquery on an alternative form within the confines of CMSDesk. Any help would be appreciated.


Member	vcarter - 5/22/2013 10:26:54 AM RE:Using jquery tabs on an alternate form. I apologize, I mean a CUSTOM form layout, not an alternative form.

Certified Developer 8

Petr Dvorak - 5/22/2013 3:23:23 PM

RE:Using jquery tabs on an alternate form.

If the jQuery UI is not loaded by default in the custom form layout in CMSDesk on the Form tab, you can load it manually.

Following the example from http://jqueryui.com/tabs/ something like this could work:

<script type="text/javascript" src="~/CMSScripts/jquery/jquery-ui.js"></script>
<link href="~/CMSScripts/jquery/jquery-ui.css" rel="stylesheet" type="text/css" />
<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
  </ul>
  <div id="tabs-1">
    $$label:ProductTitle$$ $$input:ProductTitle$$ $$validation:ProductTitle$$
  </div>
  <div id="tabs-2">
    $$label:ProductDescription$$ $$input:ProductDescription$$ $$validation:ProductDescription$$
  </div>
</div>
<script> jQuery(function() { jQuery( "#tabs" ).tabs(); });</script>

Is this what you meant?


Member	vcarter - 5/22/2013 3:53:09 PM RE:Using jquery tabs on an alternate form. That is exactly what I needed thank you.


Member	vcarter - 5/23/2013 3:26:25 PM RE:Using jquery tabs on an alternate form. Scripts still don't seem to be loading. Do I need to register jquery on my masterpage, I thought that was only for scripts in actual content and that CMS Desk was already using jquery and jquery UI.


Kentico Customer Success	kentico_martind2 - 5/24/2013 6:55:35 AM RE:Using jquery tabs on an alternate form. Hello, Which type of notation are you using? I think that this KB article could be also helpful in your case: How to register and use the native Kentico jQuery library. Best regards, Martin Danko

Member

vcarter - 5/24/2013 8:23:51 AM

RE:Using jquery tabs on an alternate form.

<script type="text/javascript" src="/CMSScripts/jquery/jquery-ui.js"></script>
<link href="/CMSScripts/jquery/jquery-ui.css" rel="stylesheet" type="text/css" />
<div id="tabs">
	<ul>
		<li>
			<a href="#tabs-1">Basic Info</a></li>
		<li>
			<a href="#tabs-2">Business Units</a></li>
		<li>
			<a href="#tabs-3">Regions</a></li>
	</ul>
	<div id="tabs-1">
		$$label:PressReleaseTitle$$: $$input:PressReleaseTitle$$<br />
		$$label:PressReleaseDate$$: $$input:PressReleaseDate$$<br />
		$$label:PressReleaseSummary$$: $$input:PressReleaseSummary$$<br />
		$$label:PressReleaseText$$: $$input:PressReleaseText$$<br />
		$$label:PressReleaseAbout$$: $$input:PressReleaseAbout$$<br />
		$$label:PressReleaseTrademarks$$: $$input:PressReleaseTrademarks$$<br />
		$$label:DocumentPublishFrom$$: $$input:DocumentPublishFrom$$<br />
		$$label:DocumentPublishTo$$: $$input:DocumentPublishTo$$</div>
	<div id="tabs-2">
		$$label:BusinessUnit$$ $$input:BusinessUnit$$</div>
	<div id="tabs-3">
		 </div>
</div>

This is what I am using for my custom form layout in site manager for my custom document type. You will notice that the "~" are not in the script source links. This appears to happen whenever I save the custom form. I have registered jquery as suggested and I think this is definitely a path issue. I am going to look into it. Thank you for your assistance. I am very grateful for the support and knowledge available on these boards.


Member	vcarter - 5/24/2013 9:17:56 AM RE:Using jquery tabs on an alternate form. Ok I have determined that Kentico is saving the reference links correctly. So the format of the code in the custom form seems to be ok. Must be something to do with when/if the scripts are loading.

Member

vcarter - 5/24/2013 9:21:48 AM

RE:Using jquery tabs on an alternate form.

<script type="text/javascript" src="~/CMSScripts/jquery/jquery-ui.js"></script>
<link href="~/CMSScripts/jquery/jquery-ui.css" rel="stylesheet" type="text/css" />
<script>
  jQuery(function() {
    jQuery( "#tabs" ).tabs();
  });
  </script>
<div id="tabs">
	<ul>
		<li>
			<a href="#tabs-1">Basic Info</a></li>
		<li>
			<a href="#tabs-2">Business Units</a></li>
		<li>
			<a href="#tabs-3">Regions</a></li>
	</ul>
	<div id="tabs-1">
		$$label:PressReleaseTitle$$: $$input:PressReleaseTitle$$<br />
		$$label:PressReleaseDate$$: $$input:PressReleaseDate$$<br />
		$$label:PressReleaseSummary$$: $$input:PressReleaseSummary$$<br />
		$$label:PressReleaseText$$: $$input:PressReleaseText$$<br />
		$$label:PressReleaseAbout$$: $$input:PressReleaseAbout$$<br />
		$$label:PressReleaseTrademarks$$: $$input:PressReleaseTrademarks$$<br />
		$$label:DocumentPublishFrom$$: $$input:DocumentPublishFrom$$<br />
		$$label:DocumentPublishTo$$: $$input:DocumentPublishTo$$</div>
	<div id="tabs-2">
		$$label:BusinessUnit$$ $$input:BusinessUnit$$</div>
	<div id="tabs-3">
		 </div>
</div>

I was not initializing the tabs. Adding:

<script>
  jQuery(function() {
    jQuery( "#tabs" ).tabs();
  });
  </script>

It worked. Some display issues to overcome but the tabs are loading now. Thanks again for all your help.