Web site coding question - Calgarypuck Forums - The Unofficial Calgary Flames Fan Community

photon · 11-08-2012, 02:38 PM

Ok after fighting with this for a while I've finally distilled this down to the very basics.

I've got a select box, and a javascript alert that pops up the value of the select box. That's it. Works fine, except in IE.

Though stripping down a page to nothing then adding things back one by one to figure out what was causing it, I found that if I ad a form tag it mucks things up in IE for a reason I can't fathom, but I'm not a web programmer.

Anyway here's the code for the page:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head></head>
<body>
Hello!<br/>
Outside Form: <select name="test1" id="test1" >
<option value="One" >One</option>
<option value="Two" >Two</option>
</select><br/>
<br/>
<form>
Inside Form: <select name="test2" id="test2" >
<option value="One" >One</option>
<option value="Two" >Two</option>
</select>
<a href="javascript:alert(test2.value);">Add1</a>
</form><br/>
Outside Form: 
<a href="javascript:alert(test1.value);">Add2</a>
</body>

If you click the Add2 link it pops up the value of test1 fine. If you click the Add1 link it doesn't work, and console says "SCRIPT5009: 'test2' is undefined".

Except it's right there.

Works fine in Firefox and Chrome, but not in IE9.

Am I doing something wrong and Chrome/Firefox is just covering for it? Is there a more verbose way to address test2 that I'm missing?

psyang · 11-08-2012, 03:07 PM

It's sort of like a namespace issue. You could solve this in a couple ways.

1) Name the form, then access test2 via the form:

Code:

<form id="frm">
Inside Form: <select name="test2" id="test2" >
<option value="One" >One</option>
<option value="Two" >Two</option>
</select>
<a href="javascript:alert(frm.test2.value);">Add1</a>
</form><br/>

2) Use document.getElementById to get the element regardless of the hierarchy:

Code:

<form>
Inside Form: <select name="test2" id="test2" >
<option value="One" >One</option>
<option value="Two" >Two</option>
</select>
<a href="javascript:alert(document.getElementById('test2').value);">Add1</a>
</form><br/>

I normally always use document.getElementById, or the equivalent in whatever javascript framework I'm using ($(#) in jquery, Ext.get in extjs) to avoid this issue. The DOM is hierarchical, and I'm actually a little surprised that Firefox and Chrome flatten the hierarchy for form controls.

getbak · 11-08-2012, 03:09 PM

Yup. I second that.

photon · 11-08-2012, 03:34 PM

Awesome thanks!

Makes total sense now too, it's nice I guess when FireFox/Chrome help out but when all the example code I could find runs on the assumption that they will do that, it's kind of annoying lol.

I'm not actually writing the javascript myself, the framework I'm using has stuff in it where I just say what remote methods to call and what data to transfer and it creates the javascript automagically, but this obviously highlights the downside of that way; the programmer doesn't learn nuthin unless there's a big problem and they have to dig

psyang · 11-08-2012, 03:56 PM

Usually frameworks are great because they hide the ugly details of cross-browser support. Unfortunately, the framework your using missed this little bit. But, as you say, makes for a great learning moment

photon · 11-08-2012, 04:18 PM

It's still kind of on me because when I'm creating the code to generate the ajax, I have to build the params of the URL myself, so it looks something like

Code:

<select onchange="${remoteFunction(
				controller: 'aController',
					action: 'anAction',
					params: '\'obj.id=\' + document.getElementById(\'element\').value',
					update: 'anotherElement'
			)}" etc

