infinite scroll in foreach

Question

infinite scroll in foreach

Navigation

#1 by (0 votes)

0

Can anyone help me? I'm trying to find some way to use infinite scroll in this code:

<?php
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "lista.m3u8");
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
$info = curl_getinfo($ch);
curl_close($ch);

if (substr($info["http_code"], 0, 2) != 20) {
    die("Não possível conectar ao servidor!");
}

preg_match_all('/(tvg-logo="(?<logo>.*?)".+group-title="(?<name>.*?)".+\n(?P<link>http?:\/\/.+))/', $response, $channels, PREG_SET_ORDER);

?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>nPlay</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link href="https://mdbootstrap.com/previews/docs/latest/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://mdbootstrap.com/previews/docs/latest/css/mdb.min.css" rel="stylesheet">
    <style>
    footer{
        background-color:#1F2024;
        color: #fff;
        font-size: 10px;
    }
    body{
        background-color: #171818;
    }

    .secondbase {
        background-color: rgba(255,255,255,.6); 
        margin-top: -90px;
    }
    .list-group-item {
        border:none;
        background-color: #171818;
        float: left;
        height: 240px;
        padding: .5rem .25rem;
        width: 150px;
    }

    .list-group-item img {
        border:none;
        height: 200px;
        width: 140px;
        padding: .5rem .25rem;

    }

    #modal iframe {

        border:none;
        height: 100%;
        width: 100%;
    }

    .modal-dialog {
  width: 100%;
  height: 100%;
  padding: 0;
    }

    .modal-content {

        background-color: #16171A;
  height: 90%;
  width: 90%;
  border-radius: 0;
    }

    .modal-body {

        height: 84%
    }

    .navbar {
        background-color: #1F2024;
    }

    img{border-radius: 10px;}

    #info_bar{
        color: #fff;
        font-size: 10px;
        text-align: center;
    }

    </style>
</head>
<body>
<header>
    <nav class="navbar navbar-expand-lg fixed-top">
        <a class="navbar-brand">nPlay</a>
    </nav>
</header>


<div class="py-4"></div>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="row">
                <ul id="channels-list">               
                    <?php foreach($channels as $channel): ?>
                    <li class="list-group-item">
                        <a href="<?php echo $channel["link"] ?>" title="<?php echo $channel["name"] ?>">
                            <img src="<?php echo $channel["logo"] ?>" class="img-responsive img-circle" />
                            <div id="info_bar">
                              <?php echo $channel["name"] ?>
                            </div>
                        </a>

                    </li>

                    <?php endforeach; ?>
                </ul>
            </div>
        </div>
    </div>
</div>

<hr>
<footer class="fixed-bottom">
    <div class="text-center "></footer>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><scriptsrc="https://mdbootstrap.com/previews/docs/latest/js/bootstrap.min.js"></script>
<script src="https://mdbootstrap.com/previews/docs/latest/js/mdb.min.js"></script><scriptsrc="https://mdbootstrap.com/previews/docs/latest/js/jarallax.js"></script>
<script src="https://mdbootstrap.com/previews/docs/latest/js/jarallax-video.js"></script><script>newWOW().init();$("#channels-list a").click(function(e) {
        e.preventDefault();

        $("#modal").find(".modal-title").text( $(this).attr("title") );
        $("#modal").find(".modal-body")
            .empty()
            .append( "<iframe allowFullScreen='allowFullScreen' allowscriptaccess='always' src=\""+$(this).attr("href")+"\"></iframe>" ); //Altere essa linha para chamar outro arquivo

        $("#modal").modal("show");
    });

</script>



<div class="modal fade" tabindex="-1" role="dialog" id="modal" data-backdrop="static">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">%channel_name%</h4>
      </div>

      <div class="modal-body"></div>

      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>

php jquery

asked by anonymous 20.03.2018 / 15:08

1 answer

Activation of the Vertical Bar Code Reader - Zxing Number Format PHP

score 0 · Accepted Answer

As I mentioned earlier, you need to separate PHP from HTML. In this case we will create a file named loadChannels.php , with the following code:

<?php

header("Access-Control-Allow-Origin: *");

/* Captura a página */
if (isset($_GET['page'])) {
    $page = (int)$_GET['page'];
} else {
    $page = 1;
}

/* Acessa o parquivo 'lista' + número da página + '.m3u8' */
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "http://localhost:8081/lista{$page}.m3u8");
curl_setopt($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
$info = curl_getinfo($ch);
curl_close($ch);

if (substr($info["http_code"], 0, 2) != 20) {
    die();
}

preg_match_all('/(tvg-logo="(?<logo>.*?)".+group-title="(?<name>.*?)".+\n(?P<link>http?:\/\/.+))/', $response, $channels, PREG_SET_ORDER);

/**
 * Cria a lista LI e escreve na tela.
 * Como vamos acessar via AJAX, o conteúdo
 * será retornado via JavaScript
 */
foreach($channels as $channel): ?>
<li class="list-group-item">
    <a href="<?php echo $channel["link"] ?>" title="<?php echo $channel["name"] ?>">
        <img src="<?php echo $channel["logo"] ?>" class="img-responsive img-circle" />
        <div id="info_bar">
          <?php echo $channel["name"] ?>
        </div>
    </a>
</li>
<?php endforeach; ?>

Now in the HTML file, we can use the following JavaScript :

/* Define a página inicial */
let scrollPage = 1;

/* Cria uma função para detectar se o usuário rolou a barra até o final */
$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       loadChannels();
   }
});

/* Utilizamos o método 'on' para detectar o evento de clique de novos elementos */
$("#channels-list").on("click", "a", function(e) {
    e.preventDefault();

    $("#modal").find(".modal-title").text( $(this).attr("title") );
    $("#modal").find(".modal-body")
        .empty()
        .append( "<iframe allowFullScreen='allowFullScreen' allowscriptaccess='always' src=\""+$(this).attr("href")+"\"></iframe>" ); //Altere essa linha para chamar outro arquivo

    $("#modal").modal("show");

    /*
     * Utilizamos esse evento para executar uma função ao fechar o modal
     * Caso o modal seja fechado sem remover o 'iframe', o player continuará funcionando.
     */
    $('#modal').on('hidden.bs.modal', function (e) {
      $("#modal iframe").remove();
    })
});

/*
 * Utilizamos esse evento para executar uma função ao fechar o modal
 * Caso o modal seja fechado sem remover o 'iframe', o player continuará funcionando.
 */
$('#modal').on('hidden.bs.modal', function (e) {
  $("#modal iframe").remove();
})

/**
 * Função responsável por realizar a requisição para 'loadChannels.php'
 */
function loadChannels(page) {

    /* Realizamos a requisição e retornamos o resultado na variável 'data' */
    $.get("loadChannels.php?page="+scrollPage, function(data) {

        /* Incrementamos o valor retornado na DIV indicada e somamos o valor de 'scrollPage' + 1 */
        $("#channels-list").append(data);
        scrollPage++;
    });
}

/* Carregamos a primeira lista */
loadChannels();

It is necessary to remove the code from the DIV #channels-list