• 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
ajax call to On success to select option

#5
It's not clear how far you have traced the execution and at what point it's breaking. But I see some ways you might improve this.

The "view" code seems to have some extra <label></label> pairs in a couple spots. Here it is cleaned up and using PHP Alternate Syntax because, for me, it's easier to read.

PHP Code:
<div class="form-group">
 
   <label class="col-sm-2 control-label"Dept/Unit/Branch</label
 
   <div class="col-xs-4"
 
       <select name="dept_no" id="dept_no" class="form-control">
 
           <option value="-1"> --- Select Dept/Unit/Branch --- </option>
 
           <?php foreach ($information_assign_dept as $row):
 
               ?>
                <option value="<?php echo $row->id?>" ><?php
                    if
($row->faculty_id != 0)
 
                   {
 
                       echo $row->dept_name.' / '.$row->faculty_name;
 
                   }
 
                   else
                    
{
 
                       echo $row->dept_name;
 
                   }
 
                   ?>
                </option>
            <?php endforeach; ?>
        </select>
        <span class="help-block"></span>         
    </div>
</div>
<div class="form-group"> 
    <label class="col-sm-2 control-label"> Designation </label> 
    <div class="col-xs-3"> 
        <select disabled class="form-control" id="cadre_id" name="cadre_id">
            <option value="-1">--- Select Designation ---</option>
        </select>
        <span class="help-block"></span>
    </div> 

    <label class="col-sm-2 control-label">Present Salary</label> 
    <div class="col-sm-2">
        <input type="text" class="form-control" id="present_salary" name="present_salary"/><span class="help-block"></span>
    </div>
</div> 

Notice that the Designation <select> element is disabled. This prevents using this element until we put some options into it. The disabled attribute will be removed in JavaScript shown later.

Here's a revised controller method. I'll explain the output from this when I talk about the JavaScript.

PHP Code:
public function get_selected_dept_attached_post($dept_no)
{
 
   $userid $this->session->userdata('id');
 
   $this->load->model('Model_user');
 
   $options $this->Model_user->dept_attached_post($dept_no$userid);
 
   if(emtpy($options)) //model returned nothing, send back a string we can use know that
 
   {
 
       echo "empty";
 
       return;
 
   }
 
   
    $out 
"<option value='-1' selected>--- Select Designation ---</option>";
 
   foreach ($options as $option)
 
   {
 
       $out .= "<option value='{$option->id}'>{$option->designation} / {$option->grade}</option>";
 
   }
 
   echo $out;


Note that the "selected" option is --- Select Designation --. It's not clear to me that you need this option because I'm not sure the model ever returns more than one row. And if it does return more than one, what are the criteria for which <option> should be selected? My assumption is that there can be multiple rows and there are not any criteria to determine which is selected. Therefore, the user needs the "select something" hint and it should be the default ("selected") option.

Now the JavaScript.

The JQuery selector for the "dept" <select> could be cleaner. This line
Code:
$('select[name="dept_no"]')
is ineffcient and hard to read.

Instead, use the "id" attribute as you did for the other <select> elsewhere in your code. Change the above to
Code:
$('#dept_no').on('change', function() {

A change in thinking about what is returned to success: might help a lot. Instead of returning JSON consider returning HTML. That would solve the problem of setting the "selected" option and would eliminate any need to process on the client-side except to put the returned HTML in the right spot on the page. The controller method above is returning HTML.

The amount of data sent back as HTML is not that large. It's not significantly larger than the JSON would be and PHP is designed for consturcting HTML. It does that really fast. On the client-side, it's much more efficient to simply replace some HTML than it is to create the HTML by runing a loop that makes multiple calls to $('#cadre_id').append.... And then there's all the string concantenation, e.g. "<option value='"+data.id+"'>"+data.designation+" / "+data.grade+"</option>" which is resource (time, memory, processing) intensive.

To return HTML instead of JSON, change dataType: "json", to dataType: "html",.

So, with all that in mind, the JavaScript should look something like this.

Code:
$('#dept_no').on('change', function () {
   var dept_no_ID = $(this).val();
   if (dept_no_ID) {
       $.ajax({
           url: "<?php echo site_url('clerkAE/get_selected_dept_attached_post').'/'; ?>" + dept_no_ID,
           type: "GET",
           dataType: "html",
           success: function (data)
           {
               var optionsList = $("#cadre_id");
               if (data !== 'empty') {
                   optionsList.prop("disabled", false); //enable the <select> element
                   optionsList.html(data);
               } else {
                   optionsList.prop("disabled", true); //make sure <select> element is disabled
               }

           }
       });
   }
});

I'm not 100% on the URL construction. First, it's not going to evaluate correctly unless the JavaScript is in-line. If the JavaScript loads from an external file it's not going to construct a proper URL string because the PHP won't evaluate meaning the constroller function never gets to execute. If that is the case you'll need to find some other way to build the URL. One way is like this.

Code:
var baseURL = location.host;
var ajaxURL = baseURL + '/clerkAE/get_selected_dept_attached_post';
//then later on
       $.ajax({
           url: ajaxURL + dept_no_ID,

Hope this helps.
Reply


Messages In This Thread
RE: ajax call to On success to select option - by dave friend - 10-11-2018, 10:10 AM

Digg   Delicious   Reddit   Facebook   Twitter   StumbleUpon  


Users browsing this thread:
1 Guest(s)


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