Table update with Ajax

[rushy]

I have a table in my template that I  would like to update using Ajax when a button is pressed. I am not sure how to go about this and hope somebody here could point me in the right direction. Here is my code for the table output. You can see I loop through the fields to output using a hard wired selector to list the retailer type. I have a button for Supermarkets that fires a js handler myFunc and I need to put the ajax there to call this page again with a param so I can then form the selector for supermarkets and update the table. When I get this working and understand how to do it in ajax I will code up a selector that is formed dependant on a bank of buttons and the table will update without the rest of the page - like magic! That's what ajax is for right?!

Thanks for any help - Paul

    <button type="button" onclick="myFunc()" value="1" class="btn btn-primary">Supermarkets</button>
		<div class= "table-responsive">
			<table class="table table-hover table-striped">
				 <thead>
					 <tr>
							 <th>Retailer</th>
							 <th>No. bags issued</th>
							 <th>Gross proceeds £</th>
							 <th>Net proceeds £</th>
							 <th>Other use of net proceeds</th>
							 <th>Amount donated £</th>		    
							 <th>Good causes in receipt of proceed</th>
							 <th>No. of paper bags issued</th>
							 <th>No. of bags for life</th>
					 </tr>
				 </thead>
				 <tbody>
				 <?php
						 $pg = $pages->get("/single-use-carrier-bags/");
						 $retailer = $pg->find("category=DIY, sort=title, include=all");
						foreach ($retailer as $r)
						{ 
							 echo "<tr>
							 <td><a href= '$r->url'>$r->title</a></td>
							 <td>".numFormat($r->no_bags_issued)."</td>
							 <td>".numFormat($r->gross_proceeds)."</td>
							 <td>".numFormat($r->net_proceeds)."</td>
							 <td>$r->other_use_net_proceeds</td>
							 <td>".numFormat($r->amount_donated)."</td>		                                           						 
							 <td>$r->good_causes_in_receipt</td>
							 <td>".numFormat($r->no_paper_bags_issued)."</td>
							 <td>".numFormat($r->no_bags_for_life)."</td>
							 </tr>";
						 }
				?>
				</tbody>
			</table>	      
		</div>
	 </div>   
	</div>

<script type="text/javascript">
function myFunc() {
	
}
</script>

 

[flydev]

Hi Paul,

lets try to get started with a basic flow.

 

Create a file called mytable.php in the root directory (along side the index.php file) and paste the following code :

Spoiler

<?php namespace ProcessWire;

require_once ('./index.php'); // bootstrap ProcessWire

if($config->ajax):

    $mytableContent = ""; // hold the table markup
    $pg = $pages->get("/single-use-carrier-bags/");
    // here you shoud do some logic to build and replace the hardcoded selector
    $selector = wire('input')->post->selector; // your selector passed as post parameter to the ajax call
    // if(strlen($selector) > 0) $selector = ...;
    $retailer = $pg->find("category=DIY, sort=title, include=all"); // should be $pg->find($selector);
    foreach ($retailer as $r) {
        $mytableContent .= "<tr>
                                 <td><a href= '$r->url'>$r->title</a></td>
                                 <td>".numFormat($r->no_bags_issued)."</td>
                                 <td>".numFormat($r->gross_proceeds)."</td>
                                 <td>".numFormat($r->net_proceeds)."</td>
                                 <td>$r->other_use_net_proceeds</td>
                                 <td>".numFormat($r->amount_donated)."</td>		                                           						 
                                 <td>$r->good_causes_in_receipt</td>
                                 <td>".numFormat($r->no_paper_bags_issued)."</td>
                                 <td>".numFormat($r->no_bags_for_life)."</td>
                                 </tr>";
    }

    echo $mytableContent;

endif;

 

 

Then In your template file put the following code :

Spoiler

<?php
$mySelector = "test"; // build the selector as you want, from a form or whatever
?>
<button type="button" onclick="myFunc()" value="1" class="btn btn-primary">Supermarkets</button>
<div class= "table-responsive">
    <table class="table table-hover table-striped">
        <thead>
        <tr>
            <th>Retailer</th>
            <th>No. bags issued</th>
            <th>Gross proceeds £</th>
            <th>Net proceeds £</th>
            <th>Other use of net proceeds</th>
            <th>Amount donated £</th>
            <th>Good causes in receipt of proceed</th>
            <th>No. of paper bags issued</th>
            <th>No. of bags for life</th>
        </tr>
        </thead>
        <tbody id="retailer-data">

        </tbody>
    </table>
</div>


<script type="text/javascript">
    function myFunc() {
        var webservice = '/mytable.php'; // the page being requested by ajax call
        $.ajax({
            type: "POST",
            url: webservice,
            data: {selector: '<?php echo $mySelector; ?>'}, // custom POST var for your custom selector
            success: function (data) {
                $('#retailer-data').append(data);
            },
            error: function (msg) {
                alert(msg.responseText);
            }
        });
    }
</script>

 

 

Hope it get you started.

 

[rushy]

Thank you very much for taking the time to do this! That looks just what I need to point me in the right direction, at least I now have some hope I am starting off in the right direction. I will let you know how I get on and if I get stuck on some aspect of this I will probably be bothering you again... ! 

Regards - Paul