Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Show new values, based on first category selection 1

Status
Not open for further replies.
youradds

youradds

Programmer
Jun 27, 2001
817
GB
Hi,

I'm trying to find a bit of code that will do the following:

1) You have a SELECT field called "catidselect", which has a list of a load of categories (with values held as "ID" numbers)
2) Someone selects one of the categories, and then a new SELECT field (called "catid") is updated with a list of categories that exist in and array (?) , ready for people to just select that.

I'm 100% sure this is possible, but can't find any code samples anywhere :/

Any ideas?

TIA

Andy
 
Sort by date Sort by votes
Hi,

Thanks.

I'm using FF - how exactly do I use this one "Live HTTP Headers" ?

TIA

Andy
 
Upvote 0 Downvote
Hi,

Just took a look at the "Error Consol" in FF, and noticed I had an error in the code.

However, I've corrected this now - and it still doesn't work:


Code: 
    <script type="text/javascript">
    <!--
    $(function () {
        var cat = $('#categorySelect');
        var el = $('#elementSelect');
        var attr = $('#attributeSelect');
        var catselect = $('#catSelect');
        
        el.selectChain({
            target: attr,
            url: 'select-chain-test.php',
		    data: { ajax: true, anotherval: "anotherAction", 'CatDepth': 1 }
        });        

        // note that we're assigning in reverse order
        // to allow the chaining change trigger to work
        cat.selectChain({
            target: el,
            url: 'select-chain-test.php',
		    data: { ajax: true, CatDepth: 0 }
        }).trigger('change');

    });
    //-->
    </script>

TIA

Andy
 
Upvote 0 Downvote
Hi

Andy said:
how exactly do I use this one "Live HTTP Headers" ?
Click to expand...
It makes accessible a sidebar, an info tab and a window.
[ul]
[li]View | Sidebar | LiveHTTPHeaders ( Ctrl-Shift-L )[/li]
[li]Page Info ( Ctrl-I ) | Headers[/li]
[li]Tools | Live HTTP Headers[/li]
[/ul]
Basically all tree displays the sent and received HTTP headers, plus some related functionality.

I would say the problem is somewhere on the server-side. The request to returns this :

[tt]select * from glinks_Category where Full_Name = "null"[][/tt]

Probably you forgot to remove the debugging [tt]echo[/tt] from the PHP script.

Feherke.
 
Upvote 0 Downvote
Upvote 0 Downvote
Yay, almost there!

The final code is,

