Multiple Select Boxes with AJAX Calls

[dskurtzjr]

I have a form that is used to allow a user to upload images (max of 20 at a time) to an area of their website. I allow the user to select a directory they want to upload images to and if the directory doesn't exist, I give them the option to create it. The directory listing in my <select> tag is populated by an ajax call so that the user can see all directories available for upload, including the new directory the created. The problem I'm having is that my <select> tag is generated as part of a loop and therefore, when that element receives the focus from the end user, it works fine on the first instance of the <select> tag, but when a user clicks any of the other <select> tags, it blanks out the previous tag because I'm using an array as the element id. I'm wondering what logic needs to be added to make this work the way I want it to. I need a way to always have the most recent list of directories populate my <select> tag, but each instance needs be either be unique or somehow not affect the previous <select> tag. I have posted a snippet of the code.

 

Thanks

 

$z = 0;

        while ($z < 20) {

                echo "<div style='float:left;width:1250px;'>";

                echo "<div style='width:300px;float:left;'><input type='file' name='image[]' /></div><div style='width:300px;float:left;'><textarea name='descr[]' rows='1' cols='30'></textarea></div><div style='width:120px;float:left;'><select  id='dir_list' name='upload_dir[]' onfocus='ajaxFunction();'>";

                echo "</select></div><div style='width:150px;float:left;'><a style='color:#000;font-size:10px;' href='' onclick='popup()'>Create Directory</a></div><div style='width:150px;float:left;'><input type='text' name='time[]' size='13' /></div>";

                echo "<div style='width:100px;float:left;'><select name='active[]'><option value='No'>No</option><option value='Yes'>Yes</option></select></div></div><br /><br />";

        $z++;

        }

 

[xtopolis]

Either by using a "this" reference: http://www.quirksmode.org/js/this.html

or by using an i counter to your <select tags' naming convention.

name=select1

name=select2... etc so that the JS can tell them apart.

[dskurtzjr]

Thanks for the reply xtopolis.

 

Shortly after my post I ended up going with your suggestion of making the select boxes different by using an incremental counter. The next problem I have is that when someone clicks a link to "create a new directory" (this gives them the capability to create a directory on the fly), it launches a popup window and once that popup window is in the foreground, all the input data on the form is lost and the ajax script is re-run. Is there anyway to avoid this from happening when the "create new directory" window is launched?

[dskurtzjr]

The other problem I'm having with this is when the particular select box receives focus, it's setting all the select boxes to same value as the currently selected one. Any idea why? I think the problem I'm  having might have to do with the ajax method and me only having 1 instance of the xmlHttp object, but i'm not sure about this since I'm very new to ajax.

[xtopolis]

It's hard to help without the code.  Try to narrow your problems down one at a time and post the relevant code if you get stuck.

 

From what you're telling me, I would think that the "create directory" popup would be non ajax, and completely separate from the select directory page... or that there would be a pseudo-popup (read: hidden to visible div or smth) that would handle the create directory action, and then repopulate the select menu.

 

Like I said, break down the problems into more specific things, and then post relevant code and we can try to solve them one at a time.

 

Please use code tags.

[dskurtzjr]

Yes, you're correct. The popup I've created is a separate page used simply for creating a new directory server side using the mkdir() function. I am still having a problem keeping the entered data on the form after the popup opens, then I'm also having a problem of the select boxes appearing to "override" one another upon my event handler being called. Here is the snippet from my "add images" page that makes the ajax call:

 

while ($z < 20) {

                echo "<div style='float:left;width:1250px;'>";

                echo "<div style='width:300px;float:left;'><input type='file' name='image[]' /></div><div style='width:300px;float:left;'><textarea

                name='descr[]' rows='1' cols='30'></textarea></div><div style='width:200px;float:left;'><select id='dir_list$z' name='upload_dir[]'

                onfocus='ajaxFunction();'>";

                echo "</select></div>";

              echo "<div style='width:150px;float:left;'><a style='color:#000;font-size:10px;' href='' onclick='popup()'>Create Directory</a></div>";

                echo "<div style='width:145px;float:left;'><input type='text' name='time[]' size='5'/></div>";

                echo "<div style='width:100px;float:left;'><select name='active[]'><option value='No'>No</option><option

                value='Yes'>Yes</option></select></div></div><br /><br />";

        $z++;

        }

 

I'm not sure why I'm having the problem I'm having as far as the select boxes "overriding" the previous select box when a value is chosen, but I have to use form elements on these pages since the client has requested to be able to upload multiple images at once. Below is the code that is executed when the ajaxFunction() is called, which simply gets the directory names for me to display in the select box above:

 

$listing = scandir("../images");

$counter = count($listing);

$x = 0;

 

echo "<option name='upload_dir[]' value=''></option>";

 

while ($x < $counter){

        if (strpos($listing[$x],".jpg") == true || strpos($listing[$x],".gif") == true || strpos($listing[$x],".png") == true || $listing[$x] == "." || $listing[$x] == "..") {

                $x++;

        }

        else {

                echo "<option name='upload_dir[]' value="."'".$listing[$x]."'".">".$listing[$x]."</option>";

                $x++;

        }

}

 

Thanks for any help you can provide me!

[xtopolis]

So, I don't know about the rest of your HTML for the image uploading, but I'll try to nudge you in the right direction for handling the select boxes.

 

I used this in place of ajaxFunction

function ajaxFunction(arg)
{
  alert(arg.getAttribute("id"));
}

 

and in the <select ... line , I added the argument this

...
<select id='dir_list$z' name='upload_dir[]'
                onfocus='ajaxFunction(this);'>";

 

So that when I click a select box, it identifies itself uniquely.  Perhaps that will help you populate the right select box with the dir list.

 

 

 

Here's my whole test code in case:

<html>
<head>
<script type="text/javascript">
function ajaxFunction(arg)
{
  alert(arg.getAttribute("id"));
}
</script>
</head>
<body>
<?php
while ($z < 20) {
                echo "<div style='float:left;width:1250px;'>";
                echo "<div style='width:300px;float:left;'><input type='file' name='image[]' /></div><div style='width:300px;float:left;'><textarea
                name='descr[]' rows='1' cols='30'></textarea></div><div style='width:200px;float:left;'><select id='dir_list$z' name='upload_dir[]'
                onfocus='ajaxFunction(this);'>";
                echo "</select></div>";
              echo "<div style='width:150px;float:left;'><a style='color:#000;font-size:10px;' href='' onclick='popup()'>Create Directory</a></div>";
                echo "<div style='width:145px;float:left;'><input type='text' name='time[]' size='5'/></div>";
                echo "<div style='width:100px;float:left;'><select name='active[]'><option value='No'>No</option><option
                value='Yes'>Yes</option></select></div></div><br /><br />";
        $z++;
        }
        ?>
</body>
</html>