Question

I’ve a question on using Jquery on a table.

I don’t know if I’m doing it the right way and hence I ended up asking my question here after much research.

What I want is to compare the items in the variable array which holds the string converted response from JSON and if they match the list in the table, the checkbox would be disabled.

Appreciate any inputs. 🙂

jQuery code:

function refreshKeywords(e) {
    e.preventDefault();
    var refresh_form = jQuery(e.target);
    $.ajax({
        url: refresh_form.attr('action'),
        type: refresh_form.attr('method'),
        data: refresh_form.serialize(),
        dataType: 'json',
        success: function(response) {
            var array = $.parseJSON(response.new_list);
            alert(array);
            var html = '';
            $.each(array, function(i, item) {
                html += "<li>" + item + "</li>";
                if ($('#checkKeywords :input') == array) {
                    $('#validate').attr('disabled', true);
                }
            });
            $('#keywords').append(html);
            if ($('#checkKeywords :input') == array) {
                $('#validate').attr('disabled', true);
            }


        },
    });
}

Below is my table HTML code:

<table id="checkKeywords">
    <tbody>
        {% for keyword in keyword_list %}
            {% if forloop.counter|divisibleby:"3" %}<tr>{% endif %}
            <td>
              <input type="checkbox" id= "validate" name="cb" value="keywords" />
              {{keyword.keyword_name}}
            </td>
            {% if forloop.counter|add:"1"|divisibleby:"3" %}</tr>{% endif %}
        {% endfor %}
    </tbody>
</table>

Answer 1

I think some error comes from these lines:

var array = $.parseJSON(response.new_list);

returns a well formatted Javascript object but when you are comparing with

if($('#checkKeywords :input') == array){...}

You’re comparing a set of Javascript objects with well formatted JSON parsed JS objects which are not quite compatible with the value returned from $('#checkKeywords :input') == array.

If both operands are objects, they’re compared as objects, and the
equality test is true only if both refer the same object. MDN Docs

---

I would suggest to make the two objects comparable using some modification which will take the two objects and process them to return true or false according to whether the are equal.

Update:

In your HTML code

<td>
   <input type="checkbox" id="validate" name="cb" 
      value="{{keyword.keyword_name}}" />{{keyword.keyword_name}}
</td>

From your JS

...
$.each(array, function(i, item) {
    html += "<li>" + item + "</li>";
    theinputs = $('#checkKeywords :input')
    $.each(theinputs, function(i, checkbox) {
        if ($(checkbox).val() == item) {
            $(checkbox).prop('disabled', true);
            /* thanx charlietfl */
        }
    });

});
$('#keywords').append(html);
...