Descargar los datos de la base de datos después de la segunda pulsación

Aleksf:

¿Por qué se muestran los datos después de que el segundo clic?

Tal vez no estoy haciendo la solicitud ajax correctamente. Quiero datos de salida de la base de datos a la página y actualización después de la adición.

Puede que encuentre dónde está el problema?

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);
};

jeprubio:

El caso es que tanto las llamadas ajax se hacen al mismo tiempo y cuando la dataconnectllamada se hace de los datos todavía no está en el servidor.

Se ejecuta una llamada ajax asincrónicos por lo que incluso la dataconnectllamada se escribe más adelante en el código de la bdconnectllamada no se ha completado todavía. No es hasta que el donese ejecuta de devolución de llamada.

Coloque la dataconnectllamada de la donedevolución de llamada y podrá ver los datos actualizados después de añadir nada.

Y para mejorar el código se podría definir una función:

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

Y el uso $(refreshData)de llamarlo cada vez en lugar de repetir todo el código como en document.ready .

El código JavaScript conjunto sería:

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("");
    });
});