Forum user: jeremyBass

Simple as that.. this is a heads up that the combo of jQueryTools1.2.5 , jQuery1.5 and IE9 produces errors. They are to general atm to post here but, moving to jQueryTools1.2.5 , jQuery1.4.2 and IE9 , jQueryTools is fine again. Cheers -Jeremy

So what's the trick here... Seems that there are many form pieces missing?

if you have


<asp:CheckBoxList id="checkboxlist1"
CellPadding="5"
CellSpacing="5"
RepeatColumns="1"
RepeatDirection="Vertical"
TextAlign="Right"
class="optionrequired"
runat="server">
<asp:ListItem>Information I am looking for is not available<br/></asp:ListItem>
<asp:ListItem>Information is not well organized<br/></asp:ListItem>
<asp:ListItem>There is too much information<br/></asp:ListItem>
<asp:ListItem>It is difficult to navigate through the information<br/></asp:ListItem>
</asp:CheckBoxList>

and the "best" solution so far is something like

 	$.tools.validator.fn(".optionrequired input", function(input) {
		if ($(input).is(":checked")) {
			return true;
		} else {  
			return { en: "Please make a selection" };
		};
	});

but that does each and .. well it don't work..

Ideas?

incase .. the ouput for that asp is..

      <table id="checkboxlist1" cellspacing="5" cellpadding="5" border="0">
		<tr>
			<td><input id="checkboxlist1_0" type="checkbox" name="checkboxlist1$0" /><label for="checkboxlist1_0">Information I am looking for is not available<br/></label></td>
		</tr><tr>
			<td><input id="checkboxlist1_1" type="checkbox" name="checkboxlist1$1" /><label for="checkboxlist1_1">Information is not well organized<br/></label></td>
		</tr><tr>

			<td><input id="checkboxlist1_2" type="checkbox" name="checkboxlist1$2" /><label for="checkboxlist1_2">There is too much information<br/></label></td>
		</tr><tr>
			<td><input id="checkboxlist1_3" type="checkbox" name="checkboxlist1$3" /><label for="checkboxlist1_3">It is difficult to navigate through the information<br/></label></td>
		</tr>
	</table>

does anyone know what to do?

Ok.. I got to be close to the dirty solution.. issue at this point is that is dies on..

getPosition is not defined
[Break on this error] var pos = getPosition(input, msg, conf);

:/ .. not sure how to tackle that one atm.. Ideas? Thank you for the help..

$.tools.validator.addEffect("iframeDefault", function(errs, event) {
				var conf = this.getConf();
				
				// loop errors
				$.each(errs, function(i, err) {
						
					// add error class	
					var input = err.input;					
					input.addClass(conf.errorClass);
					
					// get handle to the error container
					var msg = input.data("msg.el"); 
					
					// create it if not present
					if (!msg) { 
						msg = $(conf.message).addClass(conf.messageClass).appendTo($(y.document).find('body'));
						input.data("msg.el", msg);
					}  
					
					// clear the container 
					msg.css({visibility: 'hidden', display: 'none'}).find("span").remove();
					
					// populate messages
					$.each(err.messages, function(i, m) { 
						$("<span/>").html(m).appendTo(msg);			
					});
					
					// make sure the width is sane (not the body's width)
					if (msg.outerWidth() == msg.parent().width()) {
						msg.add(msg.find("p")).css({display: 'inline'});		
					} 
					
					// insert into correct position (relative to the field)
					var pos = getPosition(input, msg, conf); 
					 
					msg.css({ visibility: 'visible', position: 'absolute', top: pos.top, left: pos.left })
						.fadeIn(conf.speed);     
				});
						
				
			// hide errors function
			}, function(inputs) {

				var conf = this.getConf();				
				inputs.removeClass(conf.errorClass).each(function() {
					var msg = $(this).data("msg.el");
					if (msg) { msg.css({visibility: 'hidden'}); }
				});
			});

So I see that this must be the issue..

// create it if not present
if (!msg) { 
	msg = $(conf.message).addClass(conf.messageClass).appendTo(document.body);
	input.data("msg.el", msg);
}  

So what I need to be able to do is have an option (ideally) to say where that item is appendTo().. ie: in this case the message should be appendTo() $(y.document).find(body) not document.body .. simple right.. add one line and what 25+ chars and we have an option to say where it needs to be appendTo()

