Editable default value problem

Discussions related to customizing hooks. Hooks are documented at http://bigprof.com/appgini/help/advanced-topics/hooks/
Post Reply
rprevost
Veteran Member
Posts: 34
Joined: 2018-05-30 22:09

Editable default value problem

Post by rprevost » 2019-07-30 19:51

Hello to you all, (using AG 5.76)

In order to facilitate user input and save keystrokes, I am trying to implement a functionality demonstrated in the following section of the UdeMy course: 26. Retrieving parent record info into detail view field

Main goal:
On change for a dropdown field ("etu_sigle" from table "stage"), retrieve the value of another field ("nbrhres" from table "sigle") and put it in another field ("hresnbrfaites" in table "stage").

What works:
The ajax file is working fine. Here is the code:

Code: Select all

<?php
	$currDir = dirname(__FILE__) . '/..';
	include("$currDir/defaultLang.php");
	include("$currDir/language.php");
	include("$currDir/lib.php");
	
	/* grant access to all users who have acess to the order_details table */
	$sta_from = get_sql_from('stage');
	if(!$sta_from){
		header('HTTP/1.0 401 Unauthorized');
		exit;
	}
	
	$sigid = intval($_REQUEST['sigid']);
	
	$sta_hresnbrfaites = sqlValue("select nbrhres from sigle where id='{$sigid}'");
	
	echo $sta_hresnbrfaites;
?>
What does not work:
Nothing happens when the value of the dropdown field is changed. Here is the code from the javascript file (relevant code at the end):

Code: Select all

function display_error(field, msg) {
    "use strict";
    modal_window({
        message: '<div class="alert alert-danger">' + msg + '</div>',
        title: 'Message d\'erreur pour ' + field,
        close: function () {
            $j('#' + field).focus();
            $j('#' + field).parents('.form-group').addClass('has-error');
        }
    });
    return false;
}

function get_date(date_field) {
    "use strict";
    var y = $j('#' + date_field).val(),
        m = $j('#' + date_field + '-mm').val(),
        d = $j('#' + date_field + '-dd').val(),
        date_object = new Date(y, m - 1, d);
    if (!y) {return false; }
    return date_object;
}


