(Solved) Double drop-down using Ajax

I need a help for create a double drop down using Ajax.
I have buyed your pdf but im very confused.

I need to show to the second dropdown some subcategories.
This is my code:

In html form code:

<?php
if ( !$mainframe->isSite() ) { return; }
$db =& JFactory::getDBO();
$query = "
SELECT DISTINCT `id`, `title`
FROM `#__categories`
WHERE `id` IN(62,69)
ORDER BY `title`;
";
$db->setQuery($query);
$data = $db->loadObjectList();
?>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">State</label>
<select class="cf_inputbox" id="state" size="1" title="" name="state">
<option value="">==??==</option>
<?php
foreach($data as $d) {
echo "<option value='".$d->id."'>".$d->title."</option>";
}
?>
</select>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_dropdown">
<label class="cf_label" style="width: 150px;">County</label>
<span id='ajax_getcounty' style='color:#444;'>Please choose a state</span>
<span id='progress_getcounty' style='visibility:hidden;' > Searching . . .</span>
</div>
<div class="cfclear"> </div>
</div>
<div class="form_item">
<div class="form_element cf_button">
<input value="Submit" name="button_1" type="submit" />
</div>
<div class="cfclear"> </div>
</div>

62,69 is the two categories that have some subcategories

in java code in onload :

var cf_formname = 'provadropdown';
window.addEvent('domready', function() {
  $('state').addEvent('change', function () {
    var a = $('state').value;
    if ( a != null && a != '' ) {
      getCounty(a);
    } else {
      $('ajax_getcounty').setHTML("<span id='ajax_getcounty' >Please select a state</span>")
    }
  });
});
function getCounty(a){
  var url = 'index.php?option=com_chronoforms&chronoform='+cf_formname+'&event=ajax&format=raw';

  new Request.HTML({
    method: 'get',
    url : url,
    onRequest: function(){
      console.log(url);
      $('progress_getcounty').setStyle('visibility', 'visible');
    },
    onComplete: function(){
      $('progress_getcounty').setStyle('visibility', 'hidden');
    },
    update: $('ajax_getcounty'),
    data: { 'sid' : a }
  }).send();
};

in custom code in ajax event

<?php
$state_id =& JRequest::getString('sid', '', 'get');
if ( $state_id ) {
$db =& JFactory::getDBO();
$query = "
SELECT DISTINCT `title` AS `id`, `title`
FROM `#__categories`
WHERE `id` = '$state_id'
ORDER BY `title`;
";
$db->setQuery($query);
$data = $db->loadObjectList();
if ( count($data) ) {
$m = new stdClass();
$m->id = 0;
$m->title = '==?==';
$data = array_merge(array($m), $data);
$return = JHTML::_('select.genericlist', $data, 'title',
'class="inputbox required select" size="1" ', 'id', 'title', 0);
} else {
$return = "Sorry, we couldn't find that state";
}
} else {
$return = "Sorry, we couldn't find a state id";;
}
echo $return;
?>
<?php
$mainframe->close();
?>

in frontend view the first drpodown works and i can see the 2 categories
but if i select one nothing happen

