Skip to main content ↑ ↓
Topic solved
This topic has been marked as solved and requires no further attention.
Topic: ONChange Event ..pls Help... (Read 2006 times) previous topic - next topic

ONChange Event ..pls Help...

Hi,
I have a 2 fields in a Table: CODE and NAME; I want when I SELECT field CODE in the ADD Page to be auto-populated the field NAME. How do I do that ? I figure out the event OnChange can do the trick but i do not have samples of code to write..
To easy understand:
 I SELECT "COD_PROJECT" (from table PROJECTS) I need to be AUTOCOMPLETED the field "Name_ProJect" (from table PROJECTS). Now I have created a dependent field and I have to choose it ...but is not user friendly...
Can someone help ?
Thanks in advance !
(PS: I tried to add a screen capture but I received the message: "There was a problem during the uploading of CODPROIECT.PNG.
The upload directory is full. Please contact an administrator about this problem")  :))
Regards & Thanks

Re: ONChange Event ..pls Help...

Reply #2 –
Hi Wilvin, for mu simply don't work.
I have a table Budgets with 2 fields:
Cod_Proiect
Nume_Proiect
...both fields should come from my Table name: PROIECTE) (n.b. PROJECTS in english)
When I select Cod_Proiect i want to query database -> table: PROIECTE to obtain "Nume_Proiect" coresponding to Cod_Proiect (which is Unique inside the table per record).
No error in LOG ...no effect on app; I followed your suggestions from the post:
---------
On-Change code for FIELD Cod_Proiect is:

$('#ctrl-COD_Proiect').on('change', function(){
    let codproiect = $(this).val();
    sendData(codproiect);
});

function sendData(codproiect){
    var data = {// We are trying to organize our data for the server
        proiect: codproiect
    }
  
    //We now make an ajax post to the server
    var request = $.ajax({
        type: 'POST', // the type of request we are making.
        url: siteAddr+'api/getGoals/?csrf_token='+csrfToken, //our api link/url
        data: data, // the data we are sending to the server
        cache: false, // we dont want the request to be cached.
    });
  
    // Now we check for response that will be gotten from the server.
    // Callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        $('#ctrl-Nume_Proiect').val(response.data.Nume_Proiect);
    });

  
    // Now we check for errors we get when trying to make our post request.
    request.fail(function (jqXHR, textStatus, errorThrown){});
}
------
Code from ApiController.php  is:

<?php

/**
 * Info Contoller Class
 * @category  Controller
 */

class ApiController extends BaseController
{

   /**
    * call model action to retrieve data
    * @return json data
    */

