How to populate textboxes with dropdown

Al

Alcor 07 Nov, 2017

Hello all.

I'm making a form where some textboxes are populate with a dropdown selection, but I don't get it. I've read posts in the forum and tutorials but I can't understand what I'm doing wrong. In the form, one drop down contains years. When a year is selected 3 text boxes are filled with data saved in a database. I think this was achieved with ajax, it's ok?

Well, in setup tab I created a on Load event with a Load javascript above the HTML Render form

 jQuery(document).ready(function($) {
  $("#group_id").prop("disabled",true);
  if ($("#group_id").val() == "Autor" || $("#group_id").val() == 'Super Administrador') {
    $("#a42").prop("disabled",false);
    $("#a45").prop("disabled",false);
    $("#a5").prop("disabled",false);
    $("#button10").prop("disabled",false);    
  }
  else {
    $("#a42").prop("disabled",true);
    $("#a45").prop("disabled",true);
    $("#a5").prop("disabled",true);
    $("#button10").prop("disabled",true);
  }

$("#years").change(function() {
var value;
value = $("#years :selected").val();

// Using the core $.ajax() method
$.ajax({
url: "index.php?option=com_chronoforms5&chronoform=Anillas_seriadas_gestion_copia&tvout=ajax",
data: { year: value},
type: "POST",
dataType : "json",
})
.done(function( json ) {
$("#a42").val(json.a42);
$("#a45").val(json.a45);
$("#a5").val(json.a5);
});

});
});

I also created in Setup tab an On ajax event with a DB read:

Enabled: Yes
Table name: xxxxxx
Multi read: Yes
Enabled Mode ID: Yes
Model ID: Data
Fields: id,user_id,year,a42,a45,a5
Conditions:
<?php
return array( 'year' => $form->data['years'] );
?>

And a Custom code:

<?php
$options = array();
if ( !$form->data['Data'] || count($form->data['Data']) < 1 ) {
  // no result was found
  $options[] = 0;
} else {
  foreach ( $form->data['Data'] as $d ) {
   $options['id'] =  $d['id'];
    $options['year'] =  $d['year'];
    $options['a42'] =  $d['a42'];
    $options['a45'] =  $d['a45'];
    $options['a5'] =  $d['a5'];
  }
}
echo json_encode($options);
?>

When the dropdown "years" is clicked the server response is, by example: {id:1,year:2017,a42:0,a45:160,a5:0}, but the textboxes aren't filled. What do I doing wrong? Thanks in advance.

Al

Alcor 08 Nov, 2017

I added to ajax method:

.fail(function(jqXHR, textStatus, errorThrown) {

  if (jqXHR.status === 0) {

    alert('Not connect: Verify Network.');

  } else if (jqXHR.status == 404) {

    alert('Requested page not found [404]');

  } else if (jqXHR.status == 500) {

    alert('Internal Server Error [500].');

  } else if (textStatus === 'parsererror') {

    alert('Requested JSON parse failed.');

  } else if (textStatus === 'timeout') {

    alert('Time out error.');

  } else if (textStatus === 'abort') {

    alert('Ajax request aborted.');

  } else {

    alert('Uncaught Error: ' + jqXHR.responseText);

  }

And now it shows me the error "Requested JSON parse failed"

Gr

GreyHead 09 Nov, 2017

Hi Alcor,

I can only suggest that you add debug code, and/or use your browser web developer tools to see what is actually being returned to the Ajax query.

Bob

Al

Alcor 09 Nov, 2017

Thanks for your answer GreyHead.

I've modified the ajax url

url: "index.php?option=com_chronoforms5&chronoform=Anillas_seriadas_gestion_copia&tvout=ajax",

to


// Using the core $.ajax() method
$.ajax({
url: "index.php?option=com_chronoforms5&chronoform=Anillas_seriadas_gestion_copia&event=ajax&tvout=ajax",
data: { year: value},
type: "POST",
dataType : "json",
})
.done(function( json ) {
console.log(json);
$("#a42").val(json.a42);
$("#a45").val(json.a45);
$("#a5").val(json.a5);
});

});
});

And now I haven't error but console.log(json) returns me an Array [ 0 ] .

In the Designer tab, Dropdown Events tab I set (view attachment). Is it ok?

[attachment=60738_20171109122720_dropdown-events-jpg.jpg][/attachment]

Al

Alcor 09 Nov, 2017

Sorry the attachment didn't upload correctly

On: != 
Value selected: ''
Action: function
Element ID/fn()/Event:
Options list/AJAX event: ajax

Gr

GreyHead 15 Nov, 2017

Hi Alcor,

It looks as if the Ajax event in your form isn't returning anything - or an empty array. What code do you have there?

Bob

Al

Alcor 15 Nov, 2017

A custom code with

<?php
header('Content-Type: application/json');

$options = array();
if ( !$form->data['Data'] || count($form->data['Data']) < 1 ) {
// no result was found
$options[] = 0;
} else {
foreach ( $form->data['Data'] as $d ) {
$options['id'] = $d['id'];
$options['year'] = $d['year'];
$options['a42'] = $d['a42'];
$options['a45'] = $d['a45'];
$options['a5'] = $d['a5'];
}
}
echo json_encode($options);
?>

Gr

GreyHead 17 Nov, 2017

Hi Alcor,

That suggests that $form->data['Data'] is empty so you are getting an empty array returned. What are you using to create that array?

Bob

Al

Alcor 20 Nov, 2017

A DB read on ajax event:

Enabled: Yes
Table name: xxxxxx
Multi read: Yes
Enabled Mode ID: Yes
Model ID: Data
Fields: id,user_id,year,a42,a45,a5
Conditions:
<?php
return array( 'year' => $form->data['years'] );
?>

Gr

GreyHead 23 Nov, 2017

Hi Alcor,

And does that return any data? It's tricky to debug Ajax calls but you can do it by adding debug code to output values to the returned data and using your web browser developer tools to see exactly what is being returned.or possibly by calling the form event directly from a URL.

Bob

Forums

How to populate textboxes with dropdown