CodeIgniter Forums
load data using jquery .change event from a method - Printable Version

+- CodeIgniter Forums (https://forum.codeigniter.com)
+-- Forum: Archived Discussions (https://forum.codeigniter.com/forumdisplay.php?fid=20)
+--- Forum: Archived Development & Programming (https://forum.codeigniter.com/forumdisplay.php?fid=23)
+--- Thread: load data using jquery .change event from a method (/showthread.php?tid=57952)

load data using jquery .change event from a method - El Forum - 04-29-2013

[eluser]imcody[/eluser]
hello I am new to codeigniter,

what I am trying to do is -- On change of the dropdown select item, I want to load the roles of the respective departments in the same view. I want another dropdown select box to be loaded when the first select element is changed in the same view while calling a method from the controller which will call another method of the model which load the roles.

Please help me on this, I know this is really simple, and I have done it in other platform almost thousand times, but I am kind of stuck.

Please!!!

Here is my Model:

Code:
class User extends CI_Model
{
public function getDepartment()
{
  $this->db->select('*');
  $this->db->from('school_dept');
  $query = $this->db->get();
  return $query->result();
}

public function getRolesByDepartment($deptid)
{
  $this->db->select('*');
  $this->db->from('school_user_role');
  $this->db->where('dept_id = ' . "'" . $deptid . "'");
  $query = $this->db->get();
  return $query->result();
}
}

Here is my controller:

Code:
<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class str extends CI_Controller {
function str(){
  parent::__construct();
  $this->load->model('user','',TRUE);
}

public function index(){
  $data = array();
  $data['depart'] = $this->user->getDepartment();
  $this->load->view('str', $data);
}

public function AjaxLoader($deptid){
  $data = array();
  $data['charDivVars'] = $this->user->getRolesByDepartment($deptid);
                [quote]// I don't know what to write here..........[/quote]
}
}
?>

Here is my view:

Code:
<html>
<head>
[removed][removed]
[removed]
$(document).ready(function(){
  $("#select").change(function(){
   var selectVal = $('#select :selected').val();
   $.ajax({
   url: "<?php echo site_url('str/AjaxLoader/') ?>" + selectVal ",
   type: "POST",
   data: selectVal,
   success: function(msg){
    //alert(msg);
    $('body').html(msg)
    }
   });
  });
});
[removed]
</head>

<body>
<select id="select">
<option value="0">Select</option>
&lt;?php
foreach($depart as $row):
{
?&gt;
<option value="&lt;?php echo $row-&gt;dept_id; ?&gt;">&lt;?php echo $row->dept_name; ?&gt;</option>
&lt;?php
}
endforeach
?&gt;
</select>
&lt;/body&gt;
&lt;/html&gt;


load data using jquery .change event from a method - El Forum - 04-29-2013

[eluser]TheFuzzy0ne[/eluser]
Please could you tell us what's happening?

Are you getting an error?

Have you tried calling that method directly from your browser's address bar?

Is error reporting enabled? If so, can you confirm it by making your app display an error?

By the way, controller names should start with the first character in uppercase. Wink

load data using jquery .change event from a method - El Forum - 04-29-2013

[eluser]TheFuzzy0ne[/eluser]
Sorry, I misread your question.

If you can tell us what you want your controller to return, we might be able to help you. At the moment, it's hard to tell, since any response from the server will replace your entire page, removing anything that already existed between the &lt;body ...&gt; tags. For someone who has done this a thousand times, I find that disconcerting. Wink

I suspect you want to return the HTML code to insert into your dropdown menu?

I've made a few assumptions here, since I don't know your table structure, field names, or possible values.

Your model method:
Code:
public function getRolesByDepartment($deptid, $html = FALSE)
{
    // We only need two fields for this, I've assumed they're called 'id' and 'name'.
    $query = $this->db
        ->select('id, name')
        ->where('dept_id', $deptid)
        ->get('school_user_role')->result();
    
    if ( ! $query)
    {
        return FALSE;
    }
    
    if ( ! $html)
    {
        return $query;
    }
    
    $ret = '<option value="0">Please select...</option>';
    foreach ($query as $row)
    {
        $ret .= '<option value="' . $row-&gt;id . '">' . htmlentities($row->name) . '</option>';
    }
    
    return $ret;
}

It's up to make your controller respond correctly to the request.

Also, a couple of notes:

The syntax you're using for $this->db->where(), whilst (kinda) correct, can be achieved much more easily (see my code above).
If you're selecting all fields, you don't need to use $this->db->select('*'). If you don't specify any fields to select, '*' is the default value.
You don't need to use $this->db->from(). You can pass the table name to $this->db->get(). This is more a personal preference, because it saves a little bit of code. An argument could be made that your method is more readable, so I leave it to you to decide.
The method I posted could be made a lot better. I'm not entirely sure on how you might need the data returned, so I've left it as-is, unless you pass TRUE in as the second parameter, in which case, you'll get the options returned as HTML. I think I'd break that up into two methods. The first would return an associative array which could be used with form_dropdown(), and the other would take the returned data and format it into HTML for your AJAX request.

load data using jquery .change event from a method - El Forum - 04-29-2013

[eluser]imcody[/eluser]
Hello There!!

First of all thank you for your reply!! your answer just invoked me that the returning value would replace the entire &lt;body&gt; tag!! I just figured out what I needed!! It was satisfactory.

secondly, what I meant previously by I have done this many times is that, I have done loaded data with ajax and javascript previously, but it was not like this. I did it with some raw coding and something.

Anyway, thank you again for your answer!!

Regards.

load data using jquery .change event from a method - El Forum - 04-29-2013

[eluser]TheFuzzy0ne[/eluser]
...And I forgot to welcome you to the forums, so... Welcome to the CodeIgniter forums! Smile

load data using jquery .change event from a method - El Forum - 04-29-2013

[eluser]imcody[/eluser]
how can I mark this thread as solved?

load data using jquery .change event from a method - El Forum - 04-29-2013

[eluser]TheFuzzy0ne[/eluser]
I think each post has a link that says something like "mark as solution". You need to click that on the relevant post.