CODEWITHSUNDEEP
phpjavascriptmysql
sirab333
sirab333

Reputation: 3722

PHP and Javascript not playing together nicely

Disclaimer: I'm an iOS developer with little JQuery, PHP or MySQL experience.

Here's the deal: I have a MySQL database containing Film info (FilmTitle, FilmGenre, FilmDirector, etc).

My goal is to:

  1. Grab just the Film Titles from the database and store them in an Array.
    I'm using PHP for this and its working fine.
  2. Pass this PHP Array to a JavaScript Array.
    This also works.
  3. Finally, using the JavaScript Array, I want to populate a drop-Down menu with its contents using createElement().
    This does NOT work.

I'm getting all sorts of goofy stuff: Some document.write() commands are working and some aren't; The drop-down menu isn't getting populated; etc.

First question: Is this even a good strategy to begin with? I figured that as the number of films in the database changes, the only way to properly update the drop-down menu would be to do what I described.

Second Question: This should all be in a PHP file, not an HTML file, correct? But can PHP even execute JavaScript functions? Or does something special need to be done to make this work?

The code

<?php
echo "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>";
echo "<allFilms>";

$link = mysql_connect(" . . . .  ");
$query = "select * from FilmsSmallTable";
$result = mysql_query($query);
// Declare array variable:
$allFilmTitles = array();

    while($row = mysql_fetch_assoc($result))
    {
        echo "<film>";

            echo "<FilmName>";
            echo $row['FilmTitle'];
            array_push($allFilmTitles, $row["FilmTitle"]);
            echo "</FilmName>";

        echo "</film>";
    }

// Print array out to verify:    
echo "Here is the array's full contents:<br/>";
print_r ($allFilmTitles);

//convert array to string using ":#:" as separator
$stringedArray = implode(":#:",$allFilmTitles);

echo "<br/><br/>";
echo "PHP Array converted to a PHP String (the 'stringedArray' variable) = <br/>";
print_r ($stringedArray);
echo "</allFilms>";
?>

<html>
<head>
<title>PHP & JS</title>

<script type="text/javascript">

function showArray() {
   //Convert PHP string to JavaScript string
   var JSArrayString = "<? print $stringedArray; ?>";

  //Create JavaScript array
   var JSarray = new Array();

   var x;
   //Fill JavaScript array from the converted string   
   JSarray = JSArrayString.split(":#:");
   // And sort it:
   JSarray.sort();

   //document.write("JSarray's length = ", JSarray.length);
   document.write("JSarray contains: ", JSarray);

   // reset the Form's drop-down menu to contain no elements:
   FilmsDropDownMenu.length = 0;

   for (counter = 0;  counter < JSarray.length; counter++) {
    document.write("Counter = " + counter + "<br/>");
    var newMenuItem=document.createElement("option");
    newMenuItem.text = JSarray[counter];
    try {
        //currentMenu.add(newMenuItem, null); // standards compliant
        FilmsDropDownMenu.add(newMenuItem, null); // standards compliant
    }
    catch(ex) {
        //currentMenu.add(newMenuItem); // IE only
        FilmsDropDownMenu.add(newMenuItem);
    }
}


function displayUsersChoice() {
// Grab the INDEX number of the choice the user selected from that menu:
var tempMenu = document.getElementById("FilmsDropDownMenu").selectedIndex; 
choice = tempMenu[choiceSelected].value;
alert ("You chose: " + choice);
}

</script>


</head>

<body onload="showArray()">
Hello!

<form id="myForm">
<select id="FilmsDropDownMenu" onChange="displayUsersChoice()">
    <option>==Choose Film to Edit:==</option>
    <option>Star Wars</option>
    <option>Raiders</option>
    <option>2001</option>
</select>

<input type="submit" value="Display Array" onclick="showArray()" />
</form>

<br/>

</body>
</html>

Upvotes: 1

Views: 146

Answers (1)

h00ligan
h00ligan

Reputation: 1481

This is just an example how you can create the drop down directly from PHP. Sometimes the easy way is the right way:

$allFilmTitles = array("Godfather", "Colombo", "Naked Gun");
print '<select name="FilmsDropDownMenu" id="FilmsDropDownMenu">';

foreach ($allFilmTitles as $film)
{
    print "<option>{$film}</option>";
}

print "</select>";

Upvotes: 3

Related Questions