I'm new to the forum and fairly new to CodeIgniter but I very much enjoy it. When I perform an onchange submit (using a dropdown and refreshing the page) the ID gets sent over no problem to the controller which then sends back an encoded json to the view (without ajax):
[{"rowID":"48","FirstName":"Scott","LastName":"Currie","Email":"
[email protected]
","Phone":"579-887-7352"}]
Controller:
Code:
public function test() {
if($this->input->post('list')){
$id = $this->input->post('list');
$query = $this->Booking_model->get_test_user($id);
echo json_encode($query);
}else{
$data['users'] = $this->Booking_model->get_users();
$this->load->view('home/test',$data);
You can see in the code above this returns the json if an ID has been posted or else it just shows the list of users.
Now when I use Ajax and manually create an array in the controller returning the ID that also works (see code below).
Code:
public function test_ajax() {
$id = $this->input->post('list');
$data = array(
'list' => $id
echo json_encode($data);
Here is what the ajax code looks like in the view:
View:
Code:
<script>
$(document).ready(function(){
$('#list').change(function(){
var id = $('#list').val();
console.log(id);
$.ajax({
type: 'POST',
url: '<?php echo base_url();?>' + 'home/test_ajax',
dataType: 'json',
data: {list: id},
success: function(data){
$('#result').html(data.list);
</script>
So, I want to be able to send the ID over to the controller via Ajax and return the encoded json like the first example without refreshing the page. I could then display the FirstName, LastName, Email and Phone being returned in the query from the model. Also, what is the proper way of displaying data returned from the ajax call. Is the $('').html(data.??) correct?
I hope that makes some sense and I apologize for the long winded question.
Thanks very much,
Scott
Based on your code above, I can't see why you need to refresh the page. It looks for a post value, and then echos the data back to your AJAX. Do you get an error message or what? Why do you need to press F5?
1. Some libraries use a JavaScript template that they append the returned json into. And replacing the whole #container
2. Or you can just do like you said. Append it to existing html elements. #firstName #lastName...
3. Or return generated html based on a CI view. (I'm doing this in a project)
Here's an example I wrote earlier regarding submitting and returning pure json (step 2) or formatted html (step 3).
You need to add the replacing code yourself ("success").
https://forum.codeigniter.com/thread-703...#pid352422
(03-27-2018, 11:50 AM)
jreklund Wrote:
Based on your code above, I can't see why you need to refresh the page. It looks for a post value, and then echos the data back to your AJAX. Do you get an error message or what? Why do you need to press F5?
1. Some libraries use a JavaScript template that they append the returned json into. And replacing the whole #container
2. Or you can just do like you said. Append it to existing html elements. #firstName #lastName...
3. Or return generated html based on a CI view. (I'm doing this in a project)
Here's an example I wrote earlier regarding submitting and returning pure json (step 2) or formatted html (step 3).
You need to add the replacing code yourself ("success").
https://forum.codeigniter.com/thread-703...#pid352422
Thank you very much for your help. I was able to find out that I was receiving an array from the ajax post, but I was having trouble outputting the data to the view. After looking at your example and some other areas of help I was able to solve the problem. I really appreciate your help.
public function booking_user() {
$id = $this->input->post('user_list');
$query = $this->Booking_model->get_book_user($id);
echo json_encode($query);
This gets the posted ID from the ajax script and sends that to the model and then is returned back to the view as json.
View:
<script>
$(document).ready(function(){
$('#user_list').change(function(){
var id = $('#user_list').val();
console.log(id);
$.ajax({
type: 'POST',
url: '<?php echo base_url();?>' + 'home/booking_user',
dataType: 'json',
data: {user_list: id},
success: function(data){
console.log(data);
$('#firstname').val(data[0].FirstName);
$('#lastname').val(data[0].LastName);
$('#email').val(data[0].Email);
$('#phone').val(data[0].Phone);
$('#playerone').val(data[0].FirstName + ' ' + data[0].LastName);
</script>
