jQuery/Ajax - list images from a folder in select/option tag

trying grab list of images folder , loop through them create <select><option> list using ajax. found piece of code while googling solution job (i added click event want list refresh/update if new image uploaded folder without page re-load) of course result code appends same image names on each click end multiple images same name in list!

 

$(document).ready(function() {

$('.product-images').click(function() {

$.ajax({

url: "images",

success: function(data){

$(data).find("a:contains(.jpg)").each(function(){

// loop through

var images = $(this).attr("href");

$('<option value="' + images + '"></option>').html(images).appendto('.product-images');

});

}

});

});

});

</script>

 

 

the above gets list of images folder named 'images' , appended below:

 

 

<select name="product-images" class="product-images">

<option>select image</option>

</select>

 

 

what need stop same image names being appended each time <select> tag clicked.

 

anyone tried before , has solution?

 

i can append list once if new images added folder dont show until page re-freshed.

 

 

os

what need stop same image names being appended each time <select> tag clicked.

 

your current code doing upon every click action of product-images select list. if understand correctly, want append images product-images select list. can when page loads omitting click event handler in current code. or want load current images folder , automatically load new images list in faux realtime via ajax call? way via ajax not append there, "rebuild" select list on every click event. users may lose selected list items if click, click away, click select list though. or store image names in database , run queries db via ajax call ensure duplicate records not appended list if appended on subsequent ajax calls. programming logic scenario pretty straight-forward.

 

i can append list once if new images added folder dont show until page re-freshed.

 

to new images (or realtime data matter) instantly load page term referred reactive development in node applications. more info. trying load new data in faux socket via ajax call processor intensive , taxing client. it's lot of request/waitforresponse calls server when using ajax/php, taxing when method scaled. using open sockets via node application best approach this.

 

best,

shocker

More discussions in Dreamweaver support forum

adobe