0

I'm working on creating the public side of a plugin and am getting a javascript error that does not occur when I run the same code outside of Mura or when I run it on jsfiddle.

The javascript is pretty straight forward. It populates a form select based on the value of a different select. Here is a jsfiddle of the html and javascript which works by itself. http://jsfiddle.net/P7ZTz/2/

In my public view of the plugin I have the following.

<cfset rc.$.loadJSLib() />
<cfset rc.pc.addToHTMLHeadQueue("addendaJsInclude.cfm")>

<form name="form" method="post" action="addenda2.cfm" onSubmit="return checkrequired(this)">
<select name="mRoute" onchange="javascript:populateData(this.options[selectedIndex].text)">
    <option value="">Select Route</option>
    <option value="Route 3">Route 3</option>
    <option value="Route 2">Route 2</option>
    <option value="Route 1">Route 1</option>
</select>    

<select name="mSection">
    <option value="">Section</option>
</select>

<input type="submit" name="submit">
</form>

My addendaJsInclude.cfm file includes the following:

var arrayData = new Array();
arrayData[0] = 'Route 1|1|'
arrayData[1] = 'Route 1|2|'
arrayData[2] = 'Route 1|3|'
arrayData[3] = 'Route 1|4|'
arrayData[4] = 'Route 1|5|'
arrayData[5] = 'Route 1|6|'
arrayData[6] = 'Route 1|7|'
arrayData[7] = 'Route 2|1|'
arrayData[8] = 'Route 3|1|'

function populateData( name ) { 
    select = window.document.form.mSection; 
    string = ""; 
    count = 1; 
    select.options.length = count; 
    for( i = 0; i < arrayData.length; i++ ) { 
        string = arrayData[i].split( "|" ); 

        if( string[0] == name ) { 
            select.options[count++] = new Option( string[1] ); 
        } 
    } 
}

function checkrequired(which) {
    var pass=true;
    if (document.images) {
        for (i=0;i<which.length;i++) {
            var tempobj=which.elements[i];
            if (tempobj.name.substring(0,1)=="m") {
                if (((tempobj.type=="text"||tempobj.type=="textarea")&&
                tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&&
                tempobj.selectedIndex==0)) {
                    pass=false;
                    break;
                }
              }
        }
    }
    if (!pass) {
        shortFieldName=tempobj.name.substring(1,12).toUpperCase();
        alert("Please select a "+shortFieldName+".");
        return false;
    }
    else
    return true;
}

When I execute the page in my browser I get the following error in my console:

select is undefined

select.options.length = count;

This seems to be some type of scoping issue, but I'm too much of a javascript novice to know what the issue is.Again, it does run fine on jsfiddle and in a regular html page outside of Mura. As it runs on the client side I'm a little lost why it would behave differently when inside a Mura output. The html and javascript looks the same for both, but the error only occurs in the Mura page. Any input would be greatly appreciated.

Richard A
  • 2,100
  • 15
  • 13
John Sieber
  • 322
  • 2
  • 13
  • First, use the `var` keyword when you declare your `select` variable. Otherwise it will be in the global (window) scope, and could in theory be clobbered by other code. Second, to troubleshoot, add `console.log( window.document.form);` just before `string = "";`, and check the console. You'll see which elements are actually available in the form at runtime. Side note: `select` as a variable name is confusing at best. – Ken Redler Feb 17 '12 at 17:05

2 Answers2

0

Could you try giving selection an ID="mSection" in addition to name="mSection"?

J.T.
  • 2,606
  • 15
  • 31
  • I considered a similar suggestion, however just feels like there's a lot of JS in there that could do with adjusting + the hour was late! Especially as it worked in jsfiddle even if not an ideal method – Simon at The Access Group Feb 17 '12 at 09:19
  • Could you try a different variables name than 'select?' – J.T. Feb 17 '12 at 13:16
  • I tried adding an id value to the select and also changed the select variable name, but I'm still running into the same issue. I simplified the example, http://jsfiddle.net/RdqPD/2/, and even the alert at the top of the function returns as undefined when running it through my Mura page? – John Sieber Feb 17 '12 at 18:30
0

The issue was being caused by cf debug output. Disabling the debug allowed the code to work as expected. This only happened when running the code through Mura, but I guess it is due to the debug showing the display content as a variable.

John Sieber
  • 322
  • 2
  • 13