Trying to style output from my view file in Codeigniter with AJAX and
Model
<?php if (! defined('BASEPATH')) exit('No direct script access');
class Ajax_model extends CI_Model
{
public function __construct()
{
$this->load->database();
}
public function search($data) {
$this->db->select('title');
$this->db->select('text');
$this->db->like('title', $data);
$query = $this->db->get('news', 10);
return $query->result_array();
}
}
?>
Controller
<?php
// application/controller/ajax.php
class Ajax extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->model('ajax_model');
}
public function getdata($param = '')
{
// Get data from db
$data['ajaxdata'] = $this->ajax_model->search($param);
$data['ajaxdata'] = json_encode($data['ajaxdata']);
$this->load->view('ajax/index', $data);
//echo $data['ajaxdata'];
}
}
?>
View
<!-- application/views/ajax/index.php-->
<p><?=$ajaxdata?></p>
Finally, in my header where my form is; I have my JavaScript
<div id="searchresults"></div>
<script>
// This is the jQuery Ajax call
function doSearch()
{
$.ajax({
type: "GET",
url:"localhost/codeigniter/index.php/ajax/getdata/" + $("#mysearch").val(),
success:function(data){
$("#searchresults").html(data);
}});
}
</script>
Maybe I could do this differently?
My result at the moment shows like this
[{"title":"Cousy","text":"A very comfortable luxury double bed room"},{"title":"Romance","text":"This is a lovely room for couple on honey moon double bed"}]
Its showing records correctly but in same line. I want it to appear seperately and in href format
Answer
You can do this 2 ways:
1) Return the view file already formatted with the results. This obviously transfers more data in the ajax response and is hence slower but this is negligible for 10 results since PHP on the server will render the view quicker than JS anyway.
2) Return the JSON and then parse the JSON and use JS to format the response.
Method 1:
Your controller would become:
<?php
// application/controller/ajax.php
class Ajax extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->model('ajax_model');
}
public function getdata($param = '')
{
// Get data from db
$data['ajaxdata'] = $this->ajax_model->search($param);
$this->load->view('ajax/index', $data);
}
}
and your view file would become:
<?php
if(!empty($ajaxdata)) {
foreach($ajaxdata as $item) {
echo '<h1>'.$item['title'].'</h1>';
echo '<p>'.$item['text'].'</p>';
}
}
?>
Your model and form would stay the same.
Method 2:
Your controller would become:
<?php
// application/controller/ajax.php
class Ajax extends CI_Controller
{
public function __construct()
{
parent::__construct();
$this->load->model('ajax_model');
}
public function getdata($param = '')
{
// Get data from db
echo json_encode( $this->ajax_model->search($param) );
}
}
You can can rid of the view file. Your form would become:
function doSearch()
{
$.ajax({
type: "GET",
url:"localhost/codeigniter/index.php/ajax/getdata/" + $("#mysearch").val(),
success:function(data){
var results = $.parseJSON(data);
var html_str = '';
$.each( results, function( key, result ) {
html_str .= '<h1>'+result.title+'</h1><p>'+html_str+'</p>';
});
$("#searchresults").html(html_str);
}
});
}
I apologize if there are some syntax errors in here.
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM