CODEWITHSUNDEEP
javascriptnode.jswebhandlebars.js
user2848031
user2848031

Reputation: 227

How to get value from DB to on-change event?

How to get value from DB to the on-change event? Here is the example

$("#widgetpanel").html(' >data="http://localhost:8080/guest?key='+$(this).val()+'item=??">');

I'm getting key from the drop-down using below method but I couldn't get the item value from the router. Please advise how to get third value from the router to append in URL string?

my requirement is getting data from DB to display in the drop-down and based on drop down value change the URL to display different items on the screen.

Below code which retrieves the value from DB using nodejs router.

router.get('/', function(req, res, next) {
c.query("SELECT w.title,w.key,w.item FROM widgets as w", function(err, rows, fields){
    if(err) throw err;
    //console.log(rows);
    res.render('index', {
        "widgets": rows
    });
});
});

Below code which gets show the DB value into a dropdown(key, value). I can get the item value {{item}} on below screen but I don't want to here.

{{#if widgets}}

     <select id="key">
     <option value="">Select</option>
            {{#each widgets}}  

            <option value="{{key}}">{{title}}</option>
            {{/each}}
      </select>


{{else}}
<p>No Projects</p>
{{/if}}

Below code which displaying an embedded screen based drop down value. I can utilize key, value to append URL to get the corresponding items but I need one more from DB to appended to URL string which is "Item". 

$("#key").on('change',function(){
$("#widgetpanel").html('data="http://localhost:8080/guest?key='+$(this).val()+'item=??">');


});

Upvotes: 2

Views: 1337

Answers (1)

Briley Hooper
Briley Hooper

Reputation: 1271

You could use an extra attribute on the <option> tag to store your item. Your render code would look like:

<select id="key">
<option value="">Select</option>
   {{#each widgets}}
   <option value="{{key}}" data-item="{{item}}">{{title}}</option>
   {{/each}}
</select>

And then your javascript could look like:

$('#key').on('change', function() {
   var $o = $(this).children('option:selected');
   $("#widgetpanel").html('data="http://localhost:8080/guest?key='+$o.attr('value')+'item='+$(o).attr('data-item')+'">');
});

Example:

$('#key').on('change', function() {
  var $selectedOption = $(this).children('option:selected');
  var selectedKey = $selectedOption.attr('value');
  var selectedItem= $selectedOption.attr('data-item');
  var url = "http://localhost:8080/guest?key="+selectedKey+"&item="+selectedItem;
  $('#log').val(url);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="key">
  <option value="">Select</option>
  <option value="key1" data-item="item1">Title 1</option>
  <option value="key2" data-item="item2">Title 2</option>
  <option value="key3" data-item="item3">Title 3</option>
  <option value="key4" data-item="item4">Title 4</option>
</select>
<input type="text" id="log" style="width:100%"/>

Upvotes: 6

Related Questions