I worked on a page that has MooTools in it and now the MooTools is not working.
It is supposed to detect when a change has been made to a dropdown and save the change and the field flashes green. I didn't change any part of the page that has the MooTools in it, so I don't know why it stopped working.
Here are parts of the page:
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/mootools/1.5.1/mootools-yui-compressed.js"></script>
</head>
<body>
<select name="eoirclin[0]" style="width: 130px;" class="eoirclin" data-idx="0>
<option value="0">Select...</option>
<option value="1001">Paper Only</option>
<option value="1002">PDF Only</option>
<option value="1003">PDF + 1 Paper</option>
<option value="1004" selected="selected">PDF + 3 Paper</option>
<option value="5001">On Site Trx</option>
</select>
<script type="application/javascript" language="JavaScript">
$$('.eoirclin').each(function(el) {
el.addEvent('change', function(ev) {
ev.preventDefault();
var jobid = 228828;
var idx = this.getProperty('data-idx');
var clin = this.value;
var that = this;
new Request.JSON({
url: 'http://##/saveclin/' + jobid + '/' + idx + '/' + clin,
onSuccess: function(ret) {
//console.log(ret);
var bgcolor = 'lightgreen';
if (ret.result !== 'OK') {
bgcolor = 'lightpink';
}
that.setStyle('background-color', bgcolor);
setTimeout(function() {
that.setStyle('background-color', 'white');
}, 250);
}
}).get();
});
});
</script>
I am very new to MooTools, so any help figuring this out would be much appreciated.
EDIT: So it seems as though everything is working fine until the new Request.JSON({
line.
After hours of pulling my hair out, it turns out that there was a double quote missing in the PHP code that generated the dropdown. That meant that one of the variables in the MooTools was coming out wrong and stopped everything working.