CODEWITHSUNDEEP
jqueryhtmlajax
basiclearner
basiclearner

Reputation: 49

Ajax image NOT changing on dropdown selection

HTML

    <div class="new-product">
        <div class="col-md-5 zoom-grid">
            <div class="flexslider">
                <ul class="slides">
                     <li data-thumb="images/<?php echo $productimg1?>">
                        <div id="style_image" class="thumb-image" ><img  src="images/<?php echo $productimg1?>" data-imagezoom="true" class="img-responsive" alt="" /> </div>
                    </li>
                    <li data-thumb="images/<?php echo $productimg2?>">

                </ul>
            </div>
        </div>

I have this html where image comes from database using php now I need to change that image with ajax 

    <script>

function getState(val) {

    $.ajax({
    type: "POST",
    url: "check.php",
    data: {id: val},
    dataType:'json',
    success: function(data){
        $("#style_code").children().remove();
        $("#style_image").children().remove();
         data.option.forEach(function (item) {
                $("#style_code").append('<option value="' + item.color_name + '">' + item.size + '</option>');

                $('#style_image').append('<img  src="images/'+item.image_name+'" data-imagezoom="true" class="img-responsive" alt="" />')
            //$("#style_image").html(data);


            });

    }
    });
    }
</script>

check.php

        <?php 

$con=mysqli_connect("localhost","root","","ecommercedb") or die(mysql_error());


if(!empty($_POST["id"])) {
    $query ="SELECT * FROM stylecolor WHERE color_code = '" . $_POST["id"] . "'";       $results = mysqli_query($con,$query);
     while (($row = mysqli_fetch_object($results))) {
        $data->option[] = $row;

    }

}
      echo json_encode($data);
  ?>

It's not changing the image on slider but when I call it somewhere else it is working fine. I am using 2 functions on 1 dropdown item ,i.e. it changes the other dropdown options and an image .

Upvotes: 0

Views: 50

Answers (1)

Eddie
Eddie

Reputation: 26854

You should use style_image as id. Like:

<div  id="style_image" class="thumb-image" >

NOT:

<div  #style_image class="thumb-image" >

Upvotes: 1

Related Questions