The console of browser say
Uncaught TypeError: Object [object Window] has no method 'addEvent'
in line 2 = window.addEvent('domready', function()

What is wrong?

How i can show the subcategories of the categories?
I hope someone can help me.

I solved the problem
this is new code

In html form:

<?php
if ( !$mainframe->isSite() ) { return; }
$db =& JFactory::getDBO();
$query = "
SELECT DISTINCT `id`, `title`
FROM `#__categories`
WHERE `id` IN(62,69)
ORDER BY `title`;
";
$db->setQuery($query);
$data = $db->loadObjectList();
?>
<div class="ccms_form_element cfdiv_select" id="label_text_container_div">
  <label style="display:none">Tipologia Attività</label>
  <select class="" id="state" size="1" title="" name="state" style="text-transform: none;">
<option value="">Tipologia Attività</option>
<?php
foreach($data as $d) {
  echo "<option value='".$d->id."'>".$d->title."</option>";
}
?>
  </select>
  <div class="clear"></div>
  <div id="error-message-input_select_0"></div>
</div>

<div class="ccms_form_element cfdiv_select" id="label_text_container_div">
  <label class="cf_label" style="display:none;">Provincia</label>
  <span id='ajax_getcounty' style='color:#444;'></span>
  <span id='progress_getcounty' style='visibility:hidden;' > <h4>Attendere...</h4></span>
  <div class="clear"></div>
  <div id="error-message-input_select_0"></div>
</div>

In Java code Onload

var cf_formname = 'myformname';
window.addEvent('domready', function() {
  $('state').addEvent('change', function () {
    var a = $('state').value;
    if ( a != null && a != '' ) {
      getCounty(a);
    } else {
      $('ajax_getcounty').setHTML("<span id='ajax_getcounty' >Scegli tipologia Attività</span>")
    }
  });
});
function getCounty(a){
  var url = 'index.php?option=com_chronoforms&chronoform='+cf_formname+'&event=ajax&format=raw';

  new Request.HTML({
    method: 'get',
    url : url,
    onRequest: function(){
      console.log(url);
      $('progress_getcounty').setStyle('visibility', 'visible');
    },
    onComplete: function(){
      $('progress_getcounty').setStyle('visibility', 'hidden');
    },
    update: $('ajax_getcounty'),
    data: { 'sid' : a }
  }).send();
};

in custom code on Ajax event

<?php
$state_id =& JRequest::getString('sid', '', 'get');
if ( $state_id ) {
$db =& JFactory::getDBO();
$query = "
SELECT DISTINCT  `id`, `alias`
FROM `#__categories`
WHERE `parent_id` = '$state_id'
ORDER BY `alias`;
";
$db->setQuery($query);
$data = $db->loadObjectList();
if ( count($data) ) {
$m = new stdClass();
$m->id = ac;
$m->alias = 'Scegli la Provincia';
$data = array_merge(array($m), $data);
$return = JHTML::_('select.genericlist',  $data , 'catid',
'class="inputbox required select" size="1"', 'id', 'alias', 0);
} else {
$return = "Sorry, we couldn't find that state";
}
} else {
$return = "Sorry, we couldn't find a state id";;
}
echo $return;
?>
<?php
  $form->data['catid'] = "{$form->data['catid']}";  ?>
<?php
$mainframe->close();
?>

The dropdown works and i can choose a subcategory.

The problem now is this

I have tu submit a new article and the second dropdown is the catid

But when i submit the form everything is saved exept a catid.

What is wrong?

Hi solfri,

Do you have a field named "catid" by the time the form is submitted ? I couldn't find one in your HTML code.

You must have a column named "catid" in the database table as well.

Regards,
Max

Hi Max, thanks for your answer.

The catid field is the second dropdown generated with ajax in the custom code in ajax event

<?php
$state_id =& JRequest::getString('sid', '', 'get');
if ( $state_id ) {
$db =& JFactory::getDBO();
$query = "
SELECT DISTINCT  `id`, `alias`
FROM `#__categories`
WHERE `parent_id` = '$state_id'
ORDER BY `alias`;
";
$db->setQuery($query);
$data = $db->loadObjectList();
if ( count($data) ) {
$m = new stdClass();
$m->id = ac;
$m->alias = 'Scegli la Provincia';
$data = array_merge(array($m), $data);
//this is the field //$return = JHTML::_('select.genericlist',  $data , 'catid',
'class="inputbox required select" size="1"', 'id', 'alias', 0);
} else {
$return = "Sorry, we couldn't find that state";
}
} else {
$return = "Sorry, we couldn't find a state id";;
}
echo $return;
?>
<?php
  $form->data['catid'] = "{$form->data['catid']}";  ?>
<?php
$mainframe->close();
?>

I think the problem is the field is not recognized becouse not is in onsubmit event.

Help me to solve this problem.

Hello,

Ok, after the field is called using AJAX, please try to inspect it using firebug for firefox, and make sure that its name is "catid".

You may also drag a "debugger" action to the top of the "on submit" event and check the list of fields in the data array, is the "catid" there ?

Regards,
Max

Good morning Max,

I solved the problem creating two form.

The first form send the catid data to the second and then i can submit article whit catid.

I think the problem before are that the submit article action not take the catid from my field.

I have hacked the file but still the same.

I have used the dbsave for submit the article.

Thanks for your patience.

Regards.