RadioList – onclick změna obrázku

sandarina

Zdravím všechny zkušenější nette programátory,

Potřebuji rychle dokončit a nedaří se mi to … programuji jednoduchý e-shop a v detailu produktu potřebuji podle zvoleného parametru měnit obrázek produktu, který se skládá z několika PNG ve vrstvách nad s sebou. Parametry mám ve formuláři v RadioListu, který se mi generuje dynamicky v Presenteru:

        $form = new UI\Form;
        $form->addGroup("Vlastnosti");
        foreach ($this->productRepository->findParams($this->product) as $product_param)
        {
            $param_values = array(); //$param_values = array(0 => "-- vyberte --");
            foreach ($this->getParamValues($product_param) as $value)
            {
                if (isset($value->image)) {
                    $val = Html::el('img')->src($value->image)->alt($value->name)->title($value->name)->width('15px');
                }
                else {
                    $val = $value->name;
                }
                $param_values[$value->id] = $val;
            }
            $form->addRadioList('param_'.$product_param->id, $product_param->name.':', $param_values)
                ->addRule(UI\Form::FILLED, 'Vyberte '.$product_param->name.'!')
                ->setAttribute('onchange', 'setParamImage(this.value)');
        }
... atd.

Přidala jsem si k RadioListu JS událost „onchange=‚setParamImage(this.value)‘“ a na té jsem se zasekla… Sice si AJAXEM sáhne do funkce „handleLoadParamImage“, která mi v kódu vrací string, ale když si dám vypsat alertem obsah proměnné image_url, tak mi to vrací tohle „[object Object]“.

Nevím, co dělám špatně. V AJAXu se moc nevyznám a potřebuji to honem dokončit. Omlouvám se jestli se to tu řešilo, ale nic jsem nemohla najít…

Předem díky za help!

JavaScript zde:

	function setParamImage(param_value_id)
{
    var image_url = $.get("?do=loadParamImage", {"param_value_id": param_value_id});
    if ($('#product-detail-params-image').length == 0)
    {
        if ($('#param_'+param_id).length == 0)
        {
            $('#product-detail-params-image').append('<img src="'+image_url+'" />');
        }
        else
        {
            $('#param_'+param_id).src = image_url;
        }
    }
}

Subrequest zde:

	public function handleLoadParamImage($param_value_id) {
    $param_value = $this->productRepository->findParamValue($param_value_id)->fetch();
    return $param_value->product_image;
}

Editoval sandarina (25. 2. 2013 10:06)

enumag

Používáš tam funkci jquery.get, ale používáš ji špatně. Ta funkce pouze spustí ajaxový požadavek a vrátí ti nějaký jqXHR objekt, nikoli odpověď serveru. Zpracování odpovědi se dělá pomocí callbacku, více najdeš v dokumentaci jQuery.

Editoval enumag (25. 2. 2013 11:21)

sandarina

Dokumentace mi pomohla, už jsem to dala dohromady, JS, ale i handler jsem po prostudování dokumentace k používání AJAXu v NETTE trochu přepracovala a už to běhá.

<script>
        function setParamImage(param_value_id)
        {
            $.get("?do=loadParamImage", {"param_value_id": param_value_id}, function(payload) {
                alert(payload.image_url);
            });
        }
</script>


    public function handleLoadParamImage($param_value_id) {
        $param_value = $this->productRepository->findParamValue($param_value_id)->fetch();
        $this->payload->image_url = $param_value->product_image;
        $this->sendPayload();
    }