Loading query results into a Div - php

Question

I have a div
<div id="loading"></div>
I then have some jQuery that loads in a page which is query heavy and therefore displays a spinner
<script>
$('#page1').click(function () {
// add loading image to div
$('#loading').html('<img src="loading.gif"> loading...');
// run ajax request
$.ajax({
type: "POST",
dataType: "html",
url: "client_reporting_01_data.php",
success: function (d) {
// replace div's content with returned data
$('#loading').html(d);
}
});
});
</script>
My trigger for this is a menu item:
<li id="page1" class = "<?php if($current_pgname == "client_reporting_01") echo 'active'; ?>">
C01: Summary Report
</li>
QUESTION:
I have multiple pages and multiple menu items
I'd like to be able to REuse the code I have here to pull the required pages back when the appropriate menu item is clicked.
So I would have another menu item
<li id="page2" class = "<?php if($current_pgname == "client_reporting_02") echo 'active'; ?>">
C02: Summary Report
</li>
and another page to call: client_reporting_02
I am just struggling with how to do the jquery to make this work
Somehow the jquery has to be able to read a page requested ie client_reporting_02_data.php
A further complication is how to actually move to that page and have it work. If say I am on pagexyz and i click the menu item for client_reporting_01 - it of course doesn not move there at present as a href="#"

Answer 1

One way to do it is bind to a class, rather than an id -
<script>
$('.reportLink').click(function () {
...
});
</script>
add the class, and a data attribute that holds the url (ie. data-url="client_reporting_01_data.php" and your li would now be
<li id="page1" class = "reportLink <?php if($current_pgname == "client_reporting_01") echo 'active'; ?>" data-url="client_reporting_01_data.php">
C01: Summary Report
</li>
now your script can be something like -
<script>
$('.reportLink').click(function () {
// add loading image to div
$('#loading').html('<img src="loading.gif"> loading...');
linkurl = $(this).data('url');//Probably want to sanitize and/or whitelist to prevent injection
// run ajax request
$.ajax({
type: "POST",
dataType: "html",
url: linkurl,
success: function (d) {
// replace div's content with returned data
$('#loading').html(d);
}
});
});
</script>

Answer 2

I am changing your already existing code slightly. If I understand what you want, the following will work. Instead of using the ID to call the function, add a generic class to all list items that are effected. I called it mypage here. Then there are a couple of ways to do it.
One way is: Instead of storing the url as is as a class, let the id tell you what url you are to look for. See the changes below for explanation:
// Generic class
$('.mypage').click(function () {
// add loading image to div
$('#loading').html('<img src="loading.gif"> loading...');
// if you need to include the 0 with child page numbers less than 10, you should change your ids accordingly.
var page=this.id.replace('page',''),
url= 'client_reporting_' + page + '_data.php';
// run ajax request
$.ajax({
type: "POST",
dataType: "html",
url: url,
success: function (d) {
// replace div's content with returned data
$('#loading').html(d);
}
});
});

Answer 3

Why not just delegate an event listener to the <ul> elements with an <a> anchor and put the url to load in the href? Like so;
HTML
<ul id="pages">
<li class = "reportLink <?php if($current_pgname == "client_reporting_01") echo 'active'; ?>">
C01: Summary Report
</li>
<li class = "reportLink <?php if($current_pgname == "client_reporting_02") echo 'active'; ?>">
Another Summary Report
</li>
</li>
Javascript
var $target = $('#loading');
$('#pages').on('click', 'a', function(event) {
event.preventDefault();
// add loading image to div
$target.html('<img src="loading.gif"> loading...');
$.ajax({
type: "POST",
dataType: "html",
url: this.href,
success: function (d) {
// replace div's content with returned data
$target.html(d);
}
});
});
You could even simplify your code by using .load like so:
Javascript - Simplifed version
var $target = $('#loading');
$('#pages').on('click', 'a', function(event) {
event.preventDefault();
$target
.html('<img src="loading.gif"> loading...')
.load(this.href);
});