Zend Framework 3 dependent dropdown using AJAX, JQuery, JSON

Previous Topic Next Topic
 
classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

Zend Framework 3 dependent dropdown using AJAX, JQuery, JSON

joeltiny
This post has NOT been accepted by the mailing list yet.
I have two dynamically created form element select.
I want to send first dropdown selected id from View to Server, and server should return an array ['id' => 'models'] that should fill second dropdown

class quickSearchCarForm extends Form{
$makerSelect = new Element\Select('maker');
$makerSelect->setLabel('Maker and Model');
$list = $this->vehiclesManager->getArrayMakers(1);
$makerSelect->setValueOptions($list);
$makerSelect->setAttributes(['onchange' =>
'FillSelectModels(this.value)','id' => 'makerfield']);
$makerSelect->setEmptyOption('Select Maker..');
$this->add($makerSelect);

----on My Action

public function indexAction()
{    
$formCar =new quickSearchCarForm($this->vehiclesManager);
$request = $this->getRequest();  
$response = $this->getResponse();
    if ($request->isXmlHttpRequest()) {
        $idMarca = $this->params()->fromRoute('id');
        $arrayModels = $this->vehiclesManager->getArrayModelos($idMarca,
        Veiculo::Carro);
        return $response->setContent(json_encode($arrayModels));
        }
}
----On My View I've Tried with JQuery but with no success

function getModelos(id) {
            $.ajax({
                type:'POST',
                dataType: 'json',
                url:'/index/'+id,
                data: data,
                success: function(data){
                    console.log(data);
                    $('#modelfield').html(data);
                }
            });
            }
I've tried with AJAX, but the only thing that happens is: the values of other form elements goes to my #modelfield (ex: makers, year, fuel..)

function getModels(id) {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
              if (this.readyState === 4 && this.status === 200) {
              document.getElementById("modelfield").innerHTML =
this.responseText;
              }
            };
            xhttp.open("POST", "index/" + id, true);
            xhttp.send();
            }
Could you please give some help?
Loading...