Till then... what are my options..? I need to get this working.. and like now... I notice that it's in a default of an effect... does that mean I can over ride? copy that area and make that one change?

	var fns = [], effects = {
		
		'default' : [

very dirty.. but if that is the way then that is what needs to be..

Can someone let me know? Thanks for the help.. Cheers.. -Jeremy

So I'm working on a very good example of the power of jQueryTools.. but I found a 'flaw' that I can't seem to work around.. so here

http://173.203.188.218/#/collections.html which will become
http://www.armstrongandwilson.com/#/collections.html after the dns switch, you can see that if you click an item without changing the qyt. it does the validation.. nice.. so if you add one to the cart, then click check out.. it brings you to the order processing form. Now.. this is in an iframe. Here is the rub.. I can't seem to tell or am I even sure where to over write it so that the message goes in the iframe..

The deal is that it is going to the document not to the iframe.. How do I fix this?

http://screencast.com/t/NTgzMzFlNm

function initCart(){
	$('#cartFrame').load(function(){ 
			var x=document.getElementById("cartFrame");
			var y=(x.contentWindow || x.contentDocument);

			$(y.document).find("#billingArea form").validator({ 
				position: 'top left', 
				offset: [-12, 0],
				message: '<div><em></em></div>' // em element is the arrow
			}).bind("onSuccess", function(e, els)  {
				e.stopPropagation();   
					e.preventDefault();

					loadingCart($(y.document).find('body'),"Loading Payment Form");
				$.post($(e.target).closest("form").attr('action')+'?showtemplate=false',
					$(e.target).closest("form").serialize()+'&'+$(e.target).attr('name')+'=Next',function(data, status, xhr){
					RLocation=data.split("||");

					removeLoadingCart($(y.document).find('body'));
					if(RLocation[1]==undefined){
						$('#cartFrame').attr({
							src: $('#cartFrame').attr("src")
						});							
					}else{
						window.location=RLocation[1];
					}
				
				});
		});
	}); 
}

any ideas? Just need the next and prev to work...

So this is a little closer to the right path I think...
I have an error right now of

$("div.products .nav").eq(daIndex).data("tabs").seekTo is not a function
[Break on this error] $("div.products .nav").eq(daIndex).data("tabs").seekTo(Cindex, 2);

I think I'm just boucing around it now..

$("ul.products_category_list").tabs("div#productArea > div.products", {effect: 'slide'});

$("div.products .nav").each(function(){
$(this).tabs($(this).closest("div.products").find("div.page"), {effect: 'fade'});
});

$('a.next').live('click',function(e){
        e.stopPropagation();   
        e.preventDefault();
        var daIndex= $(this).closest("div.products .nav").index();
        //alert(daIndex);
	var Cindex= $("div.products .nav").eq(daIndex).data("tabs").getIndex()+1;
	//alert(Cindex);
	$("div.products .nav").eq(daIndex).data("tabs").seekTo(Cindex, 2);
});

$('a.prev').live('click',function(e){
        e.stopPropagation();   
        e.preventDefault();
        var daIndex= $(this).closest("div.products .nav").index();
	var Cindex= $("div.products .nav").eq(daIndex).data("tabs").getIndex()-1;
	$("div.products .nav").eq(daIndex).data("tabs").seekTo(Cindex, 2);
});

For some reason I can't seem to sort out, this works in IE but doesn't in FF.. in FF the right now if you try it out live it's tabbing on the first tabs in the first tab of the parent tabs.. but the second tabs in the second tab of the parent tabs goes back to the first tab.

if you look at the FF output you will see that the "Choose Your Fabric:" links are the outer tabs and the pager links on the right with the next and prev are the inner tabs.

the test page is here...http://173.203.188.218/#/collections.html

The outer works just fine.. and only in IE does the inner work.. the next and prev doesn't thou.. to that is the other missing part.. Tk for the help.. Cheers -Jeremy

$("ul.products_category_list").tabs("div#productArea > div.products", {effect: 'slide'});

$("div.products .nav").each(function(){
$(this).tabs($(this).closest("div.products").find("div.page"), {effect: 'fade'});
});

$('a.next').live('click',function(e){
        e.stopPropagation();   
        e.preventDefault();
       var daIndex= $(this).closest("div.products .nav").index();
	var Cindex= $("div.products .nav").data("tabs").eq(daIndex).getIndex()+1;
	alert(Cindex);
	$("div.products .nav").data("tabs").eq(daIndex).seekTo(Cindex, 2);
});

$('a.prev').live('click',function(e){
        e.stopPropagation();   
        e.preventDefault();
       var daIndex= $(this).closest("div.products .nav").index();
	var Cindex= $("div.products .nav").data("tabs").eq(daIndex).getIndex()-1;
	$("div.products .nav").data("tabs").eq(daIndex).seekTo(Cindex, 2);
});

bumpiedy .... anyone get it to work?

$(".tabs").data("tabs", null).tabs({
// configuration
});

didn't seem to work.. you can see I did try .removeData("tabs");

@myusername any luck?

Cheers- Jeremy

I tryied it.. it didn't seem to re-initialize... here is what I have.

function initTabs(){

if($(".cal-upcominglist").length>0){
		$(".cal-upcominglist").data("tabs", null).tabs(".cal-upcominglist div.calendar-details",{
				tabs: '.acordHandle',
				effect: 'slide',
				initialIndex: null,
				onClick : function(event,index) {

					$(".acordHandle.opened").removeClass("opened").addClass('close').text('view details');
					$(".acordHandle.current").addClass('opened')
						.text('hide details');
						
					var CurrentTab= this.getCurrentTab();
					CurrentTab.text('hide details');
					//title=CurrentTab.siblings('eventTitle').text();
					//_tracker._trackEvent("Calendar", "Event", title);
					evenCol();
				}
		});

	}
}

$(document).ready(function(){
	evenCol();
	initTabs();
	setTimeout(evenCol, 500);
	setTimeout(evenCol, 1000);
		$(".cal-upcominglist div.calendar-details").hide();
		
		
		//Slide up and down on click
		$(".acordHandle.current.opened").live('click',function(){

				$(".cal-upcominglist div.calendar-details").slideUp("slow");
				evenCol();
				$(".acordHandle.opened").text('view details')
					.removeClass("current")
					.removeClass("opened")
					.addClass('close');
//$(".cal-upcominglist").removeData("tabs");
initTabs();
		});

});

You can see it here... This should toggel the tab by way of re-initialize... ideas?
http://www.shopsatliberty.com/special-events.html

if someone with intamint knowlage of the tab could get this one question.. it'd solve like 10 post list in the forum area right off the bat..

I know I have been trying for a bit now.. it should not be this hard.. ;)

Overload please ring in on any one of the re-initialize/or toggle tab post.. everyone will be happy.. :D

+1 :D

Sadly thing is there are 4 post out of like that last 20 that would deal with this.. That seems like a lot not to have it.. or a way to hack it in.. The post I have below this just need to have a way to reinitialize the tabs and it's a working solution... which reinitialize is a post just below this as well :D lol...

If any of the uppers read thru.. plz at the lest point us to the right solution.. Cheers -Jeremy

Try to take a new tacked on this.. to unload/unbind the tabs and then re bind them. Not working just yet but... I think that may do what is needed.. so the question is how to unbind/unload

function evenCol(){
	$(".cols").height('100%');
	var H = 0;
	$(".cols").each(function(i){

		var h = $(".cols").eq(i).height();
		if(h > H) H = h;
	});
	$(".cols").height(H);
	//$(".cols").height('100%');
	//$(".cols").height(H);
}

function initTabs(){

if($(".cal-upcominglist").length>0){
		var tt =$(".cal-upcominglist").tabs(".cal-upcominglist div.calendar-details",{
				tabs: '.acordHandle',
				effect: 'slide',
				initialIndex: null,
				onClick : function(event,index) {

					$(".acordHandle.opened").removeClass("opened").addClass('close').text('view details');
					$(".acordHandle.current").addClass('opened')
						.text('hide details');
						
					var CurrentTab= this.getCurrentTab();
					CurrentTab.text('hide details');
					//title=CurrentTab.siblings('eventTitle').text();
					//_tracker._trackEvent("Calendar", "Event", title);
					evenCol();
				}
		});

	}
}

$(document).ready(function(){
	evenCol();
	initTabs();

		$(".cal-upcominglist div.calendar-details").hide();
		
		
		//Slide up and down on click
		$(".acordHandle.current.opened").live('click',function(){

				$(".cal-upcominglist div.calendar-details").slideUp("slow");
				evenCol();
				$(".acordHandle.opened").text('view details')
					.removeClass("current")
					.removeClass("opened")
					.addClass('close');

tt.unbind('click');

initTabs();
		});
		//$(".acordHandle.close").click(function(){

		//});

});