change table value after select dropdown using javascript

Question

this my web

JSP & Javascript

<div class="col-xs-3 col-md-8">
        <div class="panel panel-default">
        <div class="panel-body">
        <div class="row">
        <div class="col-xs-3 col-md-3">
        <select class="form-control" id="pertahun" name="dropdown">
                <option selected="selected">PILIH</option>
                <c:forEach var="i" begin="${th1}" end="${th}">
                <option> <c:out value="${i}"/></option>
                </c:forEach>
            </select>
            </div>
            </div>
            <div class="row">
            <div class="col-xs-1 col-md-4" id="tabel"></br>
            <table id="tab" class="table">
                <thead><tr>
                    <th align="center">#</th>
                    <th align="center">Merk</th>
                    <th align="center">Tanggal</th>

                </tr></thead>
                <tbody>
                <c:forEach items="${merk}" var="m">
                <tr>
                    <td>${m.id_mntnc_tkn}</td>
                    <td>${m.merk}</td>
                    <td>${m.tahun}</td>
                </tr>
               </c:forEach>
                </tbody>
                </table>
            </div>
            </div>
        <p></p>

        </div>
        </div>

        </div>

This is js:

<script type="text/javascript">
  $('#pertahun').change(function(){
     var str = $('#pertahun').find(":selected").text();
     //alert(str);
     $.ajax({
         url : 'merk-edc-mslh.html',
         data: {"year":str},
         dataType : "json",
         cache : false,
         contentType : 'application/json; charset=utf-8',
         type : 'GET'
    });
});
</script>

This My Controller

@RequestMapping(value = "/merk-edc-mslh", method = RequestMethod.GET)
    public @ResponseBody
    String getmerk(@RequestParam("year") String year,Map<String, Object> map) throws JSONException {

        DateFormat dateFormat = new SimpleDateFormat("yyyy");
        Date date = new Date();
        if("PILIH".equals(year)){
            year = dateFormat.format(date);
        }
        JSONArray result = new JSONArray();
        RestTemplate tmp = new RestTemplate();
        String url = ut+"/bar/dash-merk/"+year;
        HttpHeaders headers = new HttpHeaders();
        headers.setAccept(Arrays.asList(MediaType.APPLICATION_JSON));
        tmp.getMessageConverters().add(new MappingJackson2HttpMessageConverter());

        dash_merkModel[]dash=tmp.getForObject(url, dash_merkModel[].class);

        JSONObject jsonObj = new JSONObject();
        jsonObj.put("merk", dash);
        return jsonObj.toString();
    }

and this JSON message when dropdown selected

{"merk":[{"merk":"ingenico","tahun":"2015","sn":"14325CT22949427","id_mntnc_tkn":10}]}

but why in the data table has not changed ?

Jai · Accepted Answer · 2016-03-08 08:03:58Z

1

but why in the data table has not changed ?

It is because you have not told your script to do anything with the response you got.

<script type="text/javascript">
  $('#pertahun').change(function(){
     var str = $('#pertahun').find(":selected").text();
     //alert(str);
     $.ajax({
         url         : 'merk-edc-mslh.html',
         data        : {"year":str},
         dataType    : "json",
         cache       : false,
         contentType : 'application/json; charset=utf-8',
         type        : 'GET',
         success     : function(data){ // this is where you do something with response
            console.log(data);

            // The below is my assumption like filter the trs which do not contain 
            // 2015
            var yr = data.merk[0].tahun; // 2015
            $('#tab tbody').find('tr').filter(function(tr){
               $(tr).find('td').last().text().trim() !== yr;
            }).hide();
         }
    });
});
</script>

As per your comment you can do this:

 success     : function(data){
    var resp = data.merk[0]; // 2015
    $('#tab tbody').append(function(){
       return $('<tr>',{
          html:'<td>'+ resp.id_mntnc_tkn +'</td><td>' + resp.merk + '</td><td>'+ resp.tahun +'</td>'
       });
    });
 }

edited Mar 8, 2016 at 8:03

answered Mar 8, 2016 at 7:42

Jai

74.8k12 gold badges77 silver badges104 bronze badges

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

3 Comments

Zia Over a year ago

I want to change the contents of the table according JSON which I get,<tr> <td>${m.id_mntnc_tkn}</td> <td>${m.merk}</td> <td>${m.tahun}</td> </tr> but how to change ?

Jai Over a year ago

Change the content or replace the existing trs with a new one or add a new tr ??? be specific about it.

Zia Over a year ago

the picture above is after I selected the dropdown into 2015 but the table unchanged

Kishore Barik · Accepted Answer · 2016-03-08 09:39:08Z

0

I hope you have kept the change event function in proper place and the change callback is being is called. If not you can put the script jQuery $(document).ready() function.

Now your dropdown change event is fired and the callback is being called. But I cannot see you are doing anything with the response after the ajax call completes. I.e. you'll need a success callback which will be executed after the ajax call is completed successfully. After that you have to play with the response as per your development. So ajax call will be like

    $.ajax({
             url : 'merk-edc-mslh.html',
             data: {"year":str},
             dataType : "json",
             cache : false,
             contentType : 'application/json; charset=utf-8',
             type : 'GET',
             success: function(response, status){
               for (var i = 0; i < response.merk.length; i++) {
                   var m = response.merk[i];
                   var tableHtml += "<tr>" 
                       +"<td>"+ m.id_mntnc_tkn+"</td>"
                       + "<td>"+ m.merk+"</td>"
                       +  "<td>"+ m.tahun +"</td>"
                       + "</tr>";
               }

             $('#tab tbody').html(tableHtml);
             }
        });

I have no experience in jsp binding. Normally people using only jquery will generate table html and directly put it in selecting the table. Client side frameworks like AngularJs/reactJs etc will update the table automatically by updating the bound object/variable

edited Mar 8, 2016 at 9:39

answered Mar 8, 2016 at 8:07

Kishore Barik

7603 silver badges17 bronze badges

2 Comments

Zia Over a year ago

how can I update the table,I get response from controller like this {"merk":[{"merk":"ingenico","tahun":"2014","sn":"14325CT22949427","id_mntnc_tkn":9}]} . that if I select on dropdown "2014".this the full logs HibernateLog --> 15:37:10 DEBUG org.hibernate.SQL - select * from dash_merk where tahun ='2014' 2016-03-08 15:37:10 DEBUG SQL:109 - select * from dash_merk where tahun ='2014' Hibernate: select * from dash_merk where tahun ='2014' Sending this data to view meeeeeeeeeeeerk: {"merk":[{"merk":"ingenico","tahun":"2014","sn":"14325CT22949427","id_mntnc_tkn":9}]}

Kishore Barik Over a year ago

I have updated the ajax call, take a look at that. That should solve your problem how ever you won't be able to use JSTL in the table anymore and your table update will be done by javascript only

Collectives™ on Stack Overflow

change table value after select dropdown using javascript

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related