Inside jquery function append html code got an error

Question

This is My jquery function here i append html code inside the function. That's got an error

function onDivisionChange() {
  $.ajax({
    type : 'POST',
    dataType : 'json',
    url : '/Example/selectDivision.html',
    data : ({
        id : $('#division').val()
    }),
    success : function(responseData) {

        if (responseData != null) {

            $('#student').find('td').remove().end().append('').val('-1');
            $.each(responseData, function(index, item) {

                $('#student').append(   
                    $('<td></td>').val(item['id']).html(item['id']),

                    $('<td></td>').val(item['id']).html(
                         '<a href="edit.html?id=' + item['id'] + '" >Edit</a>'),
                                                       ^ 
                                                       |_ Here Error Occured

  Error is the  '+ item['id'] + ' this line takes as string, not the id value 

   in browser Link as  ->   edit.html?id=' + item['id'] + '

            Correct format is  edit.html?id= 41            


                    $('<br />').val(item['id']).html(item['']));

            });
        } 
    }

});

}

If you know about this error please share your answer

EDIT

The page

function onStudentDivisionChange() {
    $.ajax({
        type : 'POST',
        dataType : 'json',
        url : '/Example/selectDivision.html',
        data : ({
            id : $('#division').val()
        }),
        success : function(responseData) {

            if (responseData != null) {

                $('#student').find('td').remove().end().append(
                        '').val('-1');
                $.each(responseData, function(index, item) {

                    $('#student').append(
                            $('<td></td>').val(item['id']).html(
                                    item['id']),
                            $('<td></td>').val(item['id']).html(
                                    item['name']),
                            $('<td></td>').val(item['id']).html(
                                    item['fatherName']),
                            $('<td></td>').val(item['id']).html(
                                    item['motherName']),
                            $('<td></td>').val(item['id']).html(
                                    item['admissionNo']),
                            $('<td></td>').val(item['id']).html(
                                    item['phoneNo']),
                            $('<td></td>').val(item['id']).html(
                                    '<a href="edit.html?id=' + (item['id']) + '" >Edit</a>'));
                    alert("Id:"+item['id']);

                });
            } else {
                $('#student').find('td').remove().end().append(
                        '<td th:text="${student}"></td>').val('-1');
            }
        }

    });
}

Please specify which error. Also please insert console.log(JSON.stringify(item)) just before the error line, and report what it outputs. — Amadan
– Amadan, Commented Nov 29, 2013 at 6:58
@Amadan the error is type mismatch error because the ' + item['id'] + ' is take as string not the inside value i think it's because the wrong format of quarts the Error show in console is Field error in object 'student' on field 'id': rejected value [' item['id'] ']; codes [typeMismatch.student.id,typeMismatch.id,typeMismatch.long,typeMismatch] — Prasanth A R
– Prasanth A R, Commented Nov 29, 2013 at 7:01
@user2310289: If it was an array, item['id'] would be undefined. It should be an object. — Amadan
– Amadan, Commented Nov 29, 2013 at 7:03
That error message "Field error...." seems to be an error generated by Spring framework, and nothing to do with clientside - neither jQuery nor HTML. — Amadan
– Amadan, Commented Nov 29, 2013 at 7:06

Scary Wombat · Accepted Answer · 2013-11-29 07:53:04Z

1

Thanks for you update to your question.

try doing

success : function(responseData) {

$.each(responseData, function(index, item) {
   var id = this.id;
   alert(id);

or

   var id = $(this).attr('id');

see jquery each loop examples

edited Nov 29, 2013 at 7:53

answered Nov 29, 2013 at 7:41

Scary Wombat

44.9k6 gold badges38 silver badges67 bronze badges

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

Comments

Furquan Khan · Accepted Answer · 2013-11-29 07:14:00Z

0

I guess you can try using parseInt() to convert it.

 $('<td></td>').val(item['id']).html(
                     '<a href="edit.html?id=' + parseInt(item['id']) + '" >Edit</a>')

answered Nov 29, 2013 at 7:14

Furquan Khan

1,5941 gold badge15 silver badges30 bronze badges

Collectives™ on Stack Overflow

Inside jquery function append html code got an error

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related