Code: 
<?php
if (@$_REQUEST['ajax']) {
    $link = mysql_connect('db162.server.de', 'dbo271138635', 'pass');
    if ($link == false)
    	trigger_error('Connect failed - ' . mysql_error(), E_USER_ERROR);

    $connected = mysql_select_db('db271138635', $link);
    
    if ($connected) {
		$results = mysql_query('select * from glinks_Category where Full_Name LIKE "' . $_REQUEST['category'] . '/%" and CatDepth=' . $_REQUEST['CatDepth']);
        $json = array();
        
        while (is_resource($results) && $row = mysql_fetch_object($results)) {
            $json[] = '"' . $row->Full_Name . '"';
        }
        
        echo '[' . implode(',', $json) . ']';
        die(); // filthy exit, but does fine for our example.
    } else {
        user_error("Failed to select the database");
    }
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html lang="en">
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title>Select Chain</title>
    <style type="text/css" media="screen">
    <!--
      BODY { margin: 10px; padding: 0; font: 1em "Trebuchet MS", verdana, arial, sans-serif; }
      BODY { font-size: 100%; }
      H1 { margin-bottom: 2px; font-family: Garamond, "Times New Roman", Times, Serif;}
      DIV.selHolder { float: left; border: 3px solid #ccc; margin: 10px; padding: 5px;}
      TEXTAREA { width: 80%;}
      FIELDSET { border: 1px solid #ccc; padding: 1em; margin: 0; }
      LEGEND { color: #ccc; font-size: 120%; }
      INPUT, TEXTAREA { font-family: Arial, verdana; font-size: 125%; padding: 7px; border: 1px solid #999; }
      LABEL { display: block; margin-top: 10px; } 
      IMG { margin: 5px; }
      SELECT { margin: 10px; width: 300px; }
    -->
    </style>

    <script src="jquery.js" type="text/javascript"></script>
    <script src="select-chain.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
    <!--
    $(function () {
        var cat = $('#categorySelect');
        var el = $('#elementSelect');
        var attr = $('#attributeSelect');
        var catselect = $('#catSelect');
        
        el.selectChain({
            target: attr,
            url: 'select-chain-test.php',
		    data: { ajax: true, anotherval: "anotherAction", 'CatDepth': 2 }
        });        

        // note that we're assigning in reverse order
        // to allow the chaining change trigger to work
        cat.selectChain({
            target: el,
            url: 'select-chain-test.php',
		    data: { ajax: true, CatDepth: 1 }
        }).trigger('change');

    });
    //-->
    </script>
  </head>
  <body id="page">
    <div id="doc">
        <h1>Select Chain</h1>
        <div class="selHolder">
            <h2>Continent</h2>
            <select id="categorySelect" name="category" size="5">
                <option>Gay Africa</option>
                <option>Gay Asia</option>

            </select>
        </div>
        <div class="selHolder">
            <h2>Country</h2>
            <select id="elementSelect" name="category" size="5">
                <option>[none selected]</option>
            </select>
        </div>
        <div class="selHolder">
            <h2>State/Province</h2>
            <select id="attributeSelect" name="category" size="5">
                <option>[none selected]</option>
            </select>
        </div>

        <div class="selHolder">
            <h2>City</h2>
            <select id="catSelect" name="catid" size="5">
                <option>[none selected]</option>
            </select>
        </div>



    </div>
  </body>
</html>

The only last bit I need now, is for the 3rd select box to run the following when an option is selected;

I guess it would be something like copying (and editing) this bit?

Code: 
        el.selectChain({
            target: attr,
            url: 'select-chain-test.php',
		    data: { ajax: true, anotherval: "anotherAction", 'CatDepth': 2 }
        });

Thanks again for your help on this (been a thorn in my side for over 2 weeks now :()

Cheers

Andy
 
Upvote 0 Downvote
Hi

Andy said:
the value doesn't have + in it - so maybe thats the issue
Click to expand...
That is because the URL encoding. The space character can not be sent in an URL, so it has to be encoded. Either as [tt]%20[/tt], or to keep the text somehow human readable, as [tt]+[/tt]. But PHP should decode it when setting up its internal variables with the request information.

Feherke.
 
Upvote 0 Downvote
Hi

Yes. Should be placed before configuring [tt]el.selectChain[/tt] :
Code: 
[red]attr[/red].selectChain({
    target: [red]catselect[/red],
    url: 'select-chain-test.php',
    data: { ajax: true, 'CatDepth': [red]3[/red] }
});
By the way, that '[tt]anotherval: "anotherAction",[/tt]' seems to be pointless there.

Feherke.
 
Upvote 0 Downvote
Oh, and one more thing (to be cheeky :p)

At the moment - its printing out "Full_Name" , but what we really need, is to only show "Name", but obviously pass along Full_Name (otherwise it won't get the correct results :))

Thanks again for all your help. A star will be coming you way soon for your help :)

TIA

Andy
 
Upvote 0 Downvote
WAHOO - it works!

Last thing, is to make it so that it doesn't show the full name (but shows just the last part of the value)

In perl, I would do something like:

my @tmp = split /\//, $full_name;
my $name = $tmp[$#tmp];

Any ideas how I can do this with the script in question?

Thanks again!!!

Andy
 
Upvote 0 Downvote
Hi

You mean you want to cut off the redundant leading part of the values ?

[tt]Continent value : Continent -> Continent
Country value : Continent/Country -> Country
State value : Continent/Country/State -> State
City value : Continent/Country/State/City -> City[/tt]

I would probably update the values in the database. So it would be done once, not as many time as the data will be requested in the future.
Code: 
while (is_resource($results) && $row = mysql_fetch_object($results)) {
    $json[] = '"' . [red]preg_replace("/.*\//","",[/red]$row->Full_Name[red])[/red] . '"';
}
Of course, this can be done in many ways. ( Someone may object that I overuse regular expressions. Yes, I do and I enjoy it. )

Feherke.
 
Upvote 0 Downvote
UPDATE: I think the reason this is the case, is cos it is actually putting that value into the array - so on the second box, instead of passing through "Gay Africa/Gay Algeria", its only passing through "Gay Algeria" to the script.

Maybe better to do it somewhere in the JS instead?

TIA!

Andy
 
Upvote 0 Downvote
Hi

So you mean, only the displayed text should be the shortened on, the [tt]value[/tt] has to be the original complete Full_Name ? Like this :
Code: 
<option value="Continent/Country/State/City">City</option>
Well, this is jQuery dependent, so I have not idea. But there are not too many ways, so a few dumb guesses :
Code: 
$json[]='["'.$row->Full_Name.'","'.preg_replace("/.*\//","",$row->Full_Name).'"]';

[gray]// or reversed[/gray]

$json[]='["'.preg_replace("/.*\//","",$row->Full_Name).'","'.$row->Full_Name.'"]';
Code: 
$json[]='"'.$row->Full_Name.'":"'.preg_replace("/.*\//","",$row->Full_Name).'"';
[gray]// ...[/gray]
echo '{'.implode(',',$json).'}';

[gray]// or reversed[/gray]

$json[]='"'.preg_replace("/.*\//","",$row->Full_Name).'":"'.$row->Full_Name.'"';
[gray]// ...[/gray]
echo '{'.implode(',',$json).'}';
If none works, you will need to do some researches or wait for a jQuery expert. Sorry I have no time to learn it now.

Feherke.
 
Upvote 0 Downvote
Ok, with some debugging - I've found this in the .js script:


o.text = typeof j == 'object' ? j[settings.value] : j;

If I change this to:
o.text = typeof j == 'object' ? j[settings.value] : 'BGGG' + j /*j*/;

It prints out BGGG in the bit that shows - but not in the value itself - so this looks like what I need.

Now, just need to find some way of getting the value from it - i.e how I would do it in perl:

my @tmp = split /\//, $tmp;
my $val = $tmp[$#tmp];

..so in short, simply simply the value up into an array - and grab the last value.

Any ideas?

TIA!

Andy


 
Upvote 0 Downvote
Hi

You are obsessed. Why to split it ? But if you want it :
Code: 
str='Continent/Country/State/City'
part=str.split('/')
strend=part[part.length-1]   [gray]// will be 'City'[/gray]
Anyway, the nice side of the regular expressions is they are more portable than the code. So the regular expression used in PHP can be reused in JavaScript :
JavaScript: 
str='Continent/Country/State/City'
strend=str.replace(/.*\//,'')   [gray]// will be 'City'[/gray]
Sorry, I do not got the context, but hopefully you will be able to figure out how to combine it.


Feherke.
 
Upvote 0 Downvote
WAHOO!!!!


Thanks again for all your help :) (I've given you a star :))

The end code that worked was:

Code: 
str=j[i];
							part=str.split('/');
							strend = part[part.length-1];

                            o.value = typeof j[i] == 'object' ? j[i][settings.key] : j[i];
                            o.text = typeof j[i] == 'object' ? j[i][settings.value] : strend /*j[i]*/;

Thanks again

Andy
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
396
Kennelbloke
Kennelbloke
BobMe23
What new features have appeared in the latest versions of Java?
Replies
1
Views
75
feherke
feherke
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
340
malpa
malpa
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
372
xwb
xwb
rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
297
rogerte
rogerte

Part and Inventory Search

Sponsor

Back
Top