Categories > TinyButStrong general >

javascript troubles

The forum is closed. Please use Stack Overflow for submitting new questions. Use tags: tinybutstrong , opentbs
By: Jared
Date: 2005-07-22
Time: 07:01

javascript troubles

Hello,

I am having trouble with a javascript function. It is a dependent select script. I want to use my existing code, here it is modified to work with TBS
<script language="JavaScript" type="text/JavaScript">
  document.MYFORM.__SELECT2__.disabled = true
  var groups=document.MYFORM.__SELECT1__.options.length
  var group=new Array(groups)
 
  for (i = 0; i < groups; i++) {
    group[i]=new Array()
  }
 
 
  group[0][0]=new Option("select 2","0");

[jCAT.$;block=begin]
  group[[jCAT.iid]][0]=new Option("select 2","0");
[man.key;block=begin;p1=[jCAT.$];magnet]
  group[[jCAT.iid]][]=new Option("select 2","[man.jid");
[man;block=end]
[jCAT;block=end]

    var temp=document.MYFORM.__SELECT2__
    function redirect(x) {
      for (m=temp.options.length-1;m>0;m--) {
        temp.options[m]=null
      }
      for (i=0;i<group[x].length;i++){
        temp.options[i]=new Option(group[x][i].text,group[x][i].value)
      }
      temp.options[0].selected=true

      if (document.MYFORM.__SELECT1__.value == "0") {
        document.MYFORM.__SELECT2__.disabled = true
      } else {
        document.MYFORM.__SELECT2__.disabled = false
      }
    }
</script>

This is the PHP portion:
    $TBS->MergeBlock('jCAT','array','tmp') ;
    $TBS->MergeBlock('man','array','tmp[%p1%][man]') ;

The html section looks like this:
<select name="__SELECT1__" onChange="redirect(this.options.selectedIndex)">
<option value="0" selected>Select 1</option>
<option value="[iCAT.iid;block=opt]"><font class="swh">[iCAT.iname;block=opt]</font></option>
</select>

<select name="__SELECT2__">
<option value="0" selected>Select 2</option>
</select>

So I think one of the problems is that it's not producing the correct group array. Does TBS have a counter variable I can access while it's looping through my block->sub block section of the javascript ?

The group array that is being produced looks like this:
  group[3][0]=new Option("Make","0");
  group[3][]=new Option("Bentley","4");
  group[3][]=new Option("BMW","1");
  group[3][]=new Option("Lexus","3");
  group[3][]=new Option("Mercedes-Benz","2");
  group[3][]=new Option("","");
  group[3][]=new Option("","");

  group[2][0]=new Option("Make","0");
  group[2][]=new Option("Chevrolet","8");
  group[2][]=new Option("Mazda","6");
  group[2][]=new Option("Toyota","5");
  group[2][]=new Option("Volvo","7");
  group[2][]=new Option("","");
  group[2][]=new Option("","");

  group[1][0]=new Option("Make","0");
  group[1][]=new Option("Acura","12");
  group[1][]=new Option("BMW","9");
  group[1][]=new Option("Lamborghini","11");
  group[1][]=new Option("Porsche","10");
  group[1][]=new Option("","");
  group[1][]=new Option("","");

  group[5][0]=new Option("Make","0");
  group[5][]=new Option("Ford","13");
  group[5][]=new Option("Hummer","14");
  group[5][]=new Option("Nissan","16");
  group[5][]=new Option("Toyota","15");
  group[5][]=new Option("","");
  group[5][]=new Option("","");
But, I need it to look like this:
  group[1][0]=new Option("Make","0");
  group[1][1]=new Option("Bentley","4");
  group[1][2]=new Option("BMW","1");
  group[1][3]=new Option("Lexus","3");
  group[1][4]=new Option("Mercedes-Benz","2");

  group[2][0]=new Option("Make","0");
  group[2][1]=new Option("Chevrolet","8");
  group[2][2]=new Option("Mazda","6");
  group[2][3]=new Option("Toyota","5");
  group[2][4]=new Option("Volvo","7");

  group[3][0]=new Option("Make","0");
  group[3][1]=new Option("Acura","12");
  group[3][2]=new Option("BMW","9");
  group[3][3]=new Option("Lamborghini","11");
  group[3][4]=new Option("Porsche","10");

  group[4][0]=new Option("Make","0");
  group[4][1]=new Option("Ford","13");
  group[4][2]=new Option("Hummer","14");
  group[4][3]=new Option("Nissan","16");
  group[4][4]=new Option("Toyota","15");

Also, how can I get rid of the blank new Option("",""); sections?
By: Skrol29
Date: 2005-07-22
Time: 22:32

Re: javascript troubles

Hi Jared,

Here is what I would do:
[jCAT;block=begin] group[[jCAT.$]][]=new Option("Make","0");
  [man;block=begin;p1=[jCAT.$]] group[[jCAT.$]][]=new Option("[man.name;htmlconv=js]","[man.jid]");
  [man;block=end]
[jCAT;block=end]

And to avoid blanks items, I would use conditional sections. Available since version 2.02.
Change:
[man;block=begin;p1=[jCAT.$]]
with:
[man;block=begin;p1=[jCAT.$];when '[man.name;htmlconv=esc]'!='']


By: Jared
Date: 2005-07-22
Time: 23:52

Re: javascript troubles

Thanks Skrol29, I stayed up late last night and worked out that exact solution. The solution I came up to give my group array's sequential indexes was to do this:

var count1 = 0;
var count2 = 0;
 
[jCAT.$;block=begin]
  count2 = 1;
  group[count1]=new Array();
  group[count1][0]=new Option("Make","0");
[man.key;block=begin;p1=[jCAT.$];when [man.jid] != '']
  group[count1][count2]=new Option("[man.jname;htmlconv=js]","[man.jid;htmlconv=js]");
  count2++;
[man;block=end]
count1++;
[jCAT;block=end]

SO this is generating dynamic selects for me now, but I am having trouble with the second menu data not matching the first menu data. I have a feeling it's the way the array's are being looped through.

If anyone wants to see my soultion, I'll post all the code when I am done.
By: Jared
Date: 2005-07-23
Time: 00:06

Re: javascript troubles

Ohh man, hate those small mistakes that take so long to figure out.

I needed to initialize count1 to the value of 1 to begin with, not the value of 0.

So, if anyone wants some example code on how to put together another version of a 2 menu dependent select, let me know.

- Jared
By: Skrol29
Date: 2005-07-23
Time: 01:24

Re: javascript troubles

[jCAT.*] and [man.*] are TBS record counters that begin at 1.
But I tougth you'd prefere to begin at 0.
Try them.
By: Jared
Date: 2005-07-23
Time: 04:57

Re: javascript troubles

Hmm, I would like to use that solution to generate cleaner code. I am getting an error when I use it though.

TinyButStrong Error (Array value): Can't merge [jCAT.*] because sub-item '*' is not an existing key in the array. This message can be cancelled using parameter 'noerr'.
By: Skrol29
Date: 2005-07-27
Time: 15:52

Re: javascript troubles

Sorry,

It is [jCAT.#] and [man.#] but not
[jCAT.*] and [man.*].
By: Jared
Date: 2005-07-27
Time: 20:18

Re: javascript troubles

Cool, that cleaned up the sloppy solution I came up with. Thanks!