CODEWITHSUNDEEP
javascriptjquerycss
dgcaste
dgcaste

Reputation: 21

How do I get jquery CSS to elements inside of a dynamically loaded div element?

I have a page with a blank div element. When I press a button, it brings in a php file to process the table to show in the div. Only the contents of my style.css are being applied, and jquery mobile styles are not applying.

I've tried putting stylesheets in the retrieved php page and that made everything load twice.

style.css:

#customers {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

#customers td, #customers th {
  border: 1px solid #ddd;
  padding: 8px;
}

#customers tr:nth-child(even){background-color: #525252;}
#customers tr:hover {background-color: #aaa;}

#customers th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-image: -webkit-gradient(linear,left top,left bottom,from(#5393c5),to(#6facd5));
  color: white;
}

users.php:

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script>
  <script src="script.js"></script>
</head>

...

<div data-role="page">
  <div data-role="content" class="ui-content">
    <div class="ui-body ui-body-a ui-corner-all">

      <?php echo '<button class="getusers">Show Users</button><div id="dynamicUserTable">&nbsp;</div>';
    ?>

    </div>
  </div>
</div>

script.js:

$(document).ready(function() {
  $("button.getusers").click(function() {
    $("#dynamicUserTable").load("getusers.php");
  });
});

getusers.php:


$sql = "SELECT * FROM USERS";

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

echo "<div><table id=\"customers\">
<thead>
  <tr>
    <th>Name</th>
    <th>Email Address</th>
    <th>Mobile Phone</th>
    <th>Delete</th>
  </tr>
</thead>
<tbody>";

while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td>" . $row['firstName'] . " " . $row['lastName'] . "</td>";
    echo "<td>" . $row['email'] . "</td>";
    echo "<td>" . $row['mobilePhone'] . "</td>";
    echo "<td>" . '<div class="ui-input-btn ui-btn ui-icon-delete ui-btn-icon-notext ui-corner-all">';
    echo '<input type="button" data-icon="delete" data-iconpos="notext" value="Icon only" onclick="deleteUser(\'' . $row["userID"] . '\')"></div>'
    echo "</td>";
    echo "</tr>";
}
echo "</tbody></table></div><br/>";

That input type button should be a little circle with an X, but I just get a button that says "icon only". If I put that code in users.php the button shows fine. The table, however, shows perfectly per my style.css when the user loads.

In case it matters and because I expect someone to comment on it, I realize I have an older version of jquery mobile and jquery but it's the only way I can get some persistent menus to work without flickering artifacts and I'm trying to troubleshoot that separately.

Upvotes: 0

Views: 65

Answers (1)

dgcaste
dgcaste

Reputation: 21

Solved it, the issue was not initializing jquery properly.

script.js:

$(function(){
    $( "[data-role='header'], [data-role='footer']" ).toolbar();
});

$(function(){
    $( "[data-role='header'], [data-role='footer']" ).toolbar({ theme: "a" });
});

Upvotes: 1

Related Questions