CODEWITHSUNDEEP
javascriptphpmysqlloopswhile-loop
Hussain Mustafa
Hussain Mustafa

Reputation: 7

How Do i Loop Js with mysql while loop

Hey Guys i need to ask is that how can i loop the javascript with the while loop As My code is this

    $i=0;
    while($row = mysqli_fetch_array($result)) {
    echo '<div class="grid_1_of_4 images_1_of_4" >
                <form method="post" action="......">
                <a class = "popup-link" href = "'.$row['shade_enlarged_img'].'" alt = "" title = "'.$row['shade_desc'].'">
                 <img src="'.$row['shade_img'].'" alt="" title = "click to enlarge"/> </a>
                 <h2>'.$row['shade_desc'].'</h2>
                 <p style="font-size:0.95em"><b>Code: '.$row['shade_code'].'</b></p>
                 <p>Category: '.$row['categories'].'</p>';
                 $code=$row['shade_code'];
                 $result_quantity = mysqli_query($con,"SELECT ...........);
                 $num_of_rows=mysqli_num_rows($result_quantity);
                 $count=0;?>
                                     <script>
                function showUser(str) {
                  if (str=="") {
                    document.getElementById("txtHint<?php echo $i; ?>").innerHTML="";
                    return;
                  } 
                  if (window.XMLHttpRequest) {
                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp=new XMLHttpRequest();
                  } else { // code for IE6, IE5
                    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
                  }
                  var url = "getprice.php?brand=<?php echo $row['brand_name']; ?>&category=<?php echo $row['categories'];?>&q="+str;
                  xmlhttp.onreadystatechange=function() {
                    if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                      document.getElementById("txtHint<?php echo $i; ?>").innerHTML=xmlhttp.responseText;
                    }
                  }
                  xmlhttp.open("GET",url,true);
                  xmlhttp.send();
                }
                </script>       <?php
                 echo '<p style="font-size:0.71em">Available Packaging: <select name="product_qty" onchange="showUser(this.value)" style="margin-left:4px; font-size:1.02em;">
                 <option value=""></option>';
                 while($row_quantity = mysqli_fetch_array($result_quantity)) {
                 echo '<option value="'.$row_quantity['quantity'].'">'.$row_quantity['quantity'].' '.$row_quantity['quantity_unit'].'</option>';
                }
                 echo '</select></p>'; 


                 echo '<div id="txtHint'.$i.'"><b>Person info will be listed here.</b></div>'; 
                 echo '</p>';
                 echo '<p style="font-size:0.71em">Quantity: <input type="number" style="display:inline; width:50px;" name="number_of_units" min="1"></p>';
                 echo '<button class="button"><span class="cart-button"><img src="images/cart.jpg" alt="" />Add to Cart</span> </button>
                 <input type="hidden" name="product_code" value="'.$row['shade_code'].'" />

                 </form>
            </div>'; $i++;

the Code Works Well but as i'm calling all the items by while loop from mysqldatabase so when i run this code this only works on the 1st item and rest does'nt work.. Watch This Images For A Quick Veiw http://imgur.com/2qM0FzX

Upvotes: 0

Views: 945

Answers (3)

Rasclatt
Rasclatt

Reputation: 12505

I think you will have a problem with #products because you can't have the same id="products" over and over again otherwise the jQuery doesn't know which to switch. Actually, same with #priceInput. Try adding the auto-incrementing $i as demonstrated below. 

    <?php
    $i = 0;
while($row = mysqli_fetch_array($result)) { ?>
    <div class="grid_1_of_4 images_1_of_4" >
        <form method="post" action="page.php">
            <a class = "popup-link" href = "<?php echo $row['shade_enlarged_img']; ?>" alt = "" title = "<?php echo $row['shade_desc']; ?>">
             <img src="<?php echo $row['shade_img']; ?>" alt="" title = "click to enlarge"/> </a>
             <h2><?php echo $row['shade_desc']; ?></h2>
             <p style="font-size:0.95em"><b>Code: <?php echo $row['shade_code']; ?></b></p>
             <p>Category: <?php echo $row['categories']; ?></p>

             <script>
            $(function () {
                $('#products<?php echo $i; ?>').change(function () {
                    $('#priceInput<?php echo $i; ?>').val($('#products<?php echo $i; ?> option:selected').attr('data-price'));
                });
            });
            </script>
             <p style="font-size:0.71em">Available Packaging: <select id="products<?php echo $i; ?>" name="product_qty" style="margin-left:4px; font-size:1.02em;" onChange="ShowInfo('<?php echo $i; ?>','<?php echo $row['brand_name']; ?>','<?php echo $row['categories']; ?>')">
             <?php
             $code                  =   $row['shade_code'];
             $result_quantity       =   mysqli_query($con,"SELECT ............");
             $num_of_rows           =   mysqli_num_rows($result_quantity);
             $count                 =   0;
             while($row_quantity    =   mysqli_fetch_array($result_quantity)) { ?>
                    <option value="<?php echo $row_quantity['quantity']; ?>" data-price="<?php echo $row_quantity['price']; ?>"><?php echo $row_quantity['quantity'].' '.$row_quantity['quantity_unit']; ?></option><?php 
            } ?>

            </select></p>
            <div id="txtHint<?php echo $i; ?>"><b>Person info will be listed here.</b></div>
            Price :<input type="text" name="price" value="" id="priceInput<?php echo $i; ?>" disabled="disabled"/>
                <p style="font-size:0.71em">Quantity: <input type="number" style="display:inline; width:50px;" name="number_of_units" min="1"></p>
                <button class="button"><span class="cart-button"><img src="images/cart.jpg" alt="" />Add to Cart</span> </button>
            </form>
        </div><?php
        $i++;
} ?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script>
 function ShowInfo(IdNum,RowBrand,RowCat) {

        // Get the value of the selected dropdown
        var SelVal  =   $('#products'+IdNum).val();

        $.ajax({
            type : 'GET',
            url:"getprice.php?brand="+RowBrand+"&category="+RowCat+"&q="+SelVal;
            success: function(result){
                    $('#txtHint'+IdNum).html(result);
                }
        });
    }
</script>

Upvotes: 1

faby
faby

Reputation: 7558

that is because the mysql_fetch_array function returns one row at a time. If you want all the rows you should iterate over the results

 $row = mysqli_fetch_array($result_quantity);
   $total =  mysql_num_rows($variable_resultfrom_sql_query);
   while($row = mysql_fetch_array($variable_resultfrom_sql_query))

Upvotes: 0

les
les

Reputation: 584

Try the .= which will continue to add the latest results from you mysqli_fetch_array query.

Then just echo that summed up value you assigned to $just_a_variable out to the page or back to ajax etc.

<?php
    $just_a_variable = '';    
    $just_a_variable .= '<p style="font-size:0.71em">Available Packaging: <select id="products" name="product_qty" style="margin-left:4px; font-size:1.02em;">';
    while($row_quantity = mysqli_fetch_array($result_quantity)) {
        $just_a_variable .= '<option value="'.$row_quantity['quantity'].'" data-price="'.$row_quantity['price'].'">'.$row_quantity['quantity'].' '.$row_quantity['quantity_unit'].'</option>';
    }
    $just_a_variable .= '</select></p>';
    $just_a_variable .= ' Price :<input type="text" name="price" value="'.$row_quantity['price'].'" id="priceInput" disabled="disabled"/>';

    echo $just_a_variable;
?>

Upvotes: 0

Related Questions