Dynamic drop down menu node js

Question

I'm new to node. I need to make a dependent dropdown menu which gets the address data of the selected user from another dropdown menu in the same page..The proplem is that the hole page is updated not only the second dropdown menu.. I think it's the same problem as dynamically dropdown in nodejs mysql, but it didn't help me much.

<select name="selectUser" id="user" >
  <option disabled selected> Select User..</option>
  <% users.forEach((users) => { %>
    <option value="<%= users.id %>" > <%=users.name %> </option>
  <%  })  %>
</select>
<br>
<label>Address :</label>
<select name="selectAddress" id="address">
  <option disabled selected> Select Address..</option>
  <% address.forEach((address) => { %>
    <option value="<%= address.addressId %>" > <%=address.addressName %> </option>
</select>
  <%  })  %>

my ajax request:

 $(document).ready(function(){
  $('#user').change(function(){

   var item =  $('#user').val();
   var add  = $('#address').val();
   $.ajax({
       type:'GET',
       data: {selectedId : item },
       url:'/order/new',
       success: function(result1){
           $('#body').html(result1);

       }
   });
  });
});

order.js

 module.exports = {
      addOrderPage: (req, res) => {
    let query1 = "SELECT * FROM users";
    getConnection().query(query1, (err, result1) => {
            let query2 = "SELECT * FROM address WHERE userId = '" +req.query.selectedId + "'";
            getConnection().query(query2, (err, rows, fields) => {
              if (err) {
                return res.status(500).send(err);
              }
               console,log(rows)
              res.render('newOrder.ejs', {
                  address : rows,
                  users: result1
              });
              });
    });
}
    }

app.js

app.get('/order/new', addOrderPage)

SemperFi · Accepted Answer · 2019-12-04 15:11:23Z

1

Your success function has missing the data that is return from request update your success function

       $(document).ready(function(){
       $('#user').change(function(){ 

        var item = $('#user').val();

        $.ajax({
            type:'GET',
            data: { selectedId: item },
            url:'/users/address',
            success: function(data){
                console.log(data);
                 $('#address').empty();
             $('address').append("<option disabled selected> Select Address..</option>");
             $.each(data, function (index, addressObj) {
                    $('#address').append("<option value = '" + addressObj.id + "' > " + addressObj.first_name + ". </option > ");
                });
            }
        });
       });

And in your order.js you need create one call for users and one call is for usersaddress data:-

      module.exports = {
    addOrderPage: (req, res) => {
        var selecteduser = req.query.selectedId;
        let query1 = "SELECT * FROM users";
        db.query(query1, (err, result1) => {
                if (err) {
                    return res.status(500).send(err);
                }
                res.render('newOrder.ejs', {
                    players: result1,
                });
        });
    },
    getUserAddress: (req, res) => {
        var selecteduser = req.query.selectedId;
        let query1 = "SELECT * FROM address WHERE userId = '" + selectedId + "'";
        db.query(query1, (err, result1) => {
            if (err) {
                return res.status(500).send(err);
            }
            res.send(result1);
        });
    }
}

neworder.js

 <select name="selectUser" id="user" >
    <option disabled selected> Select User..</option>
     <% users.forEach((users) => { %>
    <option value="<%= users.id %>" > <%=users.name %> </option>
    <%  })  %>
 </select>
 <br>
 <label>Address :</label>
 <select name="selectAddress" id="address">
  <option disabled selected> Select Address..</option>
 </select>

And in your app.js or index.js you need to add its route

 app.use("/users/address", order.getUserAddress);

edited Dec 4, 2019 at 15:11

SemperFi

2,3786 gold badges35 silver badges53 bronze badges

answered Mar 7, 2019 at 20:55

Muhammad Shareyar

8222 gold badges8 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

19 Comments

Eman Emad Over a year ago

It doesn't work for me..I want to grap data in the address dropdown menu from address table which connect with users table in userId

Muhammad Shareyar Over a year ago

Try to console.log(data) and check what it is returning.

Muhammad Shareyar Over a year ago

Also try to update your url : 'http:yourprojectport/order/new'

Eman Emad Over a year ago

I got this errot: Uncaught SyntaxError: Unexpected token u in JSON at position 0..& I'm not sure of me data request in the ajax function

Muhammad Shareyar Over a year ago

Try to directly access the url in your browser check it is returning result or not

|

Collectives™ on Stack Overflow

Dynamic drop down menu node js

1 Answer 1

19 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

19 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related