www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] IE Browser Select Box Issue (MooTools)

  1. #1
    Join Date
    Aug 2010
    Posts
    27

    resolved [RESOLVED] 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();
    			}
    		   });
    		};
    	   }
    	});
       };

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    The select options do not have values which are necessary for IE to send a selected value. I would expect MooTools to fix this, but without having read your code, perhaps this is the root of the problem.

  3. #3
    Join Date
    Aug 2010
    Posts
    27
    ok thanks! I will test that today.

    Mike

  4. #4
    Join Date
    Aug 2010
    Posts
    27
    You are the man fang! Thank you so much! It is always something so small...

  5. #5
    Join Date
    Aug 2010
    Posts
    27
    I do not know much about pre loaders but the page loaded fine for me in IE 8.

    Mike

  6. #6
    Join Date
    Aug 2010
    Posts
    27
    Sorry, I saw the email then forgot about it!

    Here are screen shots from IE8 and IE6. I do not have IE7.

    Mike
    Attached Images Attached Images

  7. #7
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Quote Originally Posted by styks1987 View Post
    Sorry, I saw the email then forgot about it!

    Quote Originally Posted by styks1987 View Post
    Here are screen shots from IE8 and IE6. I do not have IE7.
    If you have IE8 you have IE7: http://msdn.microsoft.com/en-us/libr...9.aspx#bdmodes

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles