• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
Ajax data from controller

#1
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
Reply

#2
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
Reply

#3
(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.
Reply

#4
Hi, I'm glad it worked out for you. If you don't mind, please post your working code (or make an edit to your first code, appending the solution). So that other people who get stuck can find the solution quicker.
Reply

#5
Thanks again and here is my corrected code.

Controller:
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>
Reply

#6
If you click on the bottom black Reply to this topic button you will get a full editor
that will allow you to paste your code into code tags, makes it easier for us to view your code.
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply

#7
Sorry , No success .I tried everything in vain . any other suggestion? thanks
Reply


Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


  Theme © 2014 iAndrew  
Powered By MyBB, © 2002-2021 MyBB Group.