jquery-the output is always in the first item only

Question

I am trying to create a web store and I use Jquery in radio button for selecting a category but the output is always on the first item only not in each items.

here is the jquery code

function populateswatches() {

        var swatchesName = $('input[name=optradio]:checked').val();

        $.getJSON('getdata.php', {swatchesName: swatchesName}, function(swatch) {

            var html = '';
            $.each(swatch, function(index, array) {
                html = html + '<div class="col-md-3 w3-margin-top"><div class="w3-display-container w3-hover-opacity"><div class="w3-center"><input type="radio" name="swatches_code" value="' + array['swatches_code'] + '" required></div><div class="w3-display-middle w3-display-hover"><a href="../backend/functions/images/'+array['images']+'" target="_blank"><button type="button" class="btn btn-primary"><i class="fa fa-search fa-lg" aria-hidden="true"></i></button></a></div><img src="../backend/functions/images/'+array['images']+'" style="width:100%"><div class="w3-center">' + array['swatches_code']+'</div></div></div>';
            });
            $('#swatches').html(html);
        });
    }

    $(function() {
        $(this).change(function() {
            populateswatches();
        });
    });

here is the code for php. it is not complete though.

$priceSQL="SELECT * FROM price WHERE id_item='$IDitem'";
        $priceRES=mysqli_query($conn,$priceSQL);
        while($priceROW=mysqli_fetch_assoc($priceRES)){
            $id_categ=$priceROW["id_category"];

            $catSQL="SELECT * FROM category WHERE id_category='$id_categ'";
            $catRES=mysqli_query($conn,$catSQL);
            while($catROW=mysqli_fetch_assoc($catRES)){
            echo '
                <div class="radio">
                  <label><input type="radio" name="optradio" value="'.$priceROW["price"].'-'.$id_categ.'" required>'.$catROW["swatches_category"].'- &#8369;'.formatMoney($priceROW["price"]).'</label>
                </div>
            ';
            }
        }                   
            </li>
        </ul>
            <h4>SWATCHES</h4>   
            <div class="form-group">
                <span id="swatches"></span>
            </div>  
            <input type="hidden" value="'.$IDitem.'" name="id_item">        
        </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-success">Add to Cart</button>

here is the output here is the image output for it

it's because you used same `id` for each `span`. so that's why it's working only for first one.convert `id` to `class`.BTW always share your actual code not pictures, because it's hard to identify the problem in images.(Very time consuming too, and no-one have interest to check images and try to find out bugs) — Alive to die - Anant, Jul 03 '17 at 04:52

score 0 · Accepted Answer · answered Jul 03 '17 at 04:51

0

Reason:-

id is treated as unique identifier in jQuery.Since all spansin your code have same id, that's why code only working for first-one.

Solution:-

Convert id to class in your HTML code like below:-

<span class="swatches"></span>

And change # to . in jQuery like below:-

$('.swatches').html(html);

Note:- class is treated as a group identifier in jQuery and work on each element which share same class.

answered Jul 03 '17 at 04:51

Alive to die - Anant

70,531
10
51
98

thanks, it works bro but there is another problem. when i pick the 2nd item then its output remain on the 1st item and i cant change it. – Cliford Ching Jul 03 '17 at 05:08
@ClifordChing i din't get you. can you ask a new question with your new problem so that you can get answer quickly. Please ask a well described question with proper code input.(Best if you can create a fiddle example for your problem)Thanks – Alive to die - Anant Jul 03 '17 at 10:32
thanks bro i created new post for the new problem. here is the link for that. to anyone that also needed this for reference here is the link https://stackoverflow.com/questions/44879927/jquery-the-first-one-to-click-will-bound-on-all-the-items – Cliford Ching Jul 04 '17 at 00:12

jquery-the output is always in the first item only

1 Answers1