Multiple Select Boxes and AJAX

[jamey8420]

Hello,
I have a php page that I am using AJAX to populate some check boxes based on a selection in a drop down box. Now, I'd like to expand that functionality to do something similar to this: http://www.dhtmlgoodies.com/scripts/multiple_select/multiple_select.html

However, the troubling part is that I can have multiple groups of these select boxes; I am looping through a database selection to a heading for each group of select boxes, as well as the naming convention for each of the select boxes (left side would be alllistf1, alllist2, etc... and the right side would be sellist1, sellist2, etc...) and incrementing the variables each time through the loop (which then gives me the distinct names for each of the list boxes).

$cc_res = mssql_query("SELECT clnum, clname + ' (' + clnum + ')' as cc FROM cost_center_clnum order by clnum");
$numberofrows=mssql_num_rows($cc_res);
//echo $numberofrows."<br>";
$alllistvar = $numberofrows/$numberofrows;
$selectlistvar = $numberofrows+1;
while($row=mssql_fetch_array($cc_res)){
$ccid = $row['clnum'];
$cc = $row['cc'];
echo "&nbsp;<span class='f2'>".$cc."<br></span>";

The end results would be something like this:

Heading1
List 1 List 3

Heading 2
List 2 List 4

with Lists 1 and 2 being possible rights for a user and lists 3 and 4 being the rights currently assigned to that user. When a user is selected in the drop down box, I'd like to populate List boxes 3 and 4 with the respecitve persons's rights. A bonus would be to populate list boxes 1 and 2 with all rights that are not currently selected, instead of all of the rights.

Since I don't have the names of the headings and list boxes hard coded into the page, I'm not sure how I can pass back the resultant values into the list boxes with AJAX. Any help on this would be greatly appreciated. If you need any clarification don't hesitate to ask.

Thanks for all your thoughts.

[Airshow]

I'm not too sure why you are having a problem but it may be solved with JSON, which allows you to bundle up multiple data items (four lists in your case), and return them in a single ajax response.

JSON is made simple for aplication programmers by the availability of JSON encode/decode functions both server-side (eg. php) and client-side (javascript). Go to www.json.org for more information.

Since I don't have the names of the headings and list boxes hard coded into the page ...

In order to do its job, javascript must know where to stick the four lists when they are returned from the server. If the names (or ids) are not hard-coded, then something somewhere must be naming them. That "something" (server-side or client-side) must also make the names available in a form that can be used by the AJAX response handler.

Airshow

[vsmash]

I might have misinterpreted but sounds to me like your answer is more in the sql than the ajax:
such as
SELECT your_fields from your_userrightstable WHERE userrightsID NOT IN(select userrightsID from assignedrightstable where userid=submitteduserid)
for your left column

[jamey8420]

I ended up coming to a solution on this. I was able to create a php file for each of my select boxes; not totally what I wanted to do but it gets the job done. In the php file, I am doing a select of the database to determine if it's a right of the user, and if so I display it back to my original form like so:

echo "obj.options[obj.options.length] = new Option('".$codedesc."', '".$index."');\n";

Thanks so much for the ideas.

[Airshow]

Jamey,

All's well that ends well but I think it could be simpler.

If you eval() the returned string, then you could avoid eval() by returning just $codedesc and $index then using a standard non-eval() statement to effect the insertion.

You could use JSON for this or DIY it as follows:

echo $codedesc . '^^^' . $index;

var params = xmlHTTPObj.responseText.split('^^^');
obj.options[obj.options.length] = new Option(params[0], params[1]);

There's nothing particular about "^^^". It's just a (unique) delimiter string at which to perform the split.

With a bit of imagination, you should be able to:

1. Amend the php to query all four lists in one hit and return them suitably strung together with the delimiter.
2. Contrive for the ajax response handler to know obj1, obj2, obj3 and obj4, and execute four statements (as per my javascript above) to update all four lists.

That said, these are just thoughts. If it ain't broke, don't fix it. You probably have better things to do.

I'm glad you got it working.

Airshow

[jamey8420]

Hmmmm....that's interesting. I'm happy that it's working (and it might stay this way), but optimization and flexibility is always very nice to incorporate. Thanks for the ideas and I may have to revisit this in the future.

Thanks!

Jamey,

All's well that ends well but I think it could be simpler.

If you eval() the returned string, then you could avoid eval() by returning just $codedesc and $index then using a standard non-eval() statement to effect the insertion.

You could use JSON for this or DIY it as follows:

echo $codedesc . '^^^' . $index;

var params = xmlHTTPObj.responseText.split('^^^');
obj.options[obj.options.length] = new Option(params[0], params[1]);

There's nothing particular about "^^^". It's just a (unique) delimiter string at which to perform the split.

With a bit of imagination, you should be able to:

1. Amend the php to query all four lists in one hit and return them suitably strung together with the delimiter.
2. Contrive for the ajax response handler to know obj1, obj2, obj3 and obj4, and execute four statements (as per my javascript above) to update all four lists.

That said, these are just thoughts. If it ain't broke, don't fix it. You probably have better things to do.

I'm glad you got it working.

Airshow