$j(function(){
	
	  /* Make sure sta_findate is after sta_debutdate */
   
	$j('#update, #insert').click(function(){
       
       var stadebutdate = get_date('sta_debutdate'),
        stafindate = get_date('sta_findate'),
        etuform1inscdate = get_date('etu_form1inscdate'),
        etuform1confdate = get_date('etu_form1confdate'),
        etuform2inscdate = get_date('etu_form2inscdate'),
        etuform2confdate = get_date('etu_form2confdate'),
        gesform1inscdate = get_date('ges_form1inscdate'),
        gesform1confdate = get_date('ges_form1confdate'),
        gesform2inscdate = get_date('ges_form2inscdate'),
        gesform2confdate = get_date('ges_form2confdate'),
        gesaccueilinvitation = get_date('ges_accueilinvitation'),
        gesaccueiljour = get_date('ges_accueiljour');
		
		if(gesaccueiljour && (gesaccueiljour < gesaccueilinvitation)){
			return display_error('ges_accueiljour', 'Désolé, la date de la journée d\'accueil ne peut pas être plus récente que la date d\'invitation !(VOIR ONGLET GESTION) !');
		}
		
		if(gesform2confdate && (gesform2confdate < gesform2inscdate)){
			return display_error('ges_form2confdate', 'SUPERVISEUR : Il y a une erreur dans les dates d\'inscription et de confirmation pour la formation 2 !(VOIR ONGLET SUPERVISEUR)');
		}
		
		if(gesform1confdate && (gesform1confdate < gesform1inscdate)){
			return display_error('ges_form1confdate', 'SUPERVISEUR : Il y a une erreur dans les dates d\'inscription et de confirmation pour la formation 1 ! (VOIR ONGLET SUPERVISEUR)');
		}
		
		if(etuform2confdate && (etuform2confdate < etuform2inscdate)){
			return display_error('etu_form2confdate', 'STAGIAIRE : Il y a une erreur dans les dates d\'inscription et de confirmation pour la formation 2 ! (VOIR ONGLET STAGIAIRE)');
		}      
		
		if(stafindate && (stafindate < stadebutdate)){
			return display_error('sta_findate', 'Désolé, le stage ne peut pas finir avant d\'avoir commencé !');
		}
      
 		if(etuform1confdate && (etuform1confdate < etuform1inscdate)){
			return display_error('etu_form1confdate', 'STAGIAIRE : Il y a une erreur dans les dates d\'inscription et de confirmation pour la formation 1 ! (VOIR ONGLET STAGIAIRE)');
		}     
	});

 /*on changing etu_sigle-container, retrieve field 'nbrhres' content from table 'sigle and put in field 'sta_hresnbrfaites' to be edited if necessary */
	$j('#etu_sigle-container').on('change', function(){
		var sigid = $j('#etu_sigle').val();
		
		if(sigid == '{empty_value}'){
			$j('#sta_hresnbrfaites').val('');
		}else{
			$j.ajax({
				url: 'hooks/ajax-sigle-nbrhres.php',
				data: { sigid: sigid },
				success: function(data){
					$j('#sta_hresnbrfaites').val(data);
				}
			});
		}
	});	
})
Sources of the problem:
  • Typo somewhere. I could not find any.
  • The on change source is not right. I used 's2id_etu_sigle-container' but it might not be right. I also tried 'etu_sigle-container" without success. Here is the output from inspection of the page:
    <div class="col-lg-9">
    <div class="form-control-static" style="white-space: nowrap; overflow-x: hidden;">
    <div class="select2-container" id="s2id_etu_sigle-container" style="width: 100%; max-width: 665.8px;">
    <a href="javascript:void(0)" onclick="return false;" class="select2-choice" tabindex="-1">
    <span class="select2-chosen">PHT6104</span>
    <abbr class="select2-search-choice-close"></abbr>
    <span class="select2-arrow">
    <b></b>
    </span>
    </a>
    <input class="select2-focusser select2-offscreen" type="text" id="s2id_autogen13">
    </div>
    <span id="etu_sigle-container" tabindex="-1" class="select2-offscreen"></span>
    <input type="hidden" name="etu_sigle" id="etu_sigle" value="3">
    <button type="button" class="btn btn-default view_parent hspacer-md" id="sigle_view_parent" title="Visualiser Sigle du cours"><i class="glyphicon glyphicon-eye-open"></i></button>
    <button type="button" class="btn btn-success add_new_parent hspacer-md" id="sigle_add_new" title="Ajouter Sigle du cours"><i class="glyphicon glyphicon-plus-sign"></i></button>
    <span id="etu_sigleLoading"></span>
    </div>
    </div>
For sure I would greatly appreciate any suggestions.
Regards

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 518
Joined: 2018-04-01 10:12

Re: Editable default value problem

Post by pböttcher » 2019-07-30 20:19

Hi,

try instead of

var sigid = $j('#etu_sigle').val();

var sigid = $j('#s2id_etu_sigle-container .select2-chosen').text();

rprevost
Veteran Member
Posts: 34
Joined: 2018-05-30 22:09

Re: Editable default value problem

Post by rprevost » 2019-07-30 20:52

Thank you pbottcher, nice suggestion.

However, it is still not working and according to my understanding of the code it cannot work. I might be completely wrong in my reasoning but this is the way I see it.
You suggest using: var sigid = $j('#s2id_etu_sigle-container .select2-chosen').text();

If so, the value of this var sigid using the .select2-chosen is: PHT6104. It is not an id value.
In the ajax file, the sigid variable should be an integer that will be used to locate the proper record in the "sigle" table

$sigid = intval($_REQUEST['sigid']);
$sta_hresnbrfaites = sqlValue("select nbrhres from sigle where id='{$sigid}'");

