Doubt how to loop in JavaScript

0

Hello, I have this code below:

        <div class="center_content" style="background:<?php echo $res['fundosite_cor']; ?>; width:588px; float:left;">
    <?php
    include "conexao.php";
    $codigo = $_POST['codigo'];
    $img01 = $_POST['img01'];
    $img02 = $_POST['img02'];
    $img03 = $_POST['img03'];
    $img04 = $_POST['img04'];
    $titulo = $_POST['titulo'];
    $preco = $_POST['preco'];
    $query = mysql_query("SELECT * FROM produto ORDER BY RAND() LIMIT 9");

    while($res = mysql_fetch_array($query)){
    ?>

    <div style="background-color:<?php echo $res['fundosite_cor']; ?>;; padding:11px;" class="center_prod_box">

            <div id="titulo" class="product_title">
                <?php echo $res['titulo']; ?>
            </div>
        <script>
            jssor_slider2_starter = function (containerId) {
                var options = {
                    $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)

                    $BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
                        $Class: $JssorBulletNavigator$,                       //[Required] Class to create navigator instance
                        $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                        $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                        $AutoCenter: 0,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                        $Steps: 1,                                      //[Optional] Steps to go for each navigation request, default value is 1
                        $Lanes: 1,                                      //[Optional] Specify lanes to arrange items, default value is 1
                        $SpacingX: 0,                                   //[Optional] Horizontal space between each item in pixel, default value is 0
                        $SpacingY: 0,                                   //[Optional] Vertical space between each item in pixel, default value is 0
                        $Orientation: 1                                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
                    }
                };
                var jssor_slider2 = new $JssorSlider$(containerId, options);
            };
        </script>
        <!-- Jssor Slider Begin -->
        <!-- To move inline styles to css file/block, please specify a class name for each element. --> 
        <div id="slider2_container" style="position: relative; top: 0px; left: 0px; width: 173px;
            height: 173px; background-color:<?php echo $res['fundosite_cor']; ?>;">

            <!-- Loading Screen -->
            <div u="loading" style="position: absolute; top: 0px; left: 0px;">
                <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                    background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
                </div>
                <div style="position: absolute; display: block; background: url(img/loading.gif) no-repeat center center;
                    top: 0px; left: 0px;width: 100%;height:100%;">
                </div>
            </div>

            <!-- Slides Container -->
            <div u="slides" style="background-color:<?php echo $res['fundosite_cor']; ?>;cursor: move; position: absolute; left: 0px; top: 2px; height:150px; width:173px; text-align:center;
                overflow: hidden;">
                <div>
                    <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                        <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img01']; ?>" />
                    </a>
                </div>
                <div>
                    <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                        <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img02']; ?>" />
                    </a>
                </div>
                <div>
                    <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                        <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img03']; ?>" />
                    </a>
                </div>
                <div>
                    <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                        <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img04']; ?>" />
                    </a>
                </div>
            </div>

            <!--#region Bullet Navigator Skin Begin -->
            <!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
            <style>
                /* jssor slider bullet navigator skin 03 css */
                /*
                .jssorb03 div           (normal)
                .jssorb03 div:hover     (normal mouseover)
                .jssorb03 .av           (active)
                .jssorb03 .av:hover     (active mouseover)
                .jssorb03 .dn           (mousedown)
                */
                .jssorb03 {
                    position: absolute;
                }
                .jssorb03 div, .jssorb03 div:hover, .jssorb03 .av {
                    position: absolute;
                    /* size of bullet elment */
                    width: 21px;
                    height: 21px;
                    text-align: center;
                    line-height: 21px;
                    color: white;
                    font-size: 12px;
                    background: url(img/b03.png) no-repeat;
                    overflow: hidden;
                    cursor: pointer;
                }
                .jssorb03 div { background-position: -5px -4px; }
                .jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; }
                .jssorb03 .av { background-position: -65px -4px; }
                .jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; }
            </style>
            <!-- bullet navigator container -->
            <div u="navigator" class="jssorb03" style="bottom: 1px; left: 40px;">
                <!-- bullet navigator item prototype -->
                <div u="prototype"><div u="numbertemplate"></div></div>
            </div>
            <!--#endregion Bullet Navigator Skin End -->

            <!-- Trigger -->
            <script>
                jssor_slider2_starter('slider2_container');
            </script>
        </div>
        <!-- Jssor Slider End -->                
            <div id="preco" class="prod_price">
                <span style="">
                R$ <?php echo $res['preco']; ?>
                </span>
            </div>                        

            <div id="carrinho" class=""><br />
                <a href="prod_carrinho.php?acao=add&codigo=<?php echo $res['codigo']; ?>">
                    <img style="position:relative;top:50%;transform:translateY(-50%); "width="20" src="img/carrinho.png" title="Por no Carrinho" />
                </a>
            </div>                        
                        <hr id="linha1" />
                        <hr id="linha2" />
        </div>
    <?php
    }
    ?>

    </div>

The purpose is to access the page you would like 9 random products to appear. For this I thought that only giving a WHILE in the php code would work, but pure mistake, because I can only loop the files that are in the products table, but I can not make the script work.

I am attaching the addresses below so that friends can give a review and tell me what is missing or how can I make it work.

Problem page - link

Running the script without the PHP WHILE - link

I hope I have been able to express myself so that friends can understand my need.

Hugs to all and awaiting positive responses if possible.

    
asked by anonymous 16.03.2016 / 13:27

2 answers

0

Save the result to an array then you can go through it in Javascript Example

