Web Analytics Made Easy -
StatCounter Very Weird Problem - insight? - CodingForum

Announcement

Collapse
No announcement yet.

Very Weird Problem - insight?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Very Weird Problem - insight?

    I have this code:

    Code:
    function editForm()
    {
    	var allLists = document.getElementById('inv_editValues').getElementsByTagName('ul'); 
    	for(var i=0; i < allLists.length; i++)
    	{
    		var listElement = allLists[i]; 
    		var listId = allLists[i]['id']; 
    		var listItem = document.getElementById(listId).getElementsByTagName('li'); 
    		var editValue = listItem[0].innerHTML;
    		
    		var allFormElements = document.forms[0].elements; 
    		for(var j=0; j < allFormElements.length; j++)
    		{
    			var formElement = allFormElements[j]; 
    			var formElementId = allFormElements[j]['id']; 
    			var targetElementId = listId.substring(5,(listId.length)); 
    			
    			if(formElementId == targetElementId)
    			{
    				var formElementType = formElement.getAttribute('type'); 
    				
    				// for Text Boxes 
    				if(formElementType == "text")
    				{
    					formElement.value = editValue; 
    				}
    				
    				if(formElementType == "select-one")
    				{
    					var ddLists = document.getElementById('inv_dDValues').getElementsByTagName('ul'); 
    					for(var k=0; k < ddLists.length; k++)
    					{
    						var ddList = ddLists[k]; 
    						var ddListId = ddLists[k]['id']; 
    						var targetListId = "dd_"+targetElementId;
    						if(ddListId == targetListId)
    						{
    							
    							var ddListItems = document.getElementById(ddListId).getElementsByTagName('li'); 
    							for(var l=0; l < ddListItems.length; l++)
    							{
    								if(l%2 != 0)
    								{
    									var ddListItem = ddListItems[l]; 
    									var ddListItemValue = ddListItem.innerHTML; 									
    									if(ddListItemValue == editValue)
    									{
    										var indexToAssign = (l/2)+0.5;
    										alert(indexToAssign); 
    										formElement.selectedIndex = indexToAssign; 
    									}
    								}
    							}
    						}
    					}
    				}
    				
    				if(formElementType == "checkbox")
    				{
    					if(editValue == "isChecked")
    					{
    						formElement.checked = true; 
    					}
    				}
    				
    				if(formElementType == "textarea")
    				{
    					formElement.innerHTML = editValue; 
    				}
    				
    				if(formElementType != "text" && formElementType != "select-one" && formElementType != "checkbox")
    				{
    					
    				}
    				
    			}
    		}
    	}
    }
    
    
    
    addLoadEvent(editForm);
    If you move your attention to the line in the if(formElementType == "select-one") section where this code appears:

    "var indexToAssign = (l/2)+0.5; alert(indexToAssign);
    formElement.selectedIndex = indexToAssign;"


    This whole script is working fine for me in the browser I'm developing for: IE, the only problem is that if I remove the alert(indexToAssign); from the document my dropdowns no longer are assigned any values by IE.

    I'm not exactly stupid but I have no idea why this behavior is taking place. Alerting a value shouldn't really have an effect here should it?

  • #2
    Yeah, this is a problem that's somewhat known. There's a delay between populating a select element with options programatically and them being available programatically. It's fruggin in annoying. The reason the alert helps is because it delays the script and allows the browser to prepare the options list. There is a way around this without using alert, but you still have to use something else. I can't remember how I solved this previously, I can't find my code right now, but you have to do something else in place of the alert to accomplish the same thing silently. I think it might have been form.reset I did because I could, but you might not be able to do that.

    It's a terrible problem, but, there's someway around it. Try a few things, you'll figure it out soon. Report back with what works, if you don't mind.

    Comment


    • #3
      Well, I wish I knew the solution. I'll work on it, at least I'm not going crazy. Seems the more complex my scripts get the weirder the problems are.

      Comment


      • #4
        If anybody knows the solution that Beagle mentioned, I would find it extremely useful. Otherwise this edit script works perfect for me. So I'd really like to use it if I could find a way to workaround this problem.

        Comment


        • #5
          Well what EXACTLY have you tried? It seems to me that you may not be trying as hard as you could be trying.
          ||||If you are getting paid to do a job, don't ask for help on it!||||

          Comment


          • #6
            You can try doing the assignments using setTimeout and just delay it by a bit. You can try to access the value of the element first and see if that triggers it. You can try assigned the value to the previous element in the loop (so you generate one, you iterate, you generate another, set the value of the previous, this requires an extra iteration to accomplish).

            That's just a top-of-the-head list of things to try. You may find something else. Maybe setting a style attribute. Realize that this is a stupid, non-rational bug, and the goal is to force it to take a specific step. To solve it, you have to think of unrelated things that might force it to do something, so think of the various page and element properties you can manipulate and do what you can to find a performant solution.

            Comment


            • #7
              Originally posted by _Aerospace_Eng_ View Post
              Well what EXACTLY have you tried? It seems to me that you may not be trying as hard as you could be trying.
              You're right, but I'm in a hurry - I was up all night writing that edit function and wanted to get it fixed before I left work in the morning. I'll figure it out - I just thought this was a suitable forum for discussing problems and asking for solutions.

              Thanks for all the suggestions Beagle. I'll give them a try. I had been trying to set a timeout before assigning the selectedIndex but when I do:

              Code:
              setTimeout("formElement.selectedIndex = indexToAssign", 1000);
              My page errors out. IE tells me that 'formElement' is undefined here, I believe this is because I have to call a function in my setTimeout and not a regular line of code. If I try to set up a function and pass variables such as formElementId and indexToAssign to that function, they come out as undefined. If I define these as global variables instead and attempt to call on them in a function I call on using setTimeout() - I only am able to pull out the values from the last iteration of the loop. I'm not sure what to do.

              If I figure it out, I'll let you guys know.

              PS - I have another question. How is my code? I've been coding JavaScript for about a month now for a printing press actually (ha). They don't need me here permanently. I'm pretty good with PHP and have a lot of experience with design work and Flash for those who want it.

              Would people hire me?
              Last edited by ruggeddesign; Oct 10, 2006, 03:11 PM.

              Comment


              • #8
                to answer your first problem, the reason it's breaking is because timeout and interval change the scope of the execution. What you need is

                setTimeout(function(){var x = formElement; x.selectedIndex = indexToAssign;}, 1000);

                This should keep your variables pointing to the correct object, but it might fail still. Double check that. There IS a way to solve that issue.

                As for your coding, don't loop against things that have to resolved (like x.length). Store the value and loop against the value. I tend not to use the var keyword in a loop (except in creating anonymous functions) but there's not any real side-effects that will occur if use them. I just tend to declare my loop variables outside of my loops first.

                Code:
                var formElement = allFormElements[j]; 
                var formElementId = allFormElements[j]['id'];
                would be better as:
                Code:
                var formElement = allFormElements[j]; 
                var formElementId = formElement['id'];
                again because resolving properties costs.

                Otherwise, you're pretty solid.

                Comment


                • #9
                  Thank you for clarifying about the setTimeout() function. I haven't really had cause to use it yet. Unfortunately, it still doesn't work - but that was still helpful.

                  I wasn't entirely clear about what you meant by:

                  "You can try assigned the value to the previous element in the loop (so you generate one, you iterate, you generate another, set the value of the previous, this requires an extra iteration to accomplish)."

                  Probably nothing like what you meant, but what I tried was creating a new Paragraph element on the page next to the dropdown, with a class of "ddValue" and ID of "formElementId" and innerHTML="indexToAssign". And then in a separate function, finding the paragraph elements next to the dropdowns, looking at their inner HTMLs, finding their corresponding <select> elements and assigning the selectedIndex property the innerHTML of the Paragraph element.

                  No Luck. It turns out that I don't actually have to alert(indexToAssign) for it to make a difference. I just have to alert something. Which is a pain in the ***.

                  I was thinking it might be possible to open up a popup window instead of an alert. Perhaps I could have some sort of "LOADING FORM" graphic on this window and it can close itself automatically (this way it will still look like its working seamlessly and that the loading graphic is there for accessibility purposes). Well, I'm going to go try to learn how to make popup windows.

                  -------- - - - - - - - - - - - - - -

                  No, the popup windows don't work.

                  -------- - - - - - - - - - - - - - -

                  If you ever remember what you did when you fixed it Beagle -
                  Last edited by ruggeddesign; Oct 10, 2006, 04:50 PM.

                  Comment


                  • #10
                    Is there a way to automatically close an alert box after it opens?

                    Comment


                    • #11
                      No, you don't want to use alerts. There is some way of solving this without alerts. I'm sorry I don't have it for you. Perhaps you need to think about some other way of doing this. Maybe instead of setting the options with innerHTML, you can generate each one individually with DOM methods. Or maybe you can modify the HTML to put selected="selected" in the option tag before loading it into the innerHTML.

                      Comment


                      • #12
                        I am sorry to bring this up again, I have been running the edit function with alerts for days while I work on the rest of the project. It is frustrating.

                        Beagle, you suggest inserting the word "SELECTED" into the option tag. I used to do this with PHP when I had each OptionValue/innerHTML hardcoded into the form. I am currently using DOM Methods to populate my <select> elements. I understand that SELECTED works like this:

                        Code:
                        <select name="test" id="test">
                           <option value="0" SELECTED>Zero</option>
                           <option value=1">One</option>
                        </select>
                        Where "Zero" would be the selected option. However, I am entirely unsure of how I would use DOM to insert the text SELECTED into an <option> tag.

                        I am generating my <selects> like this:

                        Code:
                        var newOption = document.createElement("option"); 
                                  newOption.setAttribute("value",optionValue); 		
                        selectElement.appendChild(newOption); 		
                        newOption.appendChild(document.createTextNode(optionDisplay));
                        So, basically, I understand how to create tags in DOM, set attributes of those tags, and put things between tags. But I do not know how to put the static text "SELECTED" inside of a tag. Can you clarify?

                        Comment


                        • #13
                          Get a copy of Firefox and learn to use the DOM inspector. It's a great way for finding interesting properties. If you have a pointer to the option element, you need to the defaultSelected property to true, but I don't know if that will help you. You might try setting the selected property, I'm not sure if that's the right one, like I said, use the DOM inspector. It's a great resource.

                          Comment


                          • #14
                            Thanks Beagle for your help. Something you said popped into my mind tonight somewhere through my second caffeine fix. Instead of assigning the selectedIndex of the <select> element, I reworked the code just a bit and now use the following:

                            Code:
                            if(m==indexToAssign) { optionElement.setAttribute('selected','true'); }
                            This seems to be the most appropriate workaround for this JS Bug (if that's what the problem actually was).

                            Comment

                            Working...
                            X