   function json($action, $arg1 = null, $arg2 = null)
   {
      $model = new SharedController;
      $args = array($arg1, $arg2);
      $data = call_user_func_array(array($model, $action), $args);
      render_json($data);
   }
   // Start functie GETGOALS
   function getGoals(){
       if(!empty($_POST)){ // we check if the post variable is not empty.
         $proiect = $_POST['proiect']; // pass the proiect to our variable $proiect
         
         $db = $this->GetModel();
         $db->where("Cod_Proiect", $proiect);
         $done = $db->getOne("proiecte"); // get our data from database
         
         if($done) { // checks if it was successful or not
            $res['success'] = true;
            $res['msg'] = "Action Successfully.";
            $res['data'] = $done;
         } else{
            $res['success'] = false;
            $res['msg'] = "Eroare citire NUME proiect.";
         }
         
         render_json($res); // we return result of the update query in JSON format as expected.
      } else {
            $res['success'] = false;
            $res['msg'] = "No post data detected.";
          
            render_json($res); // here we return access denied if Csrf fails
        }
   


   }
   // End functie GETGOALS

Finally I'm doing something wrong but I can not figure-out what: what is wrong ? Is there a possibility to activate LOG for any error ?

Re: ONChange Event ..pls Help...

Reply #3 –
Hi, finally worked for me, but I discovered a "trick" it is not a "bug":
- if you reuse the function:
function sendData(codproiect)
   {
    var data = {// We are trying to organize our data for the server
        proiect: codproiect
   }
in another on-change event: will messup and will not work: first function encountered will RUN.
- so function "sendData" should have an unique name per each on-change event: e.g. sendProductId, sendStudentName, etc.

All the best and a big hug Willvin for helping me !

PS: On-change event It is not working in EDGE Browser: trigger an error. Chrome is working.

Re: ONChange Event ..pls Help...

Reply #5 –
Again you are right: I forgot to clear cache !!! :'(  ...after clear cache worked in Edge also. Thanks!!!

Re: ONChange Event ..pls Help...

Reply #6 –
Sorry to say but is a NASTY BUG related with this feature, as follow:
1) In the PAGE-SCRIPTS.JS in case an event is sent to server al the time is written in the JS file as:
$('#ctrl-Field_Name').on('change', function(){ ...}
but WITHOUT "Table_Name" and this will duplicate the functions in JS file, because SAME FIELD named "ctrl-Field_Name" may appear in several Tables with different functions...
2) In this regard, you receive random-values depending on which function is executed.
Is a nasty bug !
Correct call into the PAGE-SCRIPTS.JS for the function should be written as:
$('#ctrl-Table_name.Field_Name').on('change', function(){ ...}
This is a VERY USEFUL functionality, please do a work around ...and let me know :)
To better understand I'm giving you bellow a sample code from the Application.

;$('#ctrl-Cod_Unic_Linie_Buget').on('change', function(){
    let Cod_Unic_Linie_Buget = $(this).val();
    sendCimLinieBugetProiect(Cod_Unic_Linie_Buget);
});
function sendCimLinieBugetProiect(Cod_Unic_Linie_Buget){
    var data = {// We are trying to organize our data for the server
        codliniebuget: Cod_Unic_Linie_Buget
    }
    //We now make an ajax post to the server
    var request = $.ajax({
        type: 'POST', // the type of request we are making.
        url: siteAddr+'api/getLinieBugetProiect/?csrf_token='+csrfToken, //our api link/url
        data: data, // the data we are sending to the server
        cache: false, // we dont want the request to be cached.
        //dataType: 'json' //the type of data we expect our api to return.
    });
    // Now we check for response that will be gotten from the server.
    // Callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        $('#ctrl-Categorie').val(response.data.Nume_cat_cheltuiala_eligibila);
        $('#ctrl-Subcategorie').val(response.data.Nume_subcat_cheltuiala_eligibila);
    });
    // Now we check for errors we get when trying to make our post request.
    // Callback handler that will be called on failure
    request.fail(function (jqXHR, textStatus, errorThrown){
        // Log the error to the console
        console.error(
            "The following error occurred: "+
            textStatus, errorThrown
        );
    });
}
$('#ctrl-Cod_Unic_Linie_Buget').on('change', function(){
    let Cod_Unic_Linie_Buget = $(this).val();
    sendLinieBugetProiect(Cod_Unic_Linie_Buget);
});
function sendLinieBugetProiect(Cod_Unic_Linie_Buget){
    var data = {// We are trying to organize our data for the server
        codliniebuget: Cod_Unic_Linie_Buget
    }
    //We now make an ajax post to the server
    var request = $.ajax({
        type: 'POST', // the type of request we are making.
        url: siteAddr+'api/getLinieBugetProiect/?csrf_token='+csrfToken, //our api link/url
        data: data, // the data we are sending to the server
        cache: false, // we dont want the request to be cached.
        //dataType: 'json' //the type of data we expect our api to return.
    });
    // Now we check for response that will be gotten from the server.
    // Callback handler that will be called on success
    request.done(function (response, textStatus, jqXHR){
        $('#ctrl-Categorie').val("Something Else");
        $('#ctrl-Subcategorie').val("Random text");
 

Re: ONChange Event ..pls Help...

Reply #7 –
@Catalin‍ a workaround for that will be to edit the page as a Custom by clicking on the custom checkbox and then change the input id to something unique and then add you js code to Custom JS.