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)

score 1 · Accepted Answer · edited Dec 04 '19 at 15:11

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 04 '19 at 15:11

SemperFi

2,358
6
31
51

answered Mar 07 '19 at 20:55

Muhammad Shareyar

772
2
7
21

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 – Eman Emad Mar 10 '19 at 12:23
Try to `console.log(data)` and check what it is returning. – Muhammad Shareyar Mar 10 '19 at 13:09
Also try to update your `url : 'http:yourprojectport/order/new'` – Muhammad Shareyar Mar 10 '19 at 13:25
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 – Eman Emad Mar 10 '19 at 14:02
Try to directly access the `url` in your browser check it is returning result or not – Muhammad Shareyar Mar 10 '19 at 14:05
yes i got a result & the first user dropdown menu is empty when i choose one user of it – Eman Emad Mar 10 '19 at 14:10
Check the updated code you need to do some changes as above – Muhammad Shareyar Mar 10 '19 at 14:31
it return an alert whih contains [object,object] – Eman Emad Mar 10 '19 at 14:41
Check and update your code that as i have made changes – Muhammad Shareyar Mar 10 '19 at 15:02
okay i think res function doesn't work cause it reurn an empty array in the whole page!! – Eman Emad Mar 11 '19 at 22:04
Yes you need to define two different routes for different functionality one is for rendering user and index page and on other method you will return address of the user that you select in the dropdown as I shown above – Muhammad Shareyar Mar 12 '19 at 06:17
I got the error that address isn't define..in my ejs file. – Eman Emad Mar 12 '19 at 17:04
You need to create just empty select tag and when you select user from dropdown ajax will call data for address select box so change your select tag code for address with this `` – Muhammad Shareyar Mar 14 '19 at 12:32
okay I did that but I got this Uncaught TypeError: Cannot use 'in' operator to search for 'length' in – Eman Emad Mar 14 '19 at 13:47
I updated my question as I make some changes..If you could help me, I'll be thankful. – Eman Emad Mar 19 '19 at 13:26
I have made some little changes try the above code now. – Muhammad Shareyar Mar 20 '19 at 07:01
IT WORKED.. YOU SAVED MY LIFE – Eman Emad Mar 27 '19 at 20:42
but can you explain why you use app.use(); – Eman Emad Mar 27 '19 at 21:10
Check this link [express-routing](https://stackoverflow.com/questions/15601703/difference-between-app-use-and-app-get-in-express-js) – Muhammad Shareyar Mar 28 '19 at 06:09

Dynamic drop down menu node js

1 Answers1