Home/ Questions/Q 7749833
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T11:08:12+00:00

In Firebug (with the FirePHP plugin) I noticed that there is no communication with

  • 0

In Firebug (with the FirePHP plugin) I noticed that there is no communication with the PHP file, and hence nothing happens…

Here is the Javascript:

// three parameters are required by Dojo!
function buildMenu(type, data, evt)
{
    var menuDOM = document.getElementById("colorselect");
    var nextColor, nextItem;

    // delete previous items in the color menu
    menuDOM.options.length = null;

    // split the data into an array of colors
    var colors = data.split(', ');

    // go through the returned array of colors
    for(var i = 0; i < colors.length; index++)
    {
        nextColor = colors[i];
        nextItem = new Option(nextColor);

        /* add the new item to the menu
         ("null" for IE5, "-1" for all other browsers) */
        try
        {
            menuDOM.add(nextItem, -1);
        }
        catch(e)
        {
            menuDOM.add(nextItem, null);
        }
    }
} // end of function buildMenu

// the function that calls bind to request data
function getColors(size)
{
    dojo.io.bind( {url: "shirtColors.php" + "?size=" + size,
                    load: buildMenu,
                    method: "GET",
                    mimetype: "text/plain"
                    } );
}<br /><br />

Here is the PHP:

<?php

    $shirtSize = $_GET["size"];

    // array for available colors (for each shirt size)
    $colors = array("large" => "black, yellow, green",
                    "medium" => "blue, purple, white, off-white, cream, bleached-white",
                    "small" => "orange, red, aqua, turqoise, aquamarine, light-blue");

    echo $colors[$shirtSize];
?><br /><br />

…and here is the html:
(Dojo is linked to online here, and the Dojo io library is imported)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Shirt Colors</title>

        <!-- link to dojo online -->
       <script src="//ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js"></script>

       <!-- javascript file -->
       <script type = "text/javascript" src = "shirtColors.js"></script>

       <!-- import the dojo io library -->
       <script type = "text/javascript">
        dojo.require("dojo.io.*");
       </script>

    </head>
    <body>

       <select onchange = "getColors(this.value);">
            <option value = "large">
                large shirt
            </option>
            <option value = "medium">
                medium shirt
            </option>
            <option value = "small">
                small shirt
            </option>
       </select>

       <select id = "colorselect"></select>

    </body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    dojo.io.bind is a very old function.

    The new and supported way for your use-case is to use dojo.xhrGet or dojo.xhrPost 

    var deferred = dojo.xhrGet(
 {
    url: "shirtColors.php",
    content: {
      'size': size
    },
    handleAs: "text",
    load: buildMenu,
    error: function(error){
      //error handling code
    }
  }


);

    Note that query params are passed as ‘content’.

    Modify your buildMenu function:

    function buildMenu (data)
{
//data contains the text string for the data returned by PHP
}

    See http://dojotoolkit.org/reference-guide/1.7/dojo/xhrGet.html for more details

    • 0