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;
?>
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);
}
});
}
});
})
- 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>
Regards