Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE Browser Select Box Issue (MooTools)

    mediasource.saymikeo.com

    At the bottom of this page, click the web or video big white box. Then turn your attention to the select boxes.

    When you select either of the first two choices, another box should pop up next to the select box. That box should populate with other choices.

    1. My problem is the secondary box does not populate with the correct data.
    2. When you select option 3 or 4 the box should disappear.

    This works in Firefox. This is done through a JSON call in Mootools.

    If you can figure this out I will think you are totally awesome. First for going through my messy code and second for being able fix it.

    Your assistance is greatly appreciated.

    This is the base function that calls view_category() which calls add_select_box();

    Code:
    function build_page(url, id){
    	$('ajax_box').set('html', '');
    	dbug.log('Obj URL: ',  id, url);
    	   // Get the requested view
    	   var view = new Request.JSON({ 
    		url: url, onSuccess: function(jsonObj){
    		   view_category(jsonObj.selectbar, id);
    		}
    	   }).send().chain(function(){
    		 new Fx.Tween(service).start('opacity', '1');
    	   });
       }
    This is the view_category function. Its purpose is to build everything below the select box. It calls the add_select_box.
    Code:
    // Viewing the Title, Description and sub descriptions
       function view_category(oSelect, id){
    	add_select_box(oSelect, id);
    	oSelect.each(function(oOptions){
    	   if(oOptions.id == id){
    		var service_type = new Element('div', {id: oOptions.id, 'class': 'sub_choice'}).inject($('ajax_box'), 'bottom');
    		oOptions.options.each(function(oSub){
    		   var blank_div = new Element('div').inject(service_type, 'bottom'); // Needed for the Expand Link to work
    		   var service_title = new Element('h2').set('html', oSub.title).inject(blank_div, 'bottom'); // Title
    		   var service_description = new Element('p').set('html', oSub.description).inject(blank_div, 'bottom'); // Description
    		   var expand = new Element('div', {'class': 'expanding'}).inject(blank_div, 'bottom'); // Expanding Sub Box
    			if(oSub.sub != undefined){
    			   // Expanding and Colapsing Link
    			   var service_elink = new Element('a', {href: 'javascript:void(0)', onclick: 'expand(this); return false'}).set('html', 'more').inject(service_description); 
    			   oSub.sub.each(function(oSubOptions){
    				var sub_div = new Element('div').inject(expand, 'bottom');
    				var sub_title = new Element('h3').set('html', oSubOptions.title).inject(sub_div, 'bottom'); // Sub Title
    				var sub_description = new Element('p').set('html', oSubOptions.description).inject(sub_div, 'bottom'); // Sub description
    				if(oSubOptions.sub_description != undefined){
    				   var sub_elink = new Element('a', {href: 'javascript:void(0)', onclick: 'expand(this); return false'}).set('html', 'more').inject(sub_description);
    				   var sub_expanding = new Element('div', {'class': 'expanding'}).inject(sub_div, 'bottom'); // Sub Sub Expanding
    				   var sub_sub_description = new Element('p').set('html', oSubOptions.sub_description).inject(sub_expanding, 'bottom'); // Sub Sub Description
    				};
    			   });
    			};
    		});
    	   }
    	});
    	
       };
    This code adds the select box and changes the select box when the select button is changed.
    Code:
    function add_select_box(oSelect, id){
    	var select_box = new Element('div', {id:'select_box'}).inject($('ajax_box'));
    	var formSelectVar = new Element('select');
    	oSelect.each(function(item){
    	   if(item.id == id){
    		var continue_div = new Element('div', {id:'continue'}).inject(select_box);
    		new Element('a', {href:'javascript:void(0)'}).inject(continue_div);
    		if(item.id == id){
    		   // Create each option for the first select box
    		   item.options.each(function(myArray){ 
    			var formOption = new Element ('option').set('html', myArray.title).inject(formSelectVar);
    		   });
    		   new Element('option', {selected:'selected'}).set('html', 'Choose').inject(formSelectVar, 'top');
    		   formSelectVar.inject($('select_box'), 'top' ); // This is the First Select Box
    		   $('ajax_box').getElement('select').addEvent('change', function(){// Listen for the select box to change
    			var categoryValue = $('ajax_box').getElement('select').value;
    			   if($('sub_select')){
    				var formSelectVar = $('sub_select').set('html', '');
    			   }else {
    				var formSelectVar = new Element('select', {id:'sub_select'});
    			   }
    			   // Make a secondary select box for additional options
    			var notdefined;
    			item.options.each(function(myArray){
    			   if(myArray.sub != undefined && myArray.title == categoryValue){
    			   dbug.log('Secondary Select: ', myArray.sub, myArray.title, categoryValue)
    				myArray.sub.each(function(subArray){
    				   var formOption = new Element ('option').set('html', subArray.title).inject(formSelectVar);
    				});
    				notdefined = false;
    			   }else if(myArray.title == categoryValue){
    				dbug.log('Else Dialoge: ', myArray.sub, myArray.title, categoryValue)
    				notdefined = true;
    			   }
    			});
    			dbug.log('Not Defined: ', notdefined);
    			if(notdefined != true){
    			   new Element('option', {selected: 'selected'}).set('html', 'Choose').inject(formSelectVar, 'top');
    			   formSelectVar.inject($('select_box')); // This is the second select box
    			}else{
    			   formSelectVar.dispose();
    			}
    		   });
    		};
    	   }
    	});
       };
    Last edited by styks1987; 08-26-2010 at 04:02 PM.

  • #2
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Issue resolved. See fangs comment here.

    http://www.webdeveloper.com/forum/sh...&is_resolved=1


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •