Реализация зависимого списка выбора в node.js + express

Question

Я новичок в node.js и выражаю. Я пишу приложение node.js с помощью express и express-handlebars в качестве рамки шаблонов. Я хочу реализовать зависимый подборщик, который будет отображаться на основе выбранного значения другого списка выбора.

До сих пор это то, что у меня есть:

Это мой родитель Picklist

<select id="buildingsSelect" class="building-select-add "name="residentBuildings"> 
    {{#each buildingRows}} 
     <option value="{{idBuildings}}" name={{Name}}>{{Name}}</option> 
    {{/each}} 
</select> 

Когда пользователь выбирает здание, я делаю запрос Ajax,

$('.building-select-add').change(function(){ 
     var buildingId = $('.building-select-add').val(); 
     $.ajax({ 
      type: 'post', 
      url: '/resident_add/' + buildingId, 
      success: function(data) { 
       location.reload(); 
      }, 
      error: function(err) { 
       console.log('------------ Error while updating this resident: ' + err); 
       console.log('------------ Error while updating this resident: ' + err.message); 
      } 
     }); 
    }); 

и отправьте значение, которое используется для вызова базы данных в базу данных Residents.

router.post('/:buildingId', function(req, res){ 
    var buildingId = req.params.buildingId; 
    console.log('OOOOOO buildingId: ' + buildingId); 
    var resList = []; 

    connection.query('select idResidents, Name from Residents where BuildingId = ?', buildingId, function(err, rows){ 
    if (err) { 
     console.log('----------------------- ERROR: Error querying records - ' + err); 
     console.log('----------------------- ERROR: ' + err.message); 
     return err; 
    } 
    resList = rows; 
    }); 
}); 

Я хочу, чтобы жители отображались в другом списке, но я не могу его заполнить.

Как сделать выделение на странице? Если я делаю location.reload() в ajax, вся страница перезагружается. Есть ли способ достичь этого?

Answer 1

Обычно, вы должны сделать запрос Ajax, который возвращает некоторый JSON. Затем, когда браузер Javascript получает JSON, он анализирует это в Javascript-объект или массив, а затем вы используете эти результаты, чтобы напрямую манипулировать DOM, чтобы вставить их в список на странице.

В зависимости от вашего желаемого отображения вы либо вставляете этот список в существующий элемент на странице, либо создаете новый список и вставляете его на страницу. Ключ в том, что вы принимаете результаты JSON для вызова Ajax и делаете это с клиентом Javascript.

Вы не показываете, каков желаемый результат HTML после вызова Ajax, поэтому я не могу точно показать, как это достичь, но вместо того, чтобы делать reload(), вы просто возьмете результат JSON из вызова Ajax (который jQuery уже проанализировал в Javascript-объект для вас), и вы будете перебирать его и вставлять в DOM по своему желанию.

$('.building-select-add').change(function(){ 
     var buildingId = $('.building-select-add').val(); 
     $.ajax({ 
      type: 'post', 
      url: '/resident_add/' + buildingId, 
      success: function(data) { 
       // use the data result here to insert into a picklist 
       // in the current page 
      }, 
      error: function(err) { 
       console.log('------------ Error while updating this resident: ' + err); 
       console.log('------------ Error while updating this resident: ' + err.message); 
      } 
     }); 
    }); 

Я не совсем уверен, что именно то, что данные, которые вы хотите, чтобы вернуться из вызова Ajax, но это будет выглядеть примерно так:

router.post('/:buildingId', function(req, res){ 
    var buildingId = req.params.buildingId; 
    console.log('OOOOOO buildingId: ' + buildingId); 

    connection.query('select idResidents, Name from Residents where BuildingId = ?', buildingId, function(err, rows){ 
    if (err) { 
     console.log('----------------------- ERROR: Error querying records - ' + err); 
     console.log('----------------------- ERROR: ' + err.message); 
     return err; 
    } 
    res.json(rows); 
    }); 
}); 

Есть другие способы сделать это также. Результатом вызова ajax может быть отображаемый HTML-шаблон, и вы просто вставляете этот HTML-код в нужное место на странице. Если он просто входит в другой раскрывающийся список, то это, вероятно, не имеет смысла, так как мало смысла использовать механизм шаблонов только для одного раскрывающегося списка, но если получившийся HTML-код содержит много HTML-кода (описания , столбцы и т. д.), тогда вы можете использовать механизм шаблонов для его создания, а не создавать его вручную в Javascript. Все это действительно зависит от того, как выглядит желаемый результат HTML (что-то, что вы не поделили с нами).