var array = <?php echo json_encode($array) ?>;

var limit = 9;
    for (var i = 0; i < limit; i++) {
        alert(array[i]);
        //Do something
    }
    
16.03.2016 / 13:44
0

I was able to solve the problem!

The solution was to start the loop before the Script, insert the code of each product registered in the products table in the line of the script referring to it, in the _container "and there at the end of the code I passed the second script into the Loop with the code of the products inserted in it also, thus getting the code:

<?php
include "conexao.php";
$codigo = $_POST['codigo'];
$img01 = $_POST['img01'];
$img02 = $_POST['img02'];
$img03 = $_POST['img03'];
$img04 = $_POST['img04'];
$titulo = $_POST['titulo'];
$preco = $_POST['preco'];
$query = mysql_query("SELECT * FROM produto ORDER BY RAND() LIMIT 9");

while($res = mysql_fetch_array($query)){
?>
<script>
jssor_slider<?php echo $res['codigo']; ?>_starter = function (containerId) {
var options = {
$DragOrientation: 3,
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$,
$ChanceToShow: 2,
$ActionMode: 1,
$AutoCenter: 0,
$Steps: 1,
$Lanes: 1,
$SpacingX: 0,
$SpacingY: 0,
$Orientation: 1
}
};
var jssor_slider<?php echo $res['codigo']; ?> = new $JssorSlider$(containerId, options);
};
</script>

<div style="background-color:<?php echo $res['fundosite_cor']; ?>;; padding:11px;" class="center_prod_box">

        <div id="titulo" class="product_title">
            <?php echo $res['titulo']; ?>
        </div>
    <!-- Jssor Slider Begin -->
    <!-- To move inline styles to css file/block, please specify a class name for each element. --> 

    <div id="slider<?php echo $res['codigo']; ?>_container" style="position: relative; top: 0px; left: 0px; width: 173px;
        height: 173px; background-color:<?php echo $res['fundosite_cor']; ?>;">

        <!-- Loading Screen -->
        <div u="loading" style="position: absolute; top: 0px; left: 0px;">
            <div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
                background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
            <div style="position: absolute; display: block; background: url(img/loading.gif) no-repeat center center;
                top: 0px; left: 0px;width: 100%;height:100%;">
            </div>
        </div>

        <!-- Slides Container -->
        <div u="slides" style="background-color:<?php echo $res['fundosite_cor']; ?>;cursor: move; position: absolute; left: 0px; top: 2px; height:150px; width:173px; text-align:center;
            overflow: hidden;">
            <div>
                <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                    <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img01']; ?>" />
                </a>
            </div>
            <div>
                <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                    <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img02']; ?>" />
                </a>
            </div>
            <div>
                <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                    <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img03']; ?>" />
                </a>
            </div>
            <div>
                <a href="prod_detalhe.php?codigo=<?php echo $res['codigo']; ?>">
                    <img style="position:relative; top:50%; transform:translateY(-50%);"width="100" src="img_produtos/<?php echo $res['img04']; ?>" />
                </a>
            </div>
        </div>

        <!--#region Bullet Navigator Skin Begin -->
        <!-- Help: http://www.jssor.com/development/slider-with-bullet-navigator-jquery.html -->
        <style>
            /* jssor slider bullet navigator skin 03 css */
            /*
            .jssorb03 div           (normal)
            .jssorb03 div:hover     (normal mouseover)
            .jssorb03 .av           (active)
            .jssorb03 .av:hover     (active mouseover)
            .jssorb03 .dn           (mousedown)
            */
            .jssorb03 {
                position: absolute;
            }
            .jssorb03 div, .jssorb03 div:hover, .jssorb03 .av {
                position: absolute;
                /* size of bullet elment */
                width: 21px;
                height: 21px;
                text-align: center;
                line-height: 21px;
                color: white;
                font-size: 12px;
                background: url(img/b03.png) no-repeat;
                overflow: hidden;
                cursor: pointer;
            }
            .jssorb03 div { background-position: -5px -4px; }
            .jssorb03 div:hover, .jssorb03 .av:hover { background-position: -35px -4px; }
            .jssorb03 .av { background-position: -65px -4px; }
            .jssorb03 .dn, .jssorb03 .dn:hover { background-position: -95px -4px; }
        </style>
        <!-- bullet navigator container -->
        <div u="navigator" class="jssorb03" style="bottom: 1px; left: 40px;">
            <!-- bullet navigator item prototype -->
            <div u="prototype"><div u="numbertemplate"></div></div>
        </div>
        <!--#endregion Bullet Navigator Skin End -->

        <!-- Trigger -->
    </div>
    <!-- Jssor Slider End -->                
        <div id="preco" class="prod_price">
            <span style="">
            R$ <?php echo $res['preco']; ?>
            </span>
        </div>                        

        <div id="carrinho" class=""><br />
            <a href="prod_carrinho.php?acao=add&codigo=<?php echo $res['codigo']; ?>">
                <img style="position:relative;top:50%;transform:translateY(-50%); "width="20" src="img/carrinho.png" title="Por no Carrinho" />
            </a>
        </div>                        
                    <hr id="linha1" />
                    <hr id="linha2" />
    </div>

        <script>
           jssor_slider<?php echo $res['codigo']; ?>_starter('slider<?php echo $res['codigo']; ?>_container');
        </script>

<?php
}
?>

</div>

Address to check the result - link

I hope this post will help other users with the same problem.

Thank you for your attention, and a big hug to everyone.

    
18.03.2016 / 05:57