jQuery / Javascript下拉列表无法正确填充？

时间：2018-11-18 06:58:10

标签： javascript jquery

我正在尝试填充用户提交的表单的敌人下拉菜单，以向“反派”实体添加详细信息。到目前为止，在后端，看起来像当我进入表单时，所有的属性都正确地加载到了实体中，除了没有下拉菜单的敌人属性。

英雄实体已插入数据，因此下拉列表应填充，但不是。任何想法？

在终端上运行程序时遇到的错误是...。

{“代码”：“ ER_BAD_NULL_ERROR”，“ errno”：1048，“ sqlMessage”：“列'enemy'不能为空”，“ sqlState”：“ 23000”，“索引”：0，“ sql”： “插入反派（vfirstName，vlastName，vspecies，vage，valias，敌人）值（'Loki'，'Laufeyson'，'God'，'1000'，'Loki'，NULL）“]

/ * ------------------------------------------功能- ---------------------------------------- * / 

module.exports = function(){
    var express = require('express');
    var router = express.Router();

/* FUNCTION TO GET ALL HEROES FOR THE ENEMY MENU DROPDOWN */
function getHeroes(res, mysql, context, complete){
    mysql.pool.query("SELECT hero_id AS id, alias FROM Heroes", function(error, results, fields){
        if(error){
            console.log(JSON.stringify(error));
            res.write(JSON.stringify(error));
            res.end();
        }

        context.heroes = results;
        complete(); 
    });
}

/* FUNCTION TO GET ALL VILLAINS TO DISPLAY */
function getVillains(res, mysql, context, complete){
    mysql.pool.query("SELECT villain_id AS id, vfirstName, vlastName, vspecies, vage, valias, Heroes.alias AS enemy FROM Villains INNER JOIN Heroes ON enemy = Heroes.hero_id", function(error, results, fields){
        if(error){
            console.log(JSON.stringify(error));
            res.write(JSON.stringify(error));
            res.end();
        }   
        context.villains = results;
        complete();
    });
}

/* FUNCTION TO GET VILLAIN BY ENEMY */
function getVillainByEnemy(res, mysql, context, complete) {
    var query = "SELECT Villains.villain_id AS id, vfirstName, vlastName, vspecies, vage, valias, Heroes.alias AS enemy FROM Villains INNER JOIN Heroes ON enemy = Heroes.hero_id WHERE Villains.enemy = ?";
    console.log(req.params)
    var inserts = [req.params.enemy]
    mysql.pool.query(query, inserts, function(error, results, fields) {
        if(error) {
            console.log(JSON.stringify(error));
            res.write(JSON.stringify(error));
            res.end();
        }
        context.villains = results;
        complete();
    });
}

/* FUNCTION TO GET VILLAIN ALIAS*/
function getVillainWithAliasLike(res, mysql, context, complete) {
    var query = "SELECT Villains.villain_id AS id, vfirstName, vlastName, vspecies, vage, valias, Heroes.alias AS enemy FROM Villains INNER JOIN Heroes ON enemy = Heroes.hero_id WHERE Villains.valias LIKE " + mysql.pool.escape(req.params.s + '%');
    console.log(query)
    mysql.pool.query(query, function(error, results, fields){
        if(error) {
            console.log(JSON.stringify(error));
            res.write(JSON.stringify(error));
            res.end();
        }
        context.villains = results;
        complete();
    });
}

/* FUNCTION TO GET ONE, SINGLE HERO */
function getVillain(res, mysql, context, id, complete) {
    var sql = "SELECT villain_id AS id, vfirstName, vlastName, vspecies, vage, valias, enemy FROM Villains WHERE villain_id = ?";
    var inserts =[id];

    mysql.pool.query(sql, inserts, function(error, results, fields){
        if(error){
            console.log(JSON.stringify(error));
            res.write(JSON.stringify(error));
            res.end();  
        }
        context.villain = results[0];
        complete();
    });         
}

/ * ------------------------------------------路由器- ---------------------------------------- * / 

/* ROUTER TO DISPLAY VILLAINS */
router.get('/', function(req, res) {
var callbackCount = 0;
var context = {};
context.jsscripts = ["deleteVillain.js"];
var mysql = req.app.get('mysql');
getHeroes(res, mysql, context, complete);
getVillains(res, mysql, context, complete);
function complete() {
    callbackCount++;
    if(callbackCount >= 2) {
        res.render('villains', context);

    }
}
});

/* ROUTER TO DISPLAY HEROES FOR SEARCH */
router.get('/search/:s', function(req, res){
    var callbackCount = 0;
    var context = {};
    context.jsscripts = ["deleteVillain.js"];
    var mysql = req.app.get('mysql');
    getVillainsWithAliasLike(req, res, mysql, context, complete);
    getHeroes(res, mysql, context, complete);
    function complete() {
        callbackCount++;
        if(callbackCount >= 2) {
            res.render('villains', context);
        }
    }
});

/* ROUTER TO DISPLAY ONE VILLAIN TO UPDATE */ //FIX//
router.get('/:id', function(req, res){
    callbackCount = 0;
    var context = {};
    context.jsscripts = ["selectedHero.js", "updateVillain.js"];
    var mysql = req.app.get('mysql');
    getVillain(res, mysql, context, req.params.villain_id, complete);
    getHeroes(res, mysql, context, complete);
    function complete(){
        callbackCount++;
        if(callbackCount >= 2){
            //FIX
            res.render('update-villain', context);
        }
    }
});

/* ROUTER TO ADD NEW VILLAIN */
router.post('/', function(req, res) {
    console.log(req.body.enemy);
    console.log(req.body);
    var mysql = req.app.get('mysql');
    var sql = "INSERT INTO Villains(vfirstName, vlastName, vspecies, vage, valias, enemy) VALUES (?, ?, ?, ?, ?, ?)";
    var inserts = [req.body.vfirstName, req.body.vlastName, req.body.vspecies, req.body.vage, req.body.valias, req.body.enemy];
    sql = mysql.pool.query(sql, inserts, function (error, results, fields) {
        if(error) {
            console.log(JSON.stringify(error));
            res.write(JSON.stringify(error));
            res.end;
        } else {
            console.log("VILLAIN ADDED TO THE DATABASE");
            res.redirect('/villains')
        }
    });
});

/* THE URI THAT UPDATES DATA SENT TO UPDATE THE HERO */
router.put('/:id', function(req, res) {
    var mysql = req.app.get('mysql');
    var sql = "UPDATE Villains SET vfirstName = ?, vlastName = ? vspecies = ?, vage = ?, valias = ?, enemy = ? WHERE villain_id = ?";
    var inserts = [req.body.vfirstName, req.body.vlastName, req.body.vspecies, req.body.vage, req.body.valias, req.body.venemy, req.params.id];
    sql = mysql.pool.query(sql, inserts, function(error, results, fields) {
        if(error) {
            res.write(JSON.stringify(error));
            res.end();
        } else {
            res.status(200);
            res.end();
            console.log("Updated Villain");
        }
    });     
});

/* ROUTER TO DELETE HERO */
router.delete('/:id', function(req, res) {
    var mysql = req.app.get('mysql');
    var sql = "DELETE FROM Villains WHERE villain_id = ?";
    var inserts = [req.params.id];
    sql = mysql.pool.query(sql, inserts, function (error, results, fields){
        if(error) {
            console.log(error);
            res.write(JSON.stringify(error));
            res.status(400);
            res.end();
        }else {
            res.status(202);
            console.log("DELETE CONFIRMED");
            res.end();
        }
    });
}); return router; }();

