How to distinguish between two array on jquery that getting data as from mysql using codeigniter

Question

You know, I really confuse use jquery with codeigniter. I create a web application to monitoring a request form from user. I have a view on html that displayed a table like this :

+---------------+--------------------+
| id_request    |  comment_bapak     |
+---------------+--------------------+
|   001         |                    |
|   002         |                    |
|   003         |                    |
+---------------+--------------------+

I was wondering to create some alert in jquery or javascript when the column 'comment_bapak' is inserted by user. So, i use autorefresh page on jquery.Let say, an user is inserted "This is comment of id_request 002" and then, on web will be displayed alert("Request 002 has inserted") and the table would be refresh like this.

+---------------+---------------------------------+
| id_request    |  comment_bapak                  |
+---------------+---------------------------------+
|   001         |                                 |
|   002         |This is comment of id_request 002|
|   003         |                                 |
+---------------+---------------------------------+

So, this is my code

Model

public function getKomentarMD() {
    $this->db->select('id_request, comment_bapak');
    $query = $this->db->get('tbl_requestfix');
    return $query->result_array();
}

Controller

public function getKomentarMD() {
    $row = $this->model_request->getKomentarMD();
    echo json_encode($row);
}

view

<td class="sorting1" id='no_request' data-id-reseh="<?php echo $data['id_request']; ?>"><?php echo $data['id_request']; ?></td>
<td class="center" id="tanggap_md"><?php echo $data['jawaban_bapak']; ?> /td>

Jquery

function refreshAkibatCommentMD() {
    var temp[];
    var requestMasuk = $('#tanggap_md').text();
    var audioElement = document.getElementById('notif-md');

    audioElement.addEventListener('ended', function() {
        this.currentTime = 0;
        this.play();
    }, false);

    setTimeout(function() {
        $.ajax({
            url: '<?php echo base_url() . 'control_closing/getKomentarMD/' ?>',
            type: 'POST',
            dataType: 'json',
            success: function(obj) {
                audioElement.play(); //playing tone
                alert(obj.comment_bapak);// debugging

                ?? Please help...

                refreshAkibatCommentMD();
            }
        });
    }, 5000);
}

I have 2 question.

1. Why alert(obj.comment_bapak) gives me undefined ?
2. I think, I should create a new array on jquery as temporary to distinguish with new array that get from autorefresh ?

Any help and suggestion it so appreciated.

Update

-----------------------------------------------------------

I have two page, first is an user form and the second is monitoring page. Both page have a same table display. I meant, when user update a row on table, there will be a alert notification on monitoring page where the row has updated. So I use Jquery/Js to handle this.

I have an idea like this.

1. When monitoring page is load on first time, call all id, comment_bapak from database and save as first array object.

2. With auto refresh on JS/Jquery, use ajax to call all id, comment_bapak from database and save as second array object. So, let say user has updated some row, there will be difference with first array object. Am I right ?

3. Check all item on object. Find the different between two array, and when it found, it must be an alert notification ?

4. If success, change value first array objet with second array object. So on so on...

Do you have any idea ?

Answer 1

On your first question: the output of the console.log(obj) suggests that you get an array of objects. I do not see any mention of where you select a specific row from the database, and the ajax-response contains all rows, not just the one that has changed. So I suspect that your method is to just receive all comments.

You might keep an extra array with the 'current' comments (is that what you meant with the second quesstion?) and compare it to the json object.

In the page, also create an object ("associative array") in javascript:

var current_comments = {
    1: null,
    2: null.
    3: null
);

with all id's and comments from the database.

Then, in the ajax success-function, do something like:

success: function(obj) {
    var id, comment;
    audioElement.play(); //playing tone
    foreach (item in obj) {
        id = parseInt(item['id_request'], 10);
        comment = item['comment_bapak'];
        if (current_comments[id] !== comment) {
            // the comment changed!
            alert(comment);// debugging
            refreshAkibatCommentMD();
        }
    }
}

---

Update

(for the update of your question)

Following your idea:

1: Yes. That is what I suggested as the current_comments object. Good starting point.

2 and 3: Of course it is possible to store the ajax result in a separate object, but that is also what you get from the ajax call. So it is easier (and uses less resources) to just traverse the object you get from the ajax call. For each item in the list, you check whether it is equal to the "old" situation. If not: alert.

4: Yes, of course you need to store the new result into the first object (current_comments).

So, basically, what you suggest is already in my answer. I'm not sure what the function refreshAkibatCommentMD() does, but if you provide it with the id and comment (in the loop), then this function can update the current_comments object.

success: function(obj) {
    var id, comment;
    audioElement.play(); //playing tone
    foreach (item in obj) {
        id = parseInt(item['id_request'], 10);
        comment = item['comment_bapak'];
        if (current_comments[id] !== comment) {
            // the comment changed!
            alert(comment);// debugging
            refreshAkibatCommentMD(id, comment);
        }
    }
}

function refreshAkibatCommentMD(id, comment) {
    // some logic to update the comment for row with id
}

Small note: you may want to read up a bit on the difference between arrays and objects in javascript. An array can not be "associative"; in that case it will always be an object! See for example this answer on StackOverflow.