[Dojo] ComboBox onChange QueryResult

maandag 27 juni 2011 16:07

Acties:

0 Henk 'm!

Anoniem: 381305

Topicstarter

Hallo!

Op dit moment tracht ik met Dojo (DojoToolkit) een configuratie pagina te ontwikkelen, helaas gaat dit nog niet vlekkeloos :-)

JavaScript:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Test Config</title>
    <style type="text/css">
        @import "include/dojo/resources/dojo.css";
        @import "include/dijit/themes/claro/claro.css";
    </style>
    <link rel="stylesheet" href="include/form.css" type="text/css" />
    <script src="include/dojo/dojo.js" djConfig="parseOnLoad: true, isDebug: true"></script>
    <script type="text/javascript">
        dojo.require("dijit.dijit");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.TabContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dojox.data.QueryReadStore");
        dojo.require("dijit.form.ComboBox");
    </script>
</head>
<body class="claro">
    <div id="appLayout" class="camLayout" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design: 'headline'">
        <div class="centerPanel" data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: 'center', tabPosition: 'top'">
            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: 'Campaign Instances'">
                <h4>Campaign Instances Configuration</h4>
            </div>
            <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: 'Campaign'">
                <h4>Campaign Configuration</h4>
            </div>
        </div>
    <div class="edgePanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region: 'top'">
        <img src="images/logo.jpg">
    </div>
    <div id="leftCol" class="centerPanel" data-dojo-type="dijit.layout.TabContainer" data-dojo-props="region: 'left', splitter: true, tabPosition: 'top'">
        <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title: 'Menu'">

        <div dojoType="dojox.data.QueryReadStore" url="selectBusinessUnits.php" jsId="buStore"></div>
        <div dojoType="dijit.form.ComboBox" store="buStore" searchAttr="name"></div>
        
    </div>
</div>
</body>
</html>

Deze pagina geeft een ComboBox weer met hierin BusinessUnits die uit de database worden uitgelezen. Hiervoor wordt een PHP file aangeroepen.

PHP:

<?php
    
    header("Content-Type", "text/json");

    include_once("include/config.inc.php");
    $dbConnection = mysql_connect($dbHost, $dbUser, $dbPass);
    if (!$dbConnection) { die('Could not connect: ' . mysql_error()); }
    mysql_select_db($dbName, $dbConnection);
    $queryResult = mysql_query("SELECT * FROM businessunits");
    $arrResults = array();
    while($dbObject = mysql_fetch_object($queryResult)) {
        $arrResults[] = $dbObject;
   }
    print '/*'.json_encode(array('items'=>$arrResults)).'*/';
    mysql_close($dbConnection);
?>

Bovenstaande werkt prima! Helaas krijg ik het niet voor elkaar om _nadat_ een BusinessUnit is geselecteerd vanuit de ComboBox om hier de betreffende campagnes bij de laden. Dit zou dan met een PHP file weer opgehaald moeten worden uit de database. Deze camapgnes zouden dan onder "<div dojoType="dijit.form.ComboBox" store="buStore" searchAttr="name"></div>" moeten worden weergegeven.

Kan iemand mij een hint geven over hoe ik dat het makkelijkste zou kunnen doen?
Btw... ik had de vorige keer (veel) commentaar mbt de security, ik hoop dat dit nu ook beter is?

Alvast enorm bedankt!

Groet, Jeroen

maandag 27 juni 2011 17:22

Acties:

0 Henk 'm!

MueR

Admin Tweakers Discord

is niet lief

De vorige keer is je ook een voorbeeld gegeven van een ajax callback waarmee dit mogelijk is. Wat heb je geprobeerd om dit werkend te krijgen?

Anyone who gets in between me and my morning coffee should be insecure.

dinsdag 28 juni 2011 17:30

Acties:

0 Henk 'm!

Anoniem: 381305

Topicstarter

Hoi MueR,

jep dat klopt. Ik heb getracht het laatste voorbeeld van Maximizer te implementeren in de code in mijn eerste post. Waar ik echter niet uitkom... In het Dojo ComboBox gedeelte wordt een naam weergegeven, dit komt door de searchAttr. Echter heb ik het ID nodig wat ik dan mee kan sturen aan de Ajax functie.

File: Code extra in 1e file genoemd in post.

JavaScript:

function buSelection() { 

var buID = document.getElementById('buStore').value;  
var args = { url:"caGet.php?buid=" + buID, handleAs:"json", load:caGet, error:myErrorHandler }; 

dojo.xhrGet(args); 
}

caGet.php file:

PHP:

<?php
    header("Content-Type", "text/json");
    include_once("include/config.inc.php");
    $buid = $_GET['buid'];
    $dbConnection = mysql_connect($dbHost, $dbUser, $dbPass);
    if (!$dbConnection) { die('Could not connect: ' . mysql_error()); }
    mysql_select_db($dbName, $dbConnection);
    $queryResult = mysql_query("SELECT * FROM campaigns where buid = \"$buid\"");
    $arrResults = array();
    while($dbObject = mysql_fetch_object($queryResult)) {
        $arrResults[] = $dbObject;
   }
    print '/*'.json_encode(array('items'=>$arrResults)).'*/';
    mysql_close($dbConnection);
?>

Heb je een tip om hoe ik dan dat ID kan meegeven uit de ComboBox selectie?

Thanks

woensdag 29 juni 2011 14:58

Acties:

0 Henk 'm!

Anoniem: 381305

Topicstarter

Hmm... Ik geloof dat ik het heb gevonden.

Door de volgende regels te gebruiken heb ik niet de naam maar het ID van de buStore weten te bemachtigen wanneer deze geselecteerd wordt.

JavaScript:

1
2

<div dojoType="dojo.data.ItemFileReadStore" jsId="buStore" url="selectBusinessUnits.php"></div>
<input dojoType="dijit.form.FilteringSelect" store="buStore" searchAttr="name" name="buSelect" id="buSelect" onChange="caGet">

JavaScript:

function caGet()
{
    var selectedID = dijit.byId('buSelect').get('value');
};

Gr. Jeroen

Onderwerpen