Solved

jQuery UI Tabs not Tabbing 1 div

Posted on 2010-09-10
12
748 Views
Last Modified: 2012-05-10
I have a set of jQuery Tabs that as far as I can remember worked a few days ago, but now they don't.  In the code you will see all of my tabs.  What is happening is that the variations tab is not becoming it's own tab.  The link is built in the nav, but the data within the div displays on all of the other tabs.
Also (and this may be caused by the variations tab), if I navigate directly to a tab with the url by appending #seo for example to the URL I get the data tab.  So I get the tab just before the one specified.  This only happens when I use the url variable though.  I have a feeling this is something really simple like a tag not closed, or something.

The attached code is my tab interface.  The screenshot is an example of what I see when I run the code.  You can see that even though I am on the images tab it is displaying the variations content.
<div class="formBlock #local.windowClass#" id="tabs">
		<ul>
			<li><a href="##general">General</a></li>
			<li><a href="##data">Data</a></li>
			<li><a href="##seo">SEO (Meta Info)</a></li>
			<li><a href="##links">Links</a></li>
			<li><a href="##variations">Variations</a></li>
			<li><a href="##images">Images</a></li>
			<li><a href="##downloads">Downloads</a></li>
		</ul>
		<div id="general">
			<label for="prodName">Product Name</label>
			<input type="text" class="text long :required :only_on_blur" name="prodName" id="prodName" /><br />
			<label for="tagline">Tagline</label>
			<input type="text" class="text long" name="tagline" id="tagline" /><br />
			<label for="description" style="text-align:left; ">Description</label>
			<textarea name="description" class="wysiwyg"></textarea><br />
			<label for="tags">Tags</label>
			<input type="text" class="text long" name="tags" id="tags" /><br />
			<span class="help-text">(Comma Seperated)</span><br />
		</div>
		<div id="data">
			<label for="active">Status</label>
			<select name="active" id="active">
				<option value="true">Enabled</option>
				<option value="false">Disabled</option>
			</select><br />
			<label for="sku">SKU</label>
			<input type="text" class="text long :required :only_on_blur" name="sku" id="sku" /><br />
			<label for="ourPrice">Price</label>
			<input type="text" class="text long :required :only_on_blur" name="ourPrice" id="ourPrice" /><br />
			<label for="retailPrice">Retail Price</label>
			<input type="text" class="text long" name="retailPrice"	id="retailPrice" /><br />
			<span class="help-text">(Price other retailers are selling the product for)</span><br />
			<label for="taxclass">Tax Class</label>
			<select name="taxclass" id="taxclass">
				<option value="0">--- None ---</option>
				<option valeu="normal">State Taxes</option>
			</select><br />
			<label for="inventory">Inventory</label>
			<input type="text" class="text long :integer" name="inventory" id="inventory" /><br />
			<span class="help-text">(Used to manage product availability)</span><br />
			<label for="show0">Show if no Inventory</label>
			<input type="checkbox" checked="checked" name="show0" id="show0" /><br />
			<label for="dateAvailable">Date Available</label>
			<input type="text" class="datePicker long" name="dateAvailable" id="dateAvailable" value="#RC.getProduct.dateAvailable#" /><br />
			<label>Dimensions</label>
			<input type="text" class="text mini" name="length" id="length" /> <input type="text" class="text mini" name="width" id="width" /> <input type="text" class="text mini" name="height" id="height" /><br />
			<span class="help-text">(L x W x H)</span><br />
			<label for="weight">Weight</label>
			<input type="text" class="text long" name="width" id="width" /><br />
		</div>
		<div id="seo">
			<!--- Elements Here:
					- Meta Description
					- Meta Keywords
			--->
			<label for="metadesc" style="vertical-align:top; ">Description</label>
			<textarea name="metadesc" class="medium"></textarea><br />
			<label for="metakey">Keywords</label>
			<input type="text" class="text long" name="metakey" id="metakey" /><br />
		</div>
		<div id="links">
			<input type="hidden" name="catLinks" id="catLinks" value="#RC.getParent.catid#" />
			<!--- Elements Here:
					- Categories
					- Related Products
			--->
			<label for="findCats">Find Categories</label>
			<input type="text" class="text long" name="findCats" id="findCats" />
			<input type="button" name="searchCats" id="searchCats" value="Search" onclick="searchCats($('##findCats').val(),'sCatResults','addcatLink')" /><br />
			<ul id="sCatResults"></ul><br />
			
			<label for="selectCat">Available Categoies</label>
			<select name="selectCat" id="selectCat">
				<cfloop query="RC.getCategories">
					<cfif RC.parent NEQ RC.getCategories.catid><option value="#RC.getCategories.catid#">#RC.getCategories.title#</option></cfif>
				</cfloop>
			</select>
			<input type="button" name="addCat" id="addCat" value="Add Link" onclick="addCatLink($('##selectCat').val());moveOption('##selectCat','##cCatLinks','option');" /><br />
			
			<label for="cCatLinks">Current Category Links</label>
			<select name="cCatLinks" id="cCatLinks" size="10" class="text long">
				<option value="#RC.getParent.catid#">#RC.getParent.title#</option>
			</select>
		</div>
		<div id="variations">
			<!--- Elements Here:
					- List of variations
					- Add Variation
			--->
			
			<input type="hidden" name="variationIDs" id="variationIDs" value="1" />
			<p>Click the plus button to start adding variations to your product.</p>
			<p><a href="javascript:openWindow(400,600,'#buildURL('variations.addproduct','?windowmode=true')#','add-variation');"><img src="/assets/system-images/icons/add_tiny.png" border="0" /> New Variation</a></p>
		</div>
		<div id="images">
			<input type="hidden" name="imgIDs" id="imgIds" value="" />
			<input type="hidden" name="defaultImg" id="defaultImg" value="" />
			
			<div id="imgUploader">
				<p>Please select images to upload. Uplaod will begin as soon as you click Upload Image.</p>
				<p id="uploadify-message" class="ui-corner-all" style="display: none;"></p>
				<div id="uploadify" class="images"></div><p />
				<input type="button" onClick="jQuery('##uploadify.images').uploadifyUpload()" value="Upload Image" />
			</div>			
			<div id="prodImgs">
				<!--- Format to follow:
						<div class="product-img" id="img#imgid#">
							<img src="{imgSource}" />
							<a href="##" onClick="setDefaultImg(#imgid#)">Set Default</a>
						</div>
				--->
			</div>
		</div>
		<div id="downloads">
			<input type="hidden" name="downloadIDs" value="1" />
			
			<div id="fileUploader">
				<p>Please select files to upload.  Upload will begin as soon as you click Upload File.</p>
				<p id="uplaodify-message" class="ui-corner-all" style="display:none;"></p>
				<div id="uploadify" class="downloads"></div>
				<input type="button" onclick="jQuery('##uploadify.downloads').uploadifyUpload()" value="Upload File" />
			</div>
		</div>
	</div>

Open in new window

Screenshot.png
0
Comment
Question by:paldie
  • 4
  • 4
  • 3
12 Comments
 
LVL 2

Expert Comment

by:gtagliani
ID: 33649057
can u upload de js files and the css lines???
0
 

Accepted Solution

by:
paldie earned 0 total points
ID: 33649091
You can see in the $(document).ready() call it calls $('#tabs').tabs().  Let me know if you still need to CSS file from this.  The CSS hasn't changed so you shouldn't need that.
// JavaScript Document
$(document).ready(function(){
	$('#admin-nav .main-element a').click(function(){
		var subNav = '#' + this.rel;
		$(subNav).slideToggle('fast');
	})
	DD_roundies.addRule('#admin-nav li.main-element, #admin-nav ul.sub-nav','3px',false);
	
	if($('body').attr('class').toString() == 'users'){
		if($('body').attr('id').toString() == 'default'){
			// Run the options setup
			showUserOptions();
			// Setup the search form
			$('#search-submit').click(function(e){
				e.preventDefault();
				var q = $('#search-query').val();
				if(q.length == 0){
					return false;
				}
				q = 'q=' + encodeURIComponent(q);
				var url = $('#search-users').attr('action');
				//Send the data
				$.ajax({url:url,data:q,success: function(html){
					document.getElementById('list-users').innerHTML = html;
					showUserOptions();
				}})
				return false;
			})
		}
	}
	if($('body').attr('class').toString() == 'categories'){
		if($('body').attr('id').toString() == 'default'){
			// Setup the add product and category menu
			$('.new-item').hover(
				function(){
					// Hover on
					showMenu(this);
				},function(){
					// Hover off
					//$('.add-menu').remove();
				}
			);
		}
	}
	$('#tabs').tabs();
	$('.datePicker').datepicker();
	$('.wysiwyg').ckeditor();
})


