Search code examples
laravellaravel-livewirepolling

Laravel , use livewire to update my statistics that are render through script

I wanted to create and use livewire to be able to refresh my stat page that shows how many people have voted which I created by first getting the data from the controller and then using javascript to show it on my page. The problem I am facing is that I know that livewire only runs the script once, so I am not sure how I can make it rerun the script as well.

enter image description here

This is my blade file

<body onload="showresults()">
    <form method="post" action="{{ route('event-poll-post') }}" 
      id="message">
        @csrf
        <div class="poll">
            <div class="question"></div>
            <div class="answers"></div>
            @if ($question != null)
                <input type="hidden" name="question" value="{{ $question->id }}" required>
            @else
                <h1 style="text-align: center;">The Polling is Closed</h1>
                <br>
            @endif
            <input type="hidden" name="answer" id="answer" value="sssss" required>
        </div>
    </form>

</body>

    <script>
    var question = @json($question);

    var answer1 = @json($answer1);
    var answer2 = @json($answer2);
    var answer3 = @json($answer3);
    var answer4 = @json($answer4);
    var answer5 = @json($answer5);
    var answer6 = @json($answer6);


    var countAnswers = [answer1, answer2, answer3, answer4, answer5, answer6];
    var total = answer1 + answer2 + answer3 + answer4 + answer5 + answer6;

    console.log("PRINT OUT TOTAL", total);
    var questionAnswers = [question['a'], question['b'], question['c'], question['d'], question['e'], question['f']];

    const results = questionAnswers.filter(element => {
        return element !== '';
    });

    let poll = {
        // question: 'Question ' + question['id'].toString() + '\n\n ' + question['question'],
        question: 'Poll ' + '\n\n ' + question['question'],
        answers: results,
        pollcount: total,
        answerweight: countAnswers,
        selectanswer: -1
    };

    let polldom = {
        question: document.querySelector(".poll .question"),
        answers: document.querySelector(".poll .answers")
    };

    polldom.question.innerText = poll.question;
    polldom.answers.innerHTML = poll.answers.map(function(answer, i) {

        return (
            `
        <div class="answer-text">${answer}</div>
        <div class="answer" onclick="">
        <span class="percentage_bar"></span>
        <span class="percentage_value"></span>
        </div>
        
        `
        );
    }).join("");
    function showresults() {
        let answers = document.querySelectorAll(".poll .answers .answer");
        // console.log(answers);
        for (let i = 0; i < answers.length; i++) {

            let percentage = 0;
            console.log("the count", poll.pollcount);
            if (poll.pollcount == 0) {
                percentage = 0;
            } else {
                percentage = Math.round(
                    (poll.answerweight[i]) * 100 / (poll.pollcount)
                );
                console.log(i, "time", poll.answerweight[i]);
                console.log("The printed percentage is ", percentage);
            }

            answers[i].querySelector(".percentage_bar").style.width = percentage + "%";
            answers[i].querySelector(".percentage_value").innerText = percentage + "%";

        }
    </script>
Solution

  • Through experiments, I did it through this method, please let me know if you know a better method than this or something I can improve on.

    Through the help of the dispatch browser event, I was able to dispatch the updated values that was taken from eloquent model

    $this->dispatchBrowserEvent('contentChanged', ['users' => $users]);

    Then i called the eventListener and through e.detail got the object that i used with document.getElementById of my div and then updating it's content through

    .innerHTML = e.detail.users.map(function(answer, i) {}).join("");