javascript - Why is my angularjs multiselect interface not working? -
i angular newbie using multiselect directive isteven.
i wrote test case, works fine html in root folder, when incorporated my app, none of drop-downs visible.
there no console.log error messages.
i bundled html , controller same file.
the "myapp.controller('mainctrl', function ($scope, $http)" not executed although "var myapp = angular.module( "myapp", [ "isteven-multi-select" ]);" does.
<html data-ng-app="myapp" id="myapp" lang="en"> <head> <title>writer's tryst - enablers form</title> <link type="text/css" href="css/enablers.css" rel="stylesheet" /> <link rel="stylesheet" href="css/isteven-multi-select.css"> </head> <body data-ng-controller="mainctrl"> <div class="container center_div"> <!--<form id="form-writers" class="form-horizontal well">--> <img id="img-enablers" src="#" alt="images" /> <form id = "form-enablers" class="form-horizontal well"> <h1>enablers</h1> <label for="work-type" class="fixed50">type:</label> <p id="work-type" data-isteven-multi-select data-input-model="worktype" data-output-model="outputworktype" data-button-label="icon name" data-item-label="icon name" data-tick-property="ticked" ></p> <label for="form-type" class="fixed50">form:</label> <p id="form-type" data-isteven-multi-select data-input-model="formtype" data-output-model="outputformtype" data-button-label="name" data-item-label="name" data-tick-property="ticked" ></p> <p>for explanation of genres s hown here, see <a target="_blank" href="https://en.wikipedia.org/wiki/list_of_genres">list of genres</a><br/></p> <label for="genres" class="fixed50">genres:</label> <p id="genres" data-isteven-multi-select data-input-model="genres" data-output-model="outputgenres" data-button-label="name" data-item-label="name" data-tick-property="ticked" ></p> <label for="accepted-media" class="fixed50">accepted media:</label> <p id="accepted-media" data-isteven-multi-select data-input-model="acceptedmedia" data-output-model="outputmedia" data-button-label="icon name" data-item-label="icon name" data-tick-property="ticked" ></p> <p> <label for="special-instructions" class="fixed50">special instructions</label> <textarea id ="special-instructions" name="special-instructions"> </textarea> </p> <p>for limited time, enablers can use site <span style="color: #f00; font-weight:bold">free</span>. reserve right change policy without notice.</p> <div id="recaptcha-elements"></div> <div class="form-group"> <button type="submit" id="enablers-search" class="btn btn-default glyphicon glyphicon-search"> search</button> </div> <input id="userid" name="userid" type="hidden" /> </form> </div> <form id="writers-list"> <p>to request manuscript, click checkbox beneath thumbs-up icon.</p> <div id="table-list"></div> </form> <script src="js/isteven-multi-select.js"></script> <script src="js/enablers.js"></script> <script src="js/recaptcha.js"></script> <script> var myapp = angular.module( "myapp", [ "isteven-multi-select" ]); myapp.controller('mainctrl', function ($scope, $http) { alert("got here"); $scope.worktype = [ { icon: "<img src=img/icons/smile-mask.png />", name: "fiction", ticked: false }, { icon: "<img src=img/icons/frown-mask.png />", name: "non-fiction", ticked: false } ]; $scope.formtype = []; var data = {}; data.action = 'multiselect-forms'; ajax('post', 'php/enablers.php', data, formssuccess, 'error retrieving multiselect forms data: '); function formssuccess(data) { console.log(data); $scope.formtype = eval(data); } $scope.genres = []; data.action = 'multiselect-genres'; ajax('post', 'php/enablers.php', data, genressuccess, 'error retrieving multiselect forms data: '); function genressuccess(data) { console.log(data); $scope.genres = eval(data); } $scope.acceptedmedia = [ { icon: "<img src=img/icons/email.png />", name: "mail", ticked: false }, { icon: "<img src=img/icons/pdf.png />", name: "pdf file", ticked: false } ]; /* $http({ method: "post", url: "php/enablers.php", params: data, contenttype: 'text' }).then(function mysucces(response) { console.log(response.data); // $scope.formtype = response.data; }, function myerror(response) { $scope.formtype = response.statustext; }); */ }) </script> </body> s </html> notice, resorted using jquery ajax because angular kept insiting on json, though header php interace specified content-type of text/plain http call specifiing contenttype = 'text'
php
<?php require_once 'dbconnect.php'; function isempty($str) { return strlen(trim($str)) == 0; } function buildinstmt($array) { if (is_array($array)) { $in = implode(',', $array); } else $in = "'" . $array . "'"; return $in; } function multiselectgenres() { try { $dbh = connect2db(); $stmt = $dbh->prepare("select id, genre genres order genre"); if (!$stmt->execute()) { echo "\npdostatement::errorcode(): "; print $stmt->errorcode(); print_r($dbh->errorinfo()); } else { $select = "["; $rows = $stmt->fetchall(pdo::fetch_assoc); foreach ($rows $row) { $genre = $row['genre']; $id = $row["id"]; $select .= "{"; $select .= 'name: '; $select .= '"' . $genre . '",'; $select .= 'ticked: false},'; } $select = substr($select, 0, -1) . "]"; } header("content-type: text/plain"); echo $select; } catch (pdoexception $e) { echo 'connection failed: ' . $e->getmessage(); } } function multiselectforms() { try { $dbh = connect2db(); $stmt = $dbh->prepare("select id, form forms order form"); $stmt->execute(); $rows = $stmt->fetchall(pdo::fetch_assoc); $select = "["; foreach ($rows $row) { $id = $row['id']; $form = $row['form']; $select .= "{"; $select .= 'name: '; $select .= '"' . $form . '",'; $select .= 'ticked: false},'; } $select = substr($select, 0, -1) . "]"; header("content-type: text/plain"); echo $select; } catch (pdoexception $e) { echo 'database error: ' . $e->getmessage(); } catch (exception $e) { echo 'general failure: ' . $e->getmessage(); } } function search() { try{ /* if (!isset($_request["work-type"]) || isempty($_request["work-type"])) throw new exception('you must select type of work.'); else { $worktype = filter_var(trim($_request["work-type"]), filter_sanitize_string); $worktype = htmlspecialchars_decode($worktype, ent_quotes); } */ manageenablerdata(); if (!isset($_request["userid"]) || isempty($_request["userid"])) { throw new exception('a user-id must supplied.'); } $userid = $_request["userid"]; if (!isset($_request["form-type"]) || empty($_request["form-type"])) { throw new exception('you must select form type.'); } $forms = buildinstmt($_request["form-type"]); if (!isset($_request["genre"]) || empty($_request["genre"])) { throw new exception('you must select genre.'); } $genres = buildinstmt($_request["genre"]); /* if (!isset($_request["sub-genre"]) || isempty($_request["sub-genre"])) throw new exception('you must select sub-genre.'); else { $subgenre = filter_var(trim($_request["sub-genre"]), filter_sanitize_string); $subgenre = htmlspecialchars_decode($subgenre, ent_quotes); } */ $dbh = connect2db(); $dbh->setattribute(pdo::attr_errmode, pdo::errmode_exception); $stmt = $dbh->prepare("select a.id, a.email, a.name, w.title, w.filename writers w join accounts on a.id = w.fkaccounts a.id = :userid , formtype in($forms) , genre in($genres)"); $stmt->bindparam(':userid', $userid, pdo::param_int); $stmt->execute(); $rows = $stmt->fetchall(); $table = '<table><tr><th>author</th><th>title</th><th>synopsis</th><th><img src="img/thumb-up-icon.png" width="32" alt="thumbs-up" </th></tr>'; foreach ($rows $row) { $table .= "<tr><td>" . $row['name'] . "</td><td>" . $row['title'] . "</td><td>" . "<a href='uploads/" . $row['filename'] . "' target=_blank>synposis file</a>" . "</td><td><input type='checkbox' id='request-manuscript' name='request-manuscript'" . "</td><td class='hidden'>" . $row['id'] . "</td><td class='hidden'>" . $row['email'] . "</td></tr>"; } $table .= "</table>"; echo $table; } catch (pdoexception $e) { echo 'database error: ' . $e->getmessage(); } catch (exception $e) { echo 'general error: ' . $e->getmessage(); } } function manageenablerdata() { $si = ""; //special-instructions if (isset($_request["special-instructions"]) && !isempty($_request["special-instructions"])) { $si = filter_var(trim($_request["special-instructions"]), filter_sanitize_string); $si = htmlspecialchars_decode($si, ent_quotes); } if (!isset($_request["userid"]) || isempty($_request["userid"])) { throw new exception('a user-id must supplied.'); } $userid = $_request["userid"]; /* if (!isset($_request["accepted-media"]) || empty($_request["accepted-media"])) { throw new exception('an accepted media must entered.'); } $acceptedmedia = buildinstmt($_request["accepted-media"]); */ $dbh = connect2db(); $dbh->setattribute(pdo::attr_errmode, pdo::errmode_exception); $stmt = $dbh->prepare("insert enablers(fkaccounts, specialinstructions) values(:fka, :si) on duplicate key update fkaccounts=values(fkaccounts), specialinstructions=values(specialinstructions)"); $stmt->bindparam(':fka', $userid, pdo::param_int); $stmt->bindparam(':si', $si, pdo::param_str); $stmt->execute(); //need handle acceptedmedia } //var_dump($_request);exit(); if (!isset($_request['action']) || isempty($_request['action'])) throw new exception('programmer error: action not posted.'); else { $action = $_request['action']; switch($action) { case 'search': search(); break; case 'select': select(); break; case 'multiselect-genres': multiselectgenres(); break; case 'multiselect-forms': multiselectforms(); break; default: throw new exception("unknown action: " . $action); break; } } ?> if decide deserve downvote, please me understand doing wrong may learn mistakes.
1. why not work:
a). in test case, you've put <body data-ng-controller="mainctrl"> in html, , call mainctrl function.
b). in app, have mainctrl, neither call in html nor $routeprovider.when
solutions:
1). easiest way: <body data-ng-controller="mainctrl"> in app, same test case.
2). put codes inside of mainctrl enablerscontroller.if need select input model in page #/enablers.
both guesses, try , if problems let me know.
Comments
Post a Comment