执行AJAX请求后未应用CSS

Question

I am struggling with an issue after an AJAX request. I am requesting data from the database. That itself works perfectly and I process the data and add it into a table within the PHP file. That table consists of a caption followed by the data. This table is then transferred to the main page where it is displayed. My problem is that I am trying to format the buttons that I create in the PHP to be formatted as well. Here's the PHP with the data request

    if (mysqli_connect_errno()) {
        echo "Failed to connect to MySQL: " . mysqli_connect_error();
    }

    $sql = "SELECT LoginName FROM table";

    $res = mysqli_query($conn, $sql);

    if (mysqli_num_rows($res) > 0) {

        echo "<center>";
        echo "<table border='1'>";
        echo "<tr>";
        echo "<td>User</td>";
        echo "<td colspan=2 align=center>Available Functions</td>";
        echo "</tr>";

        while($row = mysqli_fetch_assoc($res)) {
            echo "<tr>";
            echo "<td>" . $row['User'] . "</td>";
            echo "<td><button type='button' class='smallbutton'>Delete User</button></td>";
            echo "<td><button type='button' class='smallbutton'>Change Password</button></td>";
            echo "</tr>";
        }
        echo "</table>";
        echo "</center>";
    } else {
        echo "";
    }

    mysqli_close($conn);

As you can see I assigned a class to the buttons. I thought it was easy to use that as a formatting tag for CSS. My css file looks like the following:

.smallbutton {
font-size:16px;
padding: 10px 10px;
border: none;
background-color: #008CBA;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
color: white; }

Every time the code is executed, which is on the refresh of the page, the table is created but the buttons look like those ugly standard buttons and the CSS is not applied. I was able to include the style into the PHP file which then worked but that is really not how I want to structure my page. The PHPs are really only the data provider and I want to use CSS in a central location for the layouts.

I already use the same CSS just with another class name for other buttons and they, no matter where they are located on the page, work perfectly. Just these ones in that table I create, do not want to work.

The table is embedded in a div which has the ID "DbInfo" and is filled via innerHTLM.

Just in case here's also my AJAX command:

$(document).ready(function(){
$.ajax({
    method: "POST",
    url: "UserData.php",
    success: function(data){
        $("#DbInfo").innerHTML = data;
    }
});  });

Can anybody help?

Thanks...

Answer 1

You can add id to your button. Eg:-

echo "<td><button type='button' class='button'>Delete User</button></td>";
echo "<td><button type='button' class='button'>Change Password</button></td>";

And set the css class from client side after you set innerHTML in your AJAX. Eg:-

$(document).ready(function(){

$.ajax({
    method: "POST",

    url: "UserData.php",

    success: function(data){

        $("#DbInfo").innerHTML = data;

        $(".button").addClass("smallbutton");

    }

});  
});

NOTE:- It is a bad practice to get all HTML code from server side via AJAX. Try to get only the data from your server via AJAX and construct your HTML table in client side.

Eg;- php code

if (mysqli_connect_errno()) {
    return;
}

$sql = "SELECT LoginName FROM table";

$res = mysqli_query($conn, $sql);
$data = array();
if (mysqli_num_rows($res) > 0) {
    while($row = mysqli_fetch_assoc($res)) {
       array_push($data, $row['User']);
    }
}

mysqli_close($conn);
echo json_encode($data);

jquery code

$(document).ready(function(){
$.ajax({
    method: "POST",
    url: "UserData.php",
    success: function(data){
        var userData = JSON.parse(data);
//contruct HTML table using jquery here
    }
});

Answer 2

just if someone is interested. I restructured my CSS and have explicit references. Instead of addressing only the class I added the button type as well. The new css looks like this:

button[type=button].abutton {
    font-size:16px;
    padding: 15px 15px;
    border: none;
    background-color: #008CBA;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
    color: white;
}

button[type=button].smallbutton {
    font-size:16px;
    padding: 10px 10px;
    border: none;
    background-color: #008CBA;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2), 0 3px 10px 0 rgba(0,0,0,0.19);
    color: white;
}

That allows me to address the items properly. Thanks to all your answers and Eric, who deleted his answer, but brought me on the right track.

regards