0

I have an Ajax request that is returning a JSON array formatted like this: [101, 102] The data in the array is ids of images stored in a database.

What I want to do is display all the images on the page with a checkbox beside each individual image. If the image_id is in the array above then I want the checkbox checked.

Everrything is working correctly except the checking of the checkbox

Here is a snippet of my code:

$.get('get_thumbs.php?category=' + selected,
function (data) {
    $.get('get_selected_photos.php?product_id=' + product,
        function (returned) {
            po = $.parseJSON(returned);
        });
    var d = $.parseJSON(data);
    if (d != null) {
        var fieldWrapper = $("<ul>");
        $.each(d, function (index, value) {
            var checked = "";
            var fName = $("<li><img src=\"../" + value["thumb"] + "\"</li>");

            var fType = $('<input>', {
                type: "checkbox",
                id: "checkbox" + value["photo_id"],
                value: value["photo_id"],
                checked: ($.inArray(value["photo_id"], po) > 0 ? true : false)
            });

            fType.click(function () {
                var intId = $(this).val();
                if ($(this).is(':checked')) {
                    var sel = $(this).val();
                    $.get('get_sizes.php?photo_id=' + sel,
                        function (data) {
                            var d = $.parseJSON(data);
                            var tableWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
                            var tName = d;
                            tableWrapper.append(tName);
                            $("#buildyourform").append(tableWrapper);
                        });
                } else {
                    $("#field" + intId).slideUp(function () {
                        $(this).remove();
                    })
                }
                $("#buildyourform").show();
            });
            fType.unbind("click", function () {
                $(this).parent().remove()
            });
            fName.append(fType);
            fieldWrapper.append(fName);
        });
        $("#avail_images").append(fieldWrapper);
    } else {
        $("#avail_images").html("<h2>There are currently no images associated with this Category.</h2>");
    }

The problem is that ($.inArray( value["photo_id"], po ) > 0 ? true : false) doesn't seem to be working correctly. The variable 'po' is been populated from teh AJAX call so maybe I am missing something.

Any advice greatly appreciated.

Phoenix Bird
  • 1,187
  • 1
  • 8
  • 22
user1801579
  • 31
  • 3
  • `$.inArray( value["photo_id"], po ) != -1` ??? https://api.jquery.com/jQuery.inArray/ – A. Wolff Mar 06 '14 at 14:16
  • possible duplicate of [How to return the response from an AJAX call?](http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call) – Jason P Mar 06 '14 at 14:20
  • 1
    `po` gets data in the callback of your second request but you try to read it in the callback of your first – Robin Webdev Mar 06 '14 at 14:20
  • 1
    Also, a value of `0` would mean that the item was the first in the list. You probably want `$.inArray( value["photo_id"], po ) > -1` or `$.inArray( value["photo_id"], po ) >= 0` – Jason P Mar 06 '14 at 14:21
  • Use `xs.forEach(f);` instead of `$.each(xs, f);`, and `xs.indexOf(x)` instead of `$.inArray(xs, x)`. – Aluan Haddad Apr 28 '17 at 15:12

1 Answers1

0

i would recommend you incorporate Underscore.js on your code, it will improve a lot and it will make your life easier.is really easy to read, it has cross browser support.

http://underscorejs.org/

is really verbose.

_.isArray(someVariable); // boolean return

it also provides a lot of functionalities for manipulating data. examples: 

_.isEmpty([]); // validates empty string, empty arrays, and empty objects {}
_.last([1, 2, 3, 4, 39]); // returns the last item on array

take a look

Cheers

luster
  • 148
  • 4