(Last night I had a nightmare about nested escaped apostrophes in a markup language, unrelated I'm sure)

The examples and documentation all have "element.value" instead of document.getElementById('element').value of course.

Now I get a different issue, the update portion (which basically replaces the markup for the element defined by the update field) doesn't work, or it seems to but the region dropdown is empty, but I'll have to debug that another day, and that's definitely a jQuery thing being called.

EDIT: And people ask me why I try and stick with server side programming.

EDIT2: And fixed the second one, I guess the update part expects a div tag so I put the select I was updating in a div tag and updated that instead and it works, again worked fine in Firefox/Chrome but not in IE, probably the same issue in the background.

psyang · 11-08-2012, 04:58 PM

Something doesn't quite look right with the syntax in your code snippet.

First, the parameters you are passing into remoteFunction look like malformed json. You are missing {} around the property/value pairs.

Second, the params property value doesn't look quite right - the quotes aren't lining up properly.

Third, if you are using jQuery, you should use their built-in functions for getting the element value ($('#<element id>').val()). It's a bit cleaner, and will leverage jQuery's cross-browser support.

Maybe it should read something like:

Code:

<select onchange="${remoteFunction( {
				controller: 'aController',
				action: 'anAction',
				params: '\'obj.id=' + $('#element').val()+ '\'',
				update: 'anotherElement'
			})}"

Finally, that params value looks a little non-standard. As I've written it above, what will get passed in params is the following string (with the single quotes):

'obj.id=myElementValue'

where myElementValue is the value of the element. Is this correct?

I have a love-hate relationship with javascript, though more on the love side the last couple years. I like the way you can pass scope around like lisp closures, and the dynamic nature of the language is very useful at times. I wouldn't mind if it were more strongly typed, and had better IDE support, though. And a compiler to catch all the silly errors and typos would be nice too.

photon · 11-08-2012, 06:10 PM

Yeah it looks off because the onchange string is something else, either Groovy, or something for the Grails framework to replace anyway. That's why it's got the crazy apostrophe escaping, it's going in and out of the scope of the framework language and javascript inside the markup. It's not a javascript function, it's a call to create a javascript function.

When I render the page I actually get this in the final page:

Code:

onclick="jQuery.ajax({
type:'POST',
data:'obj.id=' + document.getElementById('ele').value + '&obj2.id=' + document.getElementById('ele2').value +'&id=' + 2, 
url:'/url/to/anAction',
success:function(data,textStatus){jQuery('#targetDiv').html(data);},
error:function(XMLHttpRequest,textStatus,errorThrown){}
});"

It is kinda cool because I don't have to worry about paths or anything, it just wires everything up for me. The "2" in there is actually from a domain object.

I'll try the jquery thing to get the element value, though I have to be careful since the framework is kind of intended to be javascript framework agnostic (i.e. I change one thing and it'll use prototype everywhere instead). There might be a better way to access that value that leverages that, but I'm still a web n00b with Groovy/Grails, everything I've done so far is 100% back end stuff.

EDIT: Funny you say that about Javascript, I'm an old stuffy developer who holds onto his strongly typed languages with a death grip, I use Groovy a lot now which is kinda like Javascript in how dynamic it can be (just def varName and away I go, or add a property if I need it when I need it), but since it's Java underneath I usually still like to do List<DomainObject> list rather than def list. And in the roadmap for Groovy going forward they're talking about more strong typing!

I guess I just use as much of the syntactic sugar as I like and really like the convention over configuration vs. 1 million XML files of Struts or Spring, but I still like the comfort of strong types and the compiler / IDE support that that can bring.

I don't mind Javascript so much I guess, it's more browsers I hate.

psyang · 11-08-2012, 11:49 PM

I agree - browser differences are what brings the whole client-side development experience down. 99% of the problems are with IE, though thankfully that has improved a lot since IE8.

Regarding type safety, type inference allows you to have strongly-typed languages that look weakly-typed. In University, I fell in love with a language called ML which is like a strongly-typed version of lisp. I remember writing a 30 line piece of ML code that was a fully functional ML type checker - pass any ML program in as input, and it will return whether the program type-checks ok or not. It was as close to magic as I've felt in software development.

Happily, they're starting to introduce similar ideas in .NET (sorry, I'm a C# guy, never did much java) with lambdas and var declarations. It's nice to be able to write:

var x = new Dictionary<string,MyObject>();

and have the IDE know what x's type is, and provide intellisense on its properties/methods.