I load data onto a page using Ajax.
Here is the div (saleContentData) into which it is loaded:
<div class="resultsPage salesList">
<h2>Sales</h2>
<div class="salesFilters">
<form action="" method="POST">
<label for="date1">Start Date</label>
<input id="startDate" type="date" name="date1" value="Start Date" placeholder="Start Date" value="" min="1997-01-01" max="2030-12-31" />
<label for="date2">End Date</label>
<input id="endDate" type="date" name="date2" value="End Date" placeholder="End Date" value="" min="01-01-2010" max="01-01-2030" />
<button id="filterSales">Filter Sales</button>
<button id="resetFilter">Reset</button>
</form>
</div>
<div class=" salesContent">
<div class="saleContentData">
<div id="loading">
<img id="loading-image" src="assets/img/loader.gif" alt="Loading..." />
</div>
</div>
</div>
</div>
Here is the the script to display the data.
if (isset($_POST['start_date']) && $_POST['end_date']) {
$startDate = $_POST['start_date'];
$endDate = $_POST['end_date'];
$page_size = $_POST['page_size'];
$page_num = $_POST['page_num'];
showFiltered($startDate, $endDate, $page_size, $page_num);
} else if (isset($_POST['page_size']) && $_POST['page_num']) {
$page_size = $_POST['page_size'];
$page_num = $_POST['page_num'];
showNormal($page_size, $page_num);
} else {
showNormal();
}
function showNormal($page_number = 1, $page_size = 100)
{
//THE DATA
$data = getData("https://api.someapi.com/v2/sales?page_size=" . $page_size . "&page_number=" . $page_number);
//SHOW THE DATA
showRecords($data);
}
function showRecords($data)
{
//STATISTICS ABOUT THE DATA
$total_sales = ($data['page_summary']['total']);
$current_page = $data['page_summary']['page_number'];
echo $total_sales . " sales<br/>";
$num_pages = (ceil($total_sales / 100) * 100) / 100;
echo "<ul>";
// TO DISPLAY THE NUMBER OF PAGES
for ($page = 0; $page < $num_pages; $page++) {
if ($page == $current_page - 1) {
echo "<li class='page$page active'>" . $page + 1 . "</li>";
} else {
echo "<li class='page$page'>" . $page + 1 . "</li>";
}
}
echo "</ul>";
// TABLE WITH ALL SALES RECORDS
$sales = $data['sales'];
$counter = 1;
echo "<table id='salesTable'>
<thead><tr class='headingRow'><th class='image'></th><th class='productHD'>Product</th><th>Status</th><th>Revenue</th><th>Quantity</th><th class='dcCol'>DC</th><th>Order ID</th><th>Customer Name</th><th>Date</th></tr></thead>";
foreach ($sales as $key => $row) {
$col1 = $row['selling_price'];
$col2 = $row['quantity'];
$revenue = ($col1 * $col2);
echo "<tr><td class='num centerCol'><img src='placeholder.png'/></td><td class='productTitle'>" . $row['product_title'] . "</td><td class='centerCol'>" . $row['sale_status'] . "</td><td class='centerCol'>" . "R" . $revenue . "</td><td class='centerCol'>" . $row['quantity'] . "</td><td class='centerCol'>" . $row['dc'] . "</td><td class='centerCol'>" . $row['offer_id'] . "</td><td>" . $row['customer'] . "</td><td>" . $row['order_date'] . "</td></tr>";
}
echo "</table>";
}
Here is the Javscript that loads the page into the div:
$(".goSale").click(function () {
$.ajax({
method: "GET",
url: "getsales.php",
success: function (data) {
$(".saleContentData").html(data);
},
error: function (request, status, error) {
$(".saleContentData").html(error);
},
complete: function () {},
});
});
if I run the file by itself the list with the page numbers is displayed correctly and I see 1 TO 7. If I load the file using Ajax I get a different result and the page numbers are displayed as seven 1s.
Why would this be please?
So after looking at the HTML I see the list is not being generated and the numbers are loaded in the tag and so there is not list items.
Why would that be?
Does Ajax remove something?
Loading the page by itself
Loading the page using Ajax
Solved it:
echo "<ul id='pagesList'>";
for ($page = 0; $page < $num_pages; $page++) {
echo "<li class='page$page'>";
echo $page + 1;
echo "</li>";
}
echo "</ul>
