Dynamic slideshow with php and AJAX

Navigation
0

I'm creating a gallery system with slideshow for products, the idea is that each product uploads its slider collecting photos from the database, the theme is the following, when I enter manual everything works perfect but for some strange reason when I upload or I set an image via ajax or server, nothing happens, it does not work and the truth is that I can not see the reason why this happens if the code is right. 

        <div id="upload_photo" data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:980px;height:380px;overflow:hidden;">
            <div data-p="170.00">
                <img data-u="image" src="img/adorable-21998_640.jpg" />
            </div>
            <div data-p="170.00">
                <img data-u="image" src="img/adorable-21998_640.jpg" />
            </div>
        </div>

This is the image inside the slider, if I put it like this it works perfect and everything is perfect, but when I load it via ajax, it does not work HERE the Javascript code 

    <script>
        $(document).ready(function(){
            $.ajax({
              url:'http://www.ebabylist.es/appstore/extra/view/load_product_gallery.php'+window.location.search+'&type=slider',
              method:'GET',
              cache:false,
              success:function(fancyBox){
                  $("#upload_photo").append(fancyBox);
                  
              },
              error:function(err_fancy){
                  console.log(err_fancy);
                  alert("No se puede cargar la galeria en este momento");
              }
           }); 
        });
    </script>

Finally the PHP code that collects and returns from the bbdd 

private function slideshow($prod_slider){
        $statement = "SELECT * FROM galeria WHERE producto_id = :producto";
        try{
            $msg = $this->BBDD->prepare($statement);
            $msg->bindValue(":producto", htmlentities(addslashes($prod_slider)));
            $msg->execute();
            if($msg->rowCount()!=0){
               foreach($msg->fetchAll(PDO::FETCH_OBJ) as $fancy){
                  echo "                                    
                       <div data-p='170.00'>
                        <img data-u='image' src='http://www.ebabylist.es/appstore/img/{$fancy->foto_nombre}' />
                       </div>                     
                        ";
               }
            }
        } catch (PDOException $ex) {
            die('Fail to read this message' . $ex->getLine() . PHP_EOL . $ex->getCode() . ' ' . PHP_EOL. $ex->getMessage());
        }finally{
            $this->BBDD = NULL;
        } 
    }

If I put the manual div as seen at the beginning, it works but to load it dynamically, it generates the same div and items but it does not work, any idea why?

    
asked by Carlos Estarita 15.02.2018 в 03:49
source

1 answer

0

You must send only the URL of the image from PHP. HTML is built from JavaScript.

Example: 

//aqui tienes el $each que recorre el objeto

var HTML = "";

HTML += < img scr='URL'>;

//fin each


$("#upload_photo").html(HTML);

and then when you create the slider you usually have a method called .refresh(); that is to refresh the dynamic content from jQuery.

    
answered by 15.02.2018 в 20:25
Combobox autocomplete .net Problems with Ajax in jQuery?