How to start a function with onclick?

Asked

Viewed 423 times

1

I have a script that reads one . log basically in real time and shows it on screen, but the point is that it starts with the DOM, I would like it to start only from the click on the button, could help me?

<?php
if (isset($_GET['ajax'])) {
    $sessionID = 'log'.$_GET['s'];
    session_id($sessionID);
    session_start();
    $handle = fopen('/\\cordas\instance-8480\log\server.log', 'r');
    if (isset($_SESSION['offset'])) {
        $data = stream_get_contents($handle, -1, $_SESSION['offset']);
        echo nl2br($data);
    } else {
        fseek($handle, 0, SEEK_END);
} 
  $_SESSION['offset'] = ftell($handle);
  exit();
}

  $randomSession = rand();
    $(document).ready(function( ) {
        $.repeat(1000, function() {
            $.get('automacao_tela.php?ajax&s=<?=$randomSession;?>', 
                function(data) {
                $('#tail').append(data);
            });
        });
    });

<form action="?automacao=ok" method="POST">
    <button type="submit" class="log-btn" >INICIAR PROCESSO</button>
</form>

<div id="tail" class="widget-stats-list-log">
    Starting up...
</div>

----- Addition of code----

<body>
    <div class="automacao-container">
        <div class="automacao-box">
            <div class="row">
                <div class=" col-sm-3">
                    <div class="stats-widget">
                        <div class="widget-header">
                            <h2>Automação</h2>
                        </div>
                        <div class="widget-stats-list" id="lerLog">
                            <form action="?automacao=ok" method="POST">
                                <button type="submit" class="log-btn">INICIAR PROCESSO</button>
                            </form>
                        </div>
                    </div>
                    <div class="stats-widget" style="height: 495px;">
                        <div class="widget-header">
                            <h2>Parâmentros</h2>
                        </div>
                        <div class="widget-stats-list">
                        </div>
                    </div>
                </div>

                <div class=" col-sm-9">
                    <div class="stats-widget">
                        <div class="widget-header">
                            <h2>Log de Automação</h2>
                        </div>
                        <div id="tail" class="widget-stats-list-log">
                            Starting up...
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        $('#lerLog').on('click', function( ) {
            $.repeat(1000, function() {
                $.get('automacao_tela.php?ajax&s=<?=$randomSession;?>', 
                    function(data) {
                    $('#tail').append(data);
                });
            });
        });                               
  </script>
</body>
php javascript jquery html ajax

1 answer

2


Matheus, you need to create an element that will be clicked to call the function.

<div id='lerLog'>Ao clicar aqui a leitura do log acontecerá</div>

Great! Done this put the function this way:

 $('#lerLog').on('click', function( ) {
        $.repeat(1000, function() {
            $.get('automacao_tela.php?ajax&s=<?=$randomSession;?>', 
                function(data) {
                $('#tail').append(data);
            });
        });
    });

Applied change:

$(document).ready()

This call means that every time the document is ready for use (When the page finishes fully loading) The function created by you will happen. read a little more about the .ready()

Then we create the button, set an id for it and assign the call .on() that works with the element when different situations happen. In this case we are using the 'click' (onclick). Learn more about the .on()

Reading your code again, I came across the button with the text START PROCESS. If it is responsible for reading log add: id='lerLog' to work with the function.

  • Good Morning Bsalvo, I did everything as you said, I put the id on the button and entered the Onclick in the function, only now it does not read the log does not start, and if I take onClick in the function, it works normally, no longer know what to do :/

  • Calm that we will solve, take a test and create a div to be clicked. Forget the button and test now on a div. Don’t forget to bring me the feedback!

  • Good morning, it still hasn’t worked even with a div, I’ll put all my code in the answer can it be ? so I can take a closer look and tell you what I’m missing ?

  • Put there, the function I provided should already be working

  • placed as an answer below

  • Matheus, it’s mehlro add as edit on the question. Here is just for same answers.

  • Matheus a div with id='lerLog'' needs to be on top of the function code... First div after the code

  • Bsalvo, I put as an addition the code to which I spoke, but in the same way it still doesn’t work, only works if I leave as posted in the question above the addition.

  • Huum. very strange.. You are clicking on START PROCESS? if so it is likely that n will actually work. Please delete that id='lerLog' you put there and add that div <div id='lerLog'>By clicking here the reading of the log will happen</div> anywhere above the function, just for test purposes and tell me if it works.

  • Now with a separate div, it worked.O, I have no idea what could have happened. Does not have a way to put behind the button ??

  • Matheus does not need the <form> tag in this situation, the type of the button is type='Submit' that means it works directly with the form, you can try to change the type to type='button' and add the id='lerLog' (I don’t think this will work) or you can also follow my advice, and delete this form and this button and style a div so it stays the way you want it. If you can mark my answer, thank you :)

  • Thanks for the reply Bsalvo, unfortunately I can not take the Form because I use it for another function take his post of 'ok', but I will do the tests here changing the Submit to button, and if nothing works I will take the div that worked and put behind the invisible button. I thank you very much for the help colleague. I have already marked the answer. Thank you.

  • Just to complement, your idea of switching from "Submit" to "button" worked, I just need to figure out a way to send the form now kkk

  • Every time the form is sent the log should also be updated? If so I have the quick answer for you.

  • That’s right, every time I send the form, a . txt is generated on the server, and I go there and pick up this . txt, and show on screen the log in real time.

  • My button runs cmd which starts a file . bat, which generates this txt, and shows it on screen.

  • Matheus, is there any other way we can talk? It is not very good to extend the subject so much in the comments of the reply not to disturb future readers.

  • Here it works ?

  • Email me, [email protected]

Show 14 more comments

Browser other questions tagged php javascript jquery html ajax

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