Adding checkbox with JS, and find it in server side code (ASP.NET)

Question

I am making a page where all the images are retriaved from the server/database, and shown on the page. For this I use AJAX. The code below retrieves an array with references to images, and an index. From that info I line up the images. What I want to do, is to give the user the possibility to delete chosen images. These images should be chosen through a checkbox. My problem is that I don't know how to add a checkbox (below the image) so that it corresponds to each image, and also find that checked value in the C# code. I will need to find it, since I have to find the checked image in the database and delete it. Does anyone know how to do this? Normally to find an ID in the C# code, we apply the runat="server" on the aspx page, but this time, the IDs are added dynamically, and with JS code.

function loadImage(array, index) { 
    for (i = 0; i < array.length; i++) {
        $("#parentDiv").append("<span style='padding-left: 10px; margin-top: 5px;' id='span_" + i + "'></span>");
        $("#span_" + i + "").append("<img style='width: 100px; height: 90px;' id='img_"+i+"' src='" + array[index] + "' />");
        index++;
    }
}

Why not just have the client send the list of IDs to delete and let the server remove them from the database and send back a new list of data to rebind the user interface via a jQuery AJAX POST? — Karl Anderson
– Karl Anderson, Commented Aug 17, 2013 at 19:22

Mister Epic · Accepted Answer · 2013-08-17 19:48:55Z

1

In cases like these, I like to take advantage of HTML5 data attribute (http://www.w3.org/TR/2010/WD-html5-20101019/elements.html#embedding-custom-non-visible-data-with-the-data-attributes) This allows you to embed a target for your checkbox in its markup. The following hasn't been tested, and I took a guess about your checkbox markup, hopefully it gives you the idea.

function loadImage(array, index) { 
    for (i = 0; i < array.length; i++) {
        var imageId = 'img_"+i+"';
        $("#parentDiv").append("<span style='padding-left: 10px; margin-top: 5px;' id='span_" + i + "'></span>");
        $("#span_" + i + "").append("<img style='width: 100px; height: 90px;' id='" + imgeId + "' src='" + array[index] + "' />");
        $("#parentDiv").append('<input type="checkbox" class="imgDelete" name="imgCheck" data-image-target="' + imageId + '">')
        index++;
    }
}

Then you bind a handler to your checkboxes like so:

$('imgDelete').click(function(e){
    var idOfImageToDelete = $(this).attr('data-image-target');
    ///Call to web service to delete image
});

You can also embed data with jQuery's data() function, but I personally prefer seeing the data written into the element's markup so I can better review it with my developer toolkit.

edited Aug 17, 2013 at 19:48

answered Aug 17, 2013 at 19:34

Mister Epic

16.8k13 gold badges88 silver badges156 bronze badges

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

5 Comments

AomSet Over a year ago

Thanks. I don't use html5 yet, since browsers it makes you struggle with old browsers.

Mister Epic Over a year ago

Don't worry! You can use it with IE as I've explained, as it is actually jQuery that is leveraging the data attribute.

AomSet Over a year ago

It seems to add the check box nice and neat. But how does the "data-image-target" work? Nothing really comes up when googling on it. Does the checkbox that appear next to the image automatically belong to that image?

Mister Epic Over a year ago

I totally made it up, that's the beauty of it. We can arbitrarily attach data to our elements thanks to HTML5 data attributes!Then we can access it through jQuery's attr() method. So, for each checkbox, I've attached this data-image-target attribute which I leverage to track which checkbox is related to which image. ref ejohn.org/blog/html-5-data-attributes

AomSet Over a year ago

How can I get the image that belongs to the checkbox that is checked? I'm thinking that I can just get the value/numer of the 'data-image-target', and the id of all the images, then see which id number is equal to the 'data-image-target'. The image that has the identical id/number would be the one I need. But I'm sure there is a smarter way to it? So overall, I want to get the images that belongs to the checked boxes, and delete those. But I need to retrieve them before I can delete them

Collectives™ on Stack Overflow

Adding checkbox with JS, and find it in server side code (ASP.NET)

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related