Update Div HTML PHP Javascript

Asked

Viewed 2,638 times

5

I’m having some problems updating a div without updating the full page.
Follows the code:

<div class="main" align="justify">
     <div id="mensagens">
          <?php echo file_get_contents('arquivo.txt'); ?>
     </div>
...

I’ve thought about creating a "frame" - I’m not sure if that would be the name - and using "meta refresh" to update inside it.

My question is: How to update this Div using PHP or Javascript? And, if possible, you could update this Div whenever there is a change in the ".txt file"?

Updating

The ".txt file" is updated normally:

$texto = htmlspecialchars($_POST['text']);
$string = $texto . "\n";
$fp = fopen('arquivo.txt', 'a');
$fw = fwrite($fp, $string);
fclose($fp);
php javascript html div

  • You can use .ajax or .get jQuery. See here a question related to getJSON.

  • 1

    How/why this ".txt file" is changed?

  • The.txt file would be like a "database". Users send the content there instead of using a normal database. There it is all configured and organized according to the output I want.

  • This is some test system ?

  • Yes, it would just be an "experiment".

  • I also recommend using Ajax

Show 1 more comment

2 answers

2

Try this:

index php.

<!DOCTYPE HTML>
<html>
    <head>
    <meta charset="UTF-8">
    <title>Index</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <label>Dados:</label>
    <input name="text" id="text" value="#Teste"><br>
    <br>
    <button type="submit" id="btn_submit">Confirma</button>
    <div id="resultado"></div>
</body>
</html>

script js.

$(function () {
    $('#btn_submit').click(function () {
        grava();
    });
    $.post("grava.php", {},
    function (resp) {
        $('#resultado').html(resp);
    });    
});

function grava() {
    $.post("grava.php", {
        text: $("#text").val()
    },
    function (resp) {
        $('#resultado').html(resp);
    });
}

writes.php

<?php

if (!empty($_POST['text'])) {
    $texto = htmlspecialchars($_POST['text']);
    $string = $texto . ";\n";
    $fp = fopen('arquivo.txt', 'a');
    $fw = fwrite($fp, $string);
    fclose($fp);
}
echo file_get_contents('arquivo.txt');

OBS: give write permission in directory.

0

Utilizes the setInterval() to load the file with time interval.

Html:

<div id="rg">
    Texto desatualizado!
</div>

Jquery:

    <script>
        setInterval(function () {
            $.ajax({
                method: "GET", //GET OU POST
                url: "/text.txt" //LOCAL DO ARQUIVO

            }).done(function (answer) {
                $('#rg').html(answer);//Executa se tiver sucesso

            }).fail(function (jqXHR, textStatus) {
                console.log("Request search failed: " + textStatus); //executa se falhar 
            });
        }, 2000); // Tempo para cada execução
    </script>

The .html(answer); will place the received information between the respective opening and closing tags and

Browser other questions tagged php javascript html div

You are not signed in. Login or sign up in order to post.