Download the data from data base after second click

user_11292364 0
Viewed 39

Why the data is displayed after the second click?

Maybe I'm not doing the ajax request correctly. I want to output data from the database to the page and update after adding.

Can you find where the problem is?

main.js

$(document).ready(function () {
    $(function () {
        $.ajax({
            url: 'dataconnect.php',
            type: "POST",
            success: function (data) {
                $(".rows").html(data);
            }
        });
    });


    $("button.btnSubmit").on("click", function () {
        let textsval = $(".inputs_text").val();
        let imgsval = $(".inputs_img").val();

        $.ajax({
            url: 'bdconnect.php',
            type: "POST",
            data: { textss: textsval, imgg: imgsval },
        })
            .done(function () {
                // $(".rows").append(result);
            });
        $(".inputs_text").val("");
        $(".inputs_img").val("");


        $(function () {
            $.ajax({
                url: 'dataconnect.php',
                type: "POST",
                success: function (data) {
                    $(".rows").html(data);
                }
            });
        });
    });
});

dataconnect.php

<?php
    require_once("bdconnect.php");

    $query = $db->query('SELECT * FROM `databd`.`infos`');
    while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
        echo "<p>" . $row['texts'] . "</p>";
    }
?>

bdconnect.php

<?php

$dbhost = "localhost";
$dbname = "databd";
$username = "root";
$userpass = "";
$charset = "utf8";
$options = [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION];

$data = [
    "textss" => trim($_POST["textss"]),
    "imgg" => trim($_POST["imgg"]),
];

$db = new PDO("mysql:host=$dbhost;dbname = $dbname;charset=$charset", $username, $userpass, $options);
if (!empty(trim($_POST["textss"])) && !empty(trim($_POST["imgg"]))) {
    $query = "INSERT INTO `databd`.`infos`(texts,img) VALUES (:textss, :imgg)";
    $statement = $db->prepare($query);
    $result = $statement->execute($data);
};
mysql php ajax
1 Answers

The thing is that both ajax calls are made at the same time and when the dataconnect call is done the data is not yet in the server.

An ajax call runs async so even the dataconnect call is written later in the code the bdconnect call has not been completed yet. Not until the done callback is executed.

Place the dataconnect call in the done callback and you should see the data updated after adding anything.

And to improve the code you could define a function:

function refreshData() {
    $.ajax({
        url: 'dataconnect.php',
        type: "POST",
        success: function (data) {
            $(".rows").html(data);
        }
    });
}

And use $(refreshData) to call it each time instead of repeating all the code as in document.ready.

The whole javascript code would be:

function refreshData() {
    $.ajax({
        url: 'dataconnect.php',
        type: "POST",
        success: function (data) {
            $(".rows").html(data);
        }
    });
}

$(document).ready(function () {
    $(refreshData);

    $("button.btnSubmit").on("click", function () {
        let textsval = $(".inputs_text").val();
        let imgsval = $(".inputs_img").val();

        $.ajax({
            url: 'bdconnect.php',
            type: "POST",
            data: { textss: textsval, imgg: imgsval },
        }).done(function () {
            $(refreshData);
        });
        $(".inputs_text").val("");
        $(".inputs_img").val("");
    });
});
user_15408540
Related