What about this code here from the javascript file (see above)?
success: function(data){
$j('#sta_hresnbrfaites').val(data);

What is the value of data? This I do not understand.

Regards

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 518
Joined: 2018-04-01 10:12

Re: Editable default value problem

Post by pböttcher » 2019-07-30 20:57

Hi,

sorry for my misunderstanding. If you need to ID, try instead

$j('input[name="etu_sigle"]').val()

rprevost
Veteran Member
Posts: 34
Joined: 2018-05-30 22:09

Re: Editable default value problem

Post by rprevost » 2019-07-30 21:42

Hello again,

Tried : var sigid = $j('input[name="etu_sigle"]').val();

Still not working. The problem might lie possibly elsewhere.
Sorry about that.
Regards

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 518
Joined: 2018-04-01 10:12

Re: Editable default value problem

Post by pböttcher » 2019-07-30 21:54

Hi,

hmmm, strange,

can you add an alert(sigid;) after the
var sigid = $j('input[name="etu_sigle"]').val();
and verify if that is the correct id?

If that is the correct id, can you run

select nbrhres from sigle where id= with the id you retrieved.

What is the result you get?

rprevost
Veteran Member
Posts: 34
Joined: 2018-05-30 22:09

Re: Editable default value problem

Post by rprevost » 2019-07-31 01:48

I added alert(sigid); after the declaration of the var sigid.
Nothing is running (no alert is showing)

This is the problem, the script is not running on change: $j('#etu_sigle-container').on('change', function()

The etu_sigle-container might not be the right variable to monitor for change

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 518
Joined: 2018-04-01 10:12

Re: Editable default value problem

Post by pböttcher » 2019-07-31 09:20

Hi,

is the dropdown a lookup or a selection of values?
Can you post a screenshot with the debugger showing the dropdown definitions?

rprevost
Veteran Member
Posts: 34
Joined: 2018-05-30 22:09

Re: Editable default value problem

Post by rprevost » 2019-07-31 17:46

Here is the screen shot of the app with debugger
stage.png
stage.png (249.3 KiB) Viewed 127 times
"Sigle du cours" is a dropdown field linked to the "sigle" table. On change of this value I want the "nbrehres" fied value to appear in the "Nombre d'heures du stage complétées" entry box. The app already shows the "Nombre d'heures du stage" as an auto-fill value (75.00).
What I want is the put the value 75.00 into the "Nombre d'heures du stage complétées"field. If the user changes the value of the "Sigle du cours" dropdown field, the auto-fill value of the "Nombre d'heures du stage" will change and then the default value of the "Nombre d'heures du stage complétées" should reflect the change.

In other words, a given internship is done in a specific number of hours. Most of the time the student is present for this amount of hours. Sometimes, for some reasons, the student completes only part of the hours. The field "Nombre d'heures du stage complétées" is the exact number of hours done by the student. Most of the time it is the same value as the number of hours attached to the "sigle du cours" but it can vary at times.

Hope this helps.
Regards

pböttcher
AppGini Super Hero
AppGini Super Hero
Posts: 518
Joined: 2018-04-01 10:12

Re: Editable default value problem

Post by pböttcher » 2019-08-01 06:37

Hi,

thanks. So everything looks good. The issue could be that the script (on change) gets called bevor the dropdown is created. Can you try to change it to

$j('input[name="etu_sigle"]').on('change', function(){

rprevost
Veteran Member
Posts: 34
Joined: 2018-05-30 22:09

Editable default value solution

Post by rprevost » 2019-08-03 19:40

Thank you Mr pböttcher for you help. I finally succeeded implement a functionality based on Section 10, lesson 26 in the UdeMy course.
Users of my app can now change, at will, the value of a lookup field and make sure this new value will be stored in the target table.
They are saving thousands of keystrokes each week.
This is my final code for the "template.dv.js" file:

Code: Select all

 /*on changing of a lookup field (etu_sigle-container), retrieve the value of a field content (nbrhres) from the looked up table (sigle) and put in field (sta_hresnbrfaites) of the current table (stage)*/
	$j('#etu_sigle-container').on('change', function(){
		var hscomp = $j('#sta_hresnbrfaites').val();
		if (!hscomp) {
			var sigid = $j('#etu_sigle-container').val();
			$j.ajax({
				url: 'hooks/ajax-sigle-nbrhres.php',
				data: { sigid: sigid },d
				success: function(data){
					$j('#sta_hresnbrfaites').val(data);
				}
			});
		}
	});
What does this code do:
If allows the user to modify at will a looked up value and make sure this new value does not change over time (with an update of the looked up table for instance). The store value will not change if the dropdown value is changed. If the field that is storing the value is empty, its value will change and reflect the looked up value of new dropdown choice. The ajax-sigle-nbrhres.php file remains as shown in previous reply
Comments:
  • Identifying the right id for the "on change trigger" in the html code of the page was a nightmare. "s2id_etu_sigle-container" did not work
  • First thing to check was to make sure that the field that would receive the looked up value was not empty. If not empty, it should remain the same even if the dropdown value is changed. If the user wants to use the default value, he has to clear the target field first, then make his choice from the dropdown.

Post Reply