function showMenu(obj){
	var position = $(obj).offset();
	var parentid = $(obj).attr('rel');
	var posTop = (position.top);
	var posLeft = (position.left + 10);
	if($(obj).hasClass('isParent')){
		var zoomText = 'Zoom Out';
	}else{
		zoomText = 'Zoom In';
	}
	var zoomLink = '/index.cfm?action=admin:categories.default&parent=' + parentid;
	
	var newCatLink = "javascript:openWindow('400','650','/index.cfm?action=admin:categories.add&windowmode=true&parentid=" + parentid + "','add-cat')";
	var newProdLink = '/index.cfm?action=admin:products.add&parent=' + parentid;
	var html = 	'<ul class="add-menu">';
	if($(obj).hasClass('isHome') != true) html = html + '<li><a href="' + zoomLink + '">' + zoomText + '</a></li>';
	html = html + 	'<li><a href="' + newCatLink + '">New Category</a></li>' +
					'<li><a href="' + newProdLink + '">New Product</a></li>' +
				'</ul>';
	$('body').append(html);
	$('.add-menu').css({'left':posLeft,'top':posTop});
	return true;
}
function showUserOptions(){
	// Setup the user options bar
	$('#list-users .options-link').click(function(e){
		e.preventDefault();
		var optionSelector = '#options-' + $(this).attr('id');
		var imgSelector = '#' + $(this).attr('id') + ' img';
		if($(imgSelector).attr('src') == '/assets/system-images/icons/arrow-left_tiny.png')$(imgSelector).attr('src','/assets/system-images/icons/arrow-down_tiny.png');
		else if($(imgSelector).attr('src') == '/assets/system-images/icons/arrow-down_tiny.png')$(imgSelector).attr('src','/assets/system-images/icons/arrow-left_tiny.png');
		$(optionSelector).slideToggle('fast');
	})
}

function searchCats(keywords,retContainer,clicker,exclude){
	/*
	 * @param keywords - words in the title of the categori
	 * @param retContainer - the container for the results
	 * @param clickHandler - function to handle clicking of links returned
	 * @param exclude - a list of excluded category IDs
	 */
	$.ajax({
		url:'/index.cfm?action=admin:categories.search',
		dataType:'html',
		data:'query=' + keywords + '&clickHandler=' + clicker + '&exclude=' + exclude,
		type:'GET',
		complete:function(data){
			alert(data);
		}
	});
}

function addCatLink(catid){
	var currentVal = $('#catLinks').val();
	if (currentVal != 'null') {
		if (currentVal.length > 0) {
			newList = currentVal + ',' + catid;
		}
		else 
			newList = catid;
	}
	$('#catLinks').val(newList);
	
	return true;
}

function setDefaultImg(imgId){
	var $theimg = $('#prodImgs #img' + imgId);
	var $theinput = $('input[name=defaultImg]');
	if($theinput.val().length){
		// Existant Default Image
		var currentImg = $theinput.val();
		var $currentImg = $('#prodImgs #img' + currentImg)
		$currentImg.children('span').remove();
		var htmlOut = '<a href="#" onClick="setDefaultImg(' + currentImg + ')">Set Default</a>';
		$currentImg.append(htmlOut);
	}else{
		// No default image
	}
	$theinput.val(imgId);
	$theimg.children('a').fadeOut('fast');
	htmlOut = '<span id="display-none" style="display:none;"><img id="defaultImg" src="/assets/system-images/icons/check_tinyest.png" /> Default Image</span>';
	$theimg.append(htmlOut).children('#display-none').fadeIn('fast');
}

