CSS not applied after executing an AJAX request

Question

I am struggling with the problem after an AJAX request. I am querying data from a database. This alone works great, and I process the data and add it to the table in the PHP file. This table consists of a header followed by data. Then this table is transferred to the main page where it is displayed. My problem is that I am trying to format the buttons that I create in PHP for formatting. Here is php with 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 the class to the buttons. I thought it was easy to use as a formatting tag for CSS. My css file is as follows:

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

Each time the code that is on the page refresh is executed, a table is created, but the buttons look like those ugly standard buttons, and CSS is not applied. I was able to incorporate the style into a PHP file, which then worked, but that’s not the way I want to structure my page. PHP is really just a data provider, and I want to use CSS in a central place for layouts.

I already use the same CSS with just a different class name for the other buttons, and they work fine no matter where they are on the page. Only these in the table that I create do not want to work.

The table is embedded in a div that has the identifier "DbInfo" and is populated through innerHTLM.

Just in case, here is also my AJAX team:

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

Does anyone help?

Thanks...

Answer 1

only if someone is interested. I restructured my CSS and had explicit links. Instead of referring only to the class, I added a button type. The new css is as follows:

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

This allows me to access the elements correctly. Thanks to all your answers and Eric, who deleted his answer, but led me on the right path.

considers

Answer 2

You can add id to your button. For instance: -

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

And install the css class on the client side after you install innerHTML in your AJAX. For instance: -

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

NOTE. - It’s bad practice to get all the HTML from the server side through AJAX. Try to get only data from your server via AJAX and create your client side HTML table.

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