Форумы портала PHP.SU :: Версия для печати :: Хочу реализовать функцию

1. Irina88 - 05 Декабря, 2021 - 19:45:33 - перейти к сообщению

Хочу реализовать такую штуку:

Вот скрин:

Вот код:

Вроде все работает. Но надо чтобы предыдущий комментарий открывался сразу после нажатия <submit>, а не после перезагрузки страницы. Как это сделать?

2. Vladimir Kheifets - 05 Декабря, 2021 - 21:09:24 - перейти к сообщению

Irina88 пишет:

Хочу реализовать такую штуку:

Вот скрин:

Вот код:

Спойлер (Отобразить)

Добрый день, Ирина!
Уж, простите, но никто пока на вопросы не отвечает.
Может я смогу помочь.
То что, Вы хотите, сделать легко.
Что должно открываться без перезагрузки страницы и где?
Например, в каком-нибудь контейрнере <div id="content"></div>

3. Irina88 - 06 Декабря, 2021 - 19:13:00 - перейти к сообщению

Здравствуйте, Владимир!

Ну типа над полем ввода должно отображаться предыдущее сообщение. Как на скрине.

4. Vladimir Kheifets - 07 Декабря, 2021 - 10:48:03 - перейти к сообщению

Irina88 пишет:

Здравствуйте, Владимир!
Ну типа над полем ввода должно отображаться предыдущее сообщение. Как на скрине.

Добрый день, Ирина!
Сделал без перезагрузки страницы.
Чтобы было заметно, что страница не перезагружается добавил тестовый контент.

Спойлер (Отобразить)

PHP:
скопировать код в буфер обмена

<?PHP 
$StartLine = 0;
$nLines = 10;
$title = $_SERVER['SERVER_NAME'];
function ReadLinesFromFile($StartLine, $nLines, $file){
        $EndLine=$StartLine+$nLines;
        $line = $StartLine;
        $news=[];
        while ($line < $EndLine ) {
                $file->seek($line-1);
                $news[]=$file->current();
                $line++;
        }
        return $news;
}
//--------------------------------------
$file = new SplFileObject('enter.txt');
$file->seek(PHP_INT_MAX);
$linesTotal = $file->key()+1;
$LineInPage=10;
$Pages = ceil(($linesTotal)/$LineInPage);
$page=isset($_GET['page'])?$_GET['page']:1;
 
$StartLine=($page-1)*$LineInPage+1;
$news = ReadLinesFromFile($StartLine, $LineInPage, $file);
$lines = implode("<br>",$news);
if(isset($_GET['page']))
{
        echo $lines;
        exit;
}
######################################################
$testContent="http://beautiful-puppies.de/video/2/";
$p = $testContent."poster_g/20210929134906.jpg";
$f = $testContent."20210929134906.mp4";
######################################################
echo <<<HTML
<html>
<head>
<title> $title </title>
<style>
#pageContent{height: 250px}
</style>
</head>
<body>
<!-- Begin test Content --->
<video preload="none" poster="$p" width="30%"
onMouseOver="this.controls=true" >
<source  src="$f" type="video/mp4" >
</video>
<hr>
<!-- End test Content --->
<div id="pageContent">$lines</div>
<hr>
<div id="pageSelector">
        <span>Страница:</span>
        <span></span>
        <select></select>
</div>
</body>
<script>
page = '$page';
Pages = '$Pages';
pageContent = document.getElementById("pageContent");
pageSelector = document.getElementById("pageSelector");
span = pageSelector.querySelectorAll("span")[1];
select = pageSelector.querySelectorAll("select")[0];
//------------------------------
setOpt = function(){
        optArr=Array.from({length: Pages}, (v, k) => k+1);
        optArr.splice(page-1, 1);
        select.innerHTML = "";
        opt = document.createElement('option');
        opt.innerHTML = "выбор";
        select.appendChild(opt);
        for(i in optArr)
        {
                opt = document.createElement('option');
                opt.innerHTML = optArr[i];
                select.appendChild(opt);
        }
        select.addEventListener("change", function (e){
                page=e.target.value;
                ViewNews(page, pageContent);
        });
        span.innerHTML = page;
};
//-----------------------------
ViewNews = function(page,target){
        req = new XMLHttpRequest();
        url = "?page="+page;
        req.open("get", url, true);
        req.onreadystatechange = function()
        {
           if (this.readyState == 4 && this.status == 200)
           {
                        try
                        {
                                rsp = this.responseText;
                                target.innerHTML=rsp;
                                setOpt();
                        }
                        catch (e)
                        {
                                err={state:this.readyState,err:e.message,url:url};
                                console.log(err);
                        }
                };
        };
        req.send();
};
//------------------------------------------------
if(Pages>1)
        setOpt();
else
        pageSelector.style.display="none";
//------------------------------------------------
</script>
</html>
HTML;
?>

Файл enter.txt

Спойлер (Отобразить)

Удачи!