* / ------------- HTML HANDLEBAR ------------- * / 

    {{#each foo}}
{{this}}
{{/each}}

<!-- Add New Villains -->
<h3>Add new villain:</h3>
<form id="add_villain" action="/villains" method="post">
    First name: <input type="text" name="vfirstName"><br>
    Last name: <input type="text" name="vlastName"><br>
    Species: <input type="text" name="vspecies"><br>
    Age: <input type="number" name="vage"><br>
    Alias: <input type="text" name="valias"><br>
    Enemy: <select name="enemy"> 
        {{#each enemy}}
        <option value="{{id}}">{{alias}}</option>
        {{/each}}
    </select><br>
    <input type="submit" value="Submit">
 </form>

<!-- Search Heroes -->
<div>
<form id="search_heroes" action="/heroes" method="get">
    <label> Search hero for alias starting with:</label>
    <input id="searchvillain" type="text" name="alias">
    <input type = "Submit">
</form>
</div>

<!-- Current Heroes -->
<div>
 <h3>Current villains:</h3>
    <table>
    <thead> 
        <tr><th>First Name</th> 
        <th>Last Name</th>
        <th>Species</th>  
        <th>Age</th> 
        <th>Alias</th> 
        <th>Enemy</th> 
    </tr></thead> 
    {{#each villains}}
    <tbody><tr> 
            <td>{{vfirstName}}</td> 
            <td>{{vlastName}}</td> 
            <td>{{vspecies}}</td> 
            <td>{{vage}}</td>
            <td>{{valias}}</td>
            <td>{{enemy}}</td>
            <td><button onclick="deleteVillain({{id}})">Delete</button></td>
            <td><a href="/villains/{{id}}">Update</a></td>
        </tr>
         {{/each}}
        </tbody> 
</table> 
</div>

表格

CREATE TABLE `Heroes` (
`hero_id`   INT(20)     AUTO_INCREMENT NOT NULL,
`firstName` VARCHAR(20) NOT NULL,
`lastName`  VARCHAR(20) DEFAULT NULL,
`species`   VARCHAR(50) NOT NULL,
`age`       BIGINT(20)  DEFAULT NULL,
`alias`     VARCHAR(20) DEFAULT NULL,
`loveInterest`  VARCHAR(50) DEFAULT NULL,
`homePlanet`    INT(9)      NOT NULL,
PRIMARY KEY (`hero_id`),
FOREIGN KEY (`homePlanet`) REFERENCES `Planets`(`planet_id`) ON UPDATE 
CASCADE ON DELETE CASCADE
)Engine=InnoDB DEFAULT CHARSET=latin1;

/* Create Villains table */

CREATE TABLE `Villains` (
    `villain_id`        INT(9)      AUTO_INCREMENT NOT NULL,
    `vfirstName`        VARCHAR(20),
    `vlastName`     VARCHAR(20) DEFAULT NULL,
    `vspecies`      VARCHAR(50) NOT NULL,
    `vage`          BIGINT(20)  DEFAULT NULL,
    `valias`        VARCHAR(20) DEFAULT NULL,
    `enemy`         INT(9)      NOT NULL,
    PRIMARY KEY (`villain_id`),
    FOREIGN KEY (`enemy`) REFERENCES `Heroes`(`hero_id`) ON UPDATE CASCADE ON DELETE CASCADE
)Engine=INNODB DEFAULT CHARSET=latin1;

0 个答案:

没有答案
相关问题
最新问题