Difference between revisions of "6CS028 Workshop - Ajax"

From mi-linux
Jump to navigationJump to search
 
(59 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
[[Main Page]] >> [[6CC001|Advanced Web Technologies]] >> [[6CC001 - Workbook|Workbook]] >> Week 06
+
[[Main Page]] >> [[6CS028|Advanced Web Development]] >> [[6CS028 - Workbook|Workbook]] >> Week 04 - Ajax
  
−
Today we are going to use Ajax to create a simple jQuery Live Search in Code Igniter:
+
'''Important''': this is a CodeIgniter example, but it is easily adaptable to Laravel.
  
−
* Step 1 – Create the data controller/view
+
== The JSON data ==
−
* Step 2 – Create the web page controller/view
 
  
−
== Step 1 – Create the data controller/view ==
+
First, let's create a page that will output JSON data from our existing "news" database table, like this:
 +
* https://mi-linux.wlv.ac.uk/~in9352/ci4/public/index.php/ajax/get/hello
  
−
== Step 2 – Create the web page controller/view ==
+
Create a '''new''' controller called '''Ajax.php''', with the following code:
 +
<pre>
 +
<?php
 +
 
 +
namespace App\Controllers;
 +
 
 +
use App\Models\NewsModel;
 +
 
 +
class Ajax extends BaseController
 +
{
 +
public function get($slug = null)
 +
{
 +
$model = model(NewsModel::class);
 +
$data = $model->getNews($slug);
 +
 
 +
print(json_encode($data));
 +
}
 +
 +
}
 +
</pre>
 +
Note: it is very similar to our previous news controller. The function above selects a given news items from our model (as per before), but converts the data to JSON and simply prints it to the browser.
 +
 
 +
== The Ajax call ==
 +
Next, we need to write some JavaScript that will "fetch" data from the URL above.
 +
 
 +
In your '''existing overview.php''' view, make the following changes:
 +
 
 +
Add a container paragraph (maybe right at the top for now), that will be used to display the data coming back from the request:
 +
<pre>
 +
<p id="ajaxArticle"></p>
 +
</pre>
 +
 
 +
Next, add a button for each article, that calls the JavaScript code, passing the current article's slug:
 +
<pre>
 +
<p><button onclick="getData('<?= esc($news_item['slug'], 'url') ?>')">View article via Ajax</button></p>
 +
</pre>
 +
Note: the above should be inside the foreach loop, right after the existing "view article" link.
 +
 
 +
Finally, add the JavaScript block at the bottom of the file:
 +
<pre>
 +
<script>
 +
function getData(slug) {
 +
 +
// Fetch data
 +
fetch('https://mi-linux.wlv.ac.uk/~in9352/ci4/public/ajax/get/' + slug)
 +
 +
  // Convert response string to json object
 +
  .then(response => response.json())
 +
  .then(response => {
 +
 
 +
// Copy one element of response to our HTML paragraph
 +
document.getElementById("ajaxArticle").innerHTML = response.title + ": " + response.text;
 +
  })
 +
  .catch(err => {
 +
 +
// Display errors in console
 +
console.log(err);
 +
});
 +
}
 +
</script>
 +
</pre>
 +
Notes:
 +
* you will have to change the URL in the fetch statement, to match yours.
 +
* the document.getElementById("ajaxArticle").innerHTML allows you to write to the HTML element specified earlier. You could have more than one!
 +
* you might eventually wish to move this to an external JS file, as it's more efficient and tidy.
 +
 
 +
Here is mine:
 +
* [https://mi-linux.wlv.ac.uk/~in9352/ci4/public/index.php/newsajax https://mi-linux.wlv.ac.uk/~in9352/ci4/public/index.php/newsajax]
 +
* Try pressing the various "View article via Ajax" buttons, and see how the article is displayed at the top.
 +
* Look in the developer tools / network tab, and note how each button triggers an HTTP request behind the scenes! Look at their preview.

Latest revision as of 16:12, 9 March 2023

Main Page >> Advanced Web Development >> Workbook >> Week 04 - Ajax

Important: this is a CodeIgniter example, but it is easily adaptable to Laravel.

The JSON data

First, let's create a page that will output JSON data from our existing "news" database table, like this:

Create a new controller called Ajax.php, with the following code: 

<?php

namespace App\Controllers;

use App\Models\NewsModel;

class Ajax extends BaseController
{
	public function get($slug = null)
	{
		$model = model(NewsModel::class);
		$data = $model->getNews($slug);

		print(json_encode($data));
	}
	
}

Note: it is very similar to our previous news controller. The function above selects a given news items from our model (as per before), but converts the data to JSON and simply prints it to the browser.

The Ajax call

Next, we need to write some JavaScript that will "fetch" data from the URL above.

In your existing overview.php view, make the following changes:

Add a container paragraph (maybe right at the top for now), that will be used to display the data coming back from the request: 

<p id="ajaxArticle"></p>

Next, add a button for each article, that calls the JavaScript code, passing the current article's slug: 

<p><button onclick="getData('<?= esc($news_item['slug'], 'url') ?>')">View article via Ajax</button></p>

Note: the above should be inside the foreach loop, right after the existing "view article" link.

Finally, add the JavaScript block at the bottom of the file: 

<script>
	function getData(slug) {
		
		// Fetch data
		fetch('https://mi-linux.wlv.ac.uk/~in9352/ci4/public/ajax/get/' + slug)
			
		  // Convert response string to json object
		  .then(response => response.json())
		  .then(response => {

			// Copy one element of response to our HTML paragraph
			document.getElementById("ajaxArticle").innerHTML = response.title + ": " + response.text;
		  })
		  .catch(err => {
			
			// Display errors in console
			console.log(err);
		});
	}
</script>

Notes:

  • you will have to change the URL in the fetch statement, to match yours.
  • the document.getElementById("ajaxArticle").innerHTML allows you to write to the HTML element specified earlier. You could have more than one!
  • you might eventually wish to move this to an external JS file, as it's more efficient and tidy.

Here is mine:

Retrieved from "https://mi-linux.wlv.ac.uk/wiki/index.php?title=6CS028_Workshop_-_Ajax&oldid=10284"