Open in new window

0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 33649236
Paste the code above into a blank HTML document.  Then copy and paste it into the w3c validator... there are 21 errors.  

You have multiple IDs
misspelled attributes (ex: valeu)
missing attributes ('row' required on textarea)
missing tags (LI required inside a UL)
invalid (X)HTML tags... make sure your documnet uses the right DOCTYPE and appropriate xmlns for your non-standard tags.
0
 

Author Comment

by:paldie
ID: 33649364
None of those would cause the problem I am having.  They have been like that all along.
0
 
LVL 2

Expert Comment

by:gtagliani
ID: 33649415
try changing this:
            <ul>
                  <li><a href="##general">General</a></li>
                  <li><a href="##data">Data</a></li>
                  <li><a href="##seo">SEO (Meta Info)</a></li>
                  <li><a href="##links">Links</a></li>
                  <li><a href="##variations">Variations</a></li>
                  <li><a href="##images">Images</a></li>
                  <li><a href="##downloads">Downloads</a></li>
            </ul>

for:
            <ul>
                  <li><a href="#general">General</a></li>
                  <li><a href="##data">Data</a></li>
                  <li><a href="#seo">SEO (Meta Info)</a></li>
                  <li><a href="#links">Links</a></li>
                  <li><a href="#variations">Variations</a></li>
                  <li><a href="#images">Images</a></li>
                  <li><a href="#downloads">Downloads</a></li>
            </ul>


0
Threat Intelligence Starter Resources

Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

 

Author Comment

by:paldie
ID: 33649440
I need the double pound signs there.  ColdFusion uses pound signs for variables within a document, and when it comes across a double pound sign it knows to just replace that with a single one.  If I just put a single pound sign it will error out.
0
 
LVL 2

Expert Comment

by:gtagliani
ID: 33649459
upps...

for this sorry:

for:
            <ul>
                  <li><a href="#general">General</a></li>
                  <li><a href="#data">Data</a></li>
                  <li><a href="#seo">SEO (Meta Info)</a></li>
                  <li><a href="#links">Links</a></li>
                  <li><a href="#variations">Variations</a></li>
                  <li><a href="#images">Images</a></li>
                  <li><a href="#downloads">Downloads</a></li>
            </ul>
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 33649828
alright dude, I have done this a long time... and I don't appreciate being insulted.

There are currently 21 potential issues that might cause this error.  FIX THEM!

Please, take our advice instead of question it.  You might end up a better person for it.


Can you please post the rendered code... as in pull up the page in a browser, view source, copy, and paste the code here.  Seeing your CFM file does not help us at all.

Here's how it shows up in my browser, except I took 5 minutes and fixed all the validation errors.
screenshot.png
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 33771017
The asker did not respond to suggestions, nor did he follow the advice given.  We cannot fix errors that might be caused by other errors.  I took it upon myself to fix all of the other errors and tested the SAME EXACT CODE pasted above... with the errors fixed.  AFTER FIXING THE 21 ERRORS, IT WORKED, and I proved it with screenshots.  I cannot help that the asker did not respond to my suggestions.
0
 

Author Comment

by:paldie
ID: 33771047
I never meant to offend you.  I did eventually fix the errors in my own and it still did not work.  I eventually did find a problem with the ColdFusion code that caused the problem, and I apologize for not posting the solution to it.
0
 
LVL 14

Expert Comment

by:Designbyonyx
ID: 33771160
@paldie - No worries.  If you fixed it, good.  It's just a common courtesy to not leave us out there hanging.  We are here to help, and it is very frustrating when askers become unresponsive and/or don't follow our advice.  Your reason for closing the question should have been more along the lines of "problem in my CF code, fixed it myself" as opposed to implying that we did not offer a proper solution.

@Moderator - you may close this question without awarding points.  My objection was to the reason behind closing the question.  The asker solved the problem himself, therefore no points need to be awarded.
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now