7 Replies Latest reply on Dec 10, 2008 7:38 AM by Dan Bracuk

    A Help with Javascript+coldfusion

    newchickinCF Level 1
      Hi I am working on aproject

      I have categories and sub categories show dynamically. One of my categories is TEXT which has the id of 1..

      I want to show/hide a uploadbox if the category of TEXT is selected. I have two javascript functions which i try to run in one select but it is failing for some reason..

      Here is the code:

      <cfinvoke component="cfc1" method="subcategories" returnvariable="getDetals"/>
      <script language="JavaScript1.2">
      function populate(obj) {
      var subcats = new Array(
      <cfoutput query="getDetals" group="maincategoryName">
      <cfoutput>new Array(#currentrow-1#,"#catID#","#subcategory#","#mainID#")<cfif currentrow NEQ recordcount>,</cfif></cfoutput>
      </cfoutput>);
      obj.subcat.options.length = 0;
      obj.subcat[0] = null;
      var optc = 0;
      for(i=0;i<subcats.length; i++) {
      if(subcats [3] == obj.cat_ID.value) {
      obj.subcat[optc] = new Option(subcats
      [2],subcats [1]);
      optc++;
      } else {
      obj.subcat[0] = new Option("- Please select a category -","null");
      }
      }
      }
      function handleChange(v) {
      if(v==2 || v==3) {
      document.getElementById('uploadarea').style.display='';
      } else {
      document.getElementById('uploadarea').style.display='none';
      }
      }
      </script>

      <tr>
      <td>Select Category:</td>
      <td>
      <select name="cat_ID" onchange="populate(this.form); handleChange(this.options[this.selectedIndex].value);">
      <option selected="selected">- Select a Category -</option>
      <cfoutput query="getDetals" group="maincategoryName">
      <option value="#mainID#">#maincategoryName#</option>
      </cfoutput>
      </select>
      </td>
      </tr>
      <tr>
      <td>Select Subcategory:</td>
      <td>
      <select name="subcat">
      <option>- Please select a category -</option>
      </select>
      </td>
      </tr>
      <div id="uploadarea" style="display:none">
      <tr>
      <td>Upload File:</td>
      <td><input type="file" name="upload" /> </td>
      </tr>
      </div>

      But due to some cause it is not running as expected...

      Don't showing any error. too.

      Plz help Me Guys

      Cheers

      if(v==2 || v==3) is getting value from main select category option value
        • 1. Re: A Help with Javascript+coldfusion
          Dan Bracuk Level 5
          I use window.alert() to debug js. Start by putting one at the very start of your function just to make sure your function is getting called properly. Then keep moving it down and looking at variables.

          The syntax is
          window.alert("static text " + variable);
          • 2. Re: A Help with Javascript+coldfusion
            newchickinCF Level 1
            i tried but i think something is wrong at onChange [it does not execute]
            • 3. Re: A Help with Javascript+coldfusion
              Dan Bracuk Level 5
              That's valuable information. Since you are calling two functions, have you figured out which one is not executing?
              • 4. Re: A Help with Javascript+coldfusion
                spill-wjzVEv
                I'm no javascript expert, but I've recently started learning how to use jQuery and I have found Firefox/Firebug indespensible when trying to do anything with javascript.

                Especially as you can use console.log(); for debugging.
                • 5. Re: A Help with Javascript+coldfusion
                  Level 7
                  try this:

                  onchange="populate(this.form);handleChange(this.value);"

                  i am also not sure that this bit in your js is right:
                  else {
                  obj.subcat[0] = new Option("- Please select a category -","null");
                  }

                  but that's just from a quick glance at your code... i may be wrong...

                  Azadi Saryev
                  Sabai-dee.com
                  http://www.sabai-dee.com/
                  • 6. Re: A Help with Javascript+coldfusion
                    newchickinCF Level 1
                    I used the window.alert but tested in chrome and it give this error:

                    Chrome JavaScript Debugger
                    Type 'help' for a list of commands.
                    attached to World Of Jokes, Jokes Arena
                    uncaught exception ReferenceError: subcat is not defined

                    <cfinvoke component="core.cfc.jokes" method="subcategories" returnvariable="getDetals"/>
                    <script language="JavaScript1.2">
                    function populate(obj) {
                    var subcats = new Array(
                    <cfoutput query="getDetals" group="maincategoryName">
                    <cfoutput>new Array(#currentrow-1#,"#catID#","#subcategory#","#mainID#")<cfif currentrow NEQ recordcount>,</cfif></cfoutput>
                    </cfoutput>);
                    obj.subcat.options.length = 0;
                    window.alert("static text " + subcat);
                    obj.subcat[0] = null;
                    var optc = 0;
                    for(i=0;i<subcats.length; i++) {
                    if(subcats [3] == obj.cat_ID.value) {
                    obj.subcat[optc] = new Option(subcats
                    [2],subcats [1]);
                    optc++;
                    } else {
                    obj.subcat[0] = new Option("- Please select a category -","null");
                    window.alert("static text " + subcat);
                    }
                    }
                    }
                    window.alert("static text " + subcat);
                    function handleChange(v) {
                    if(v==2 || v==3) {
                    document.getElementById('uploadarea').style.display='';
                    } else {
                    document.getElementById('uploadarea').style.display='none';
                    }
                    }
                    window.alert("static text " + subcat);
                    </script>

                    <select name="cat_ID" onChange="populate(this.form); handleChange(this.options[this.selectedIndex].value);">
                    <option selected="selected">- Select a Category -</option>
                    <cfoutput query="getDetals" group="maincategoryName">
                    <option value="#mainID#">#maincategoryName#</option>
                    </cfoutput>
                    </select>

                    <tr>
                    <td>Select Subcategory:</td>
                    <td>
                    <select name="subcat">
                    <option>- Please select a category -</option>
                    </select>
                    </td>
                    </tr>
                    <div id="uploadarea" style="display:none">
                    <tr>
                    <td>Upload File:</td>
                    <td><input type="file" name="upload" /> </td>
                    </tr>
                    </div>
                    • 7. Re: A Help with Javascript+coldfusion
                      Dan Bracuk Level 5
                      That's valuable information. It means either you were not able create the subcat variable or that you can't put arrays into alerts. I've never tried to do that so I don't know if it's possible.