1

I try to use javascript for a dropdown list I've implemented into a grid as shown in the image.

enter image description here

The renderer I use for this dropdown list is like

<?php

class Ns_Thorleif_Block_Adminhtml_Commerciaux_Edit_Form_Renderer_Category extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract
{   
    public function render(Varien_Object $row)
    {
        $category = Mage::getModel('thorleif/category')->getCollection();
        $category_rows = $category->getData();

        $html = '<select id="select_category" name="select_category">';
        $sep = '';
        foreach ($category_rows as $rows) {
            // put the correct key here
            if (!$rows['level']) {
                $html .= $sep . "<optgroup label='{$rows['name']}'>";
                $sep = '</optgroup>';
            } else {
                $nbsp = str_repeat('&nbsp;', ($rows['level'] - 1)* 5);
                $html .= "<option value='{$rows['id_linio_category']}' title='{$rows['name']}'>
                $nbsp {$rows['name']}</option>";
            }
        }
        $html .= '</select>';

        return $html;
    }
}
?>
<script src="https://code.jquery.com/jquery-1.12.3.js"></script>
<script>
    var data = $( "#select_category option:selected" ).text();
    console.log(data);
</script>

and the Grid code is

<?php
...
$this->addColumn('linio',
    array(
        'header' => 'Linio Category',
        'align' => 'left',
        'index' => 'linio',
        'filter'    => false,
        'sortable'  => false,
        'renderer' => 'Ns_Thorleif_Block_Adminhtml_Commerciaux_Edit_Form_Renderer_Category'
    )
);

$this->addColumn('action',
    array(
        'header'    =>  Mage::helper('customer')->__('Action'),
        'width'     => '100',
        'type'      => 'action',
        'getter'    => 'getId',
        'actions'   => array(
            array(
                'caption'   => Mage::helper('customer')->__('Sync'),
                'url'       => array('base'=> '*/*/sync'),
                'field'     => 'id',
                'target'=>'_blank'
            )
        ),
        'filter'    => false,
        'sortable'  => false,
        'index'     => 'stores',
        'is_system' => true,
    )
);

return parent::_prepareColumns();

So I try to get the value/text of the dropdown selected value, but I cannot do this maybe the way to do it is different that the other CMS. My Layout

<?xml version="1.0"?>
<layout version="0.1.0">
    <routeuradmin_adminhtml_index_index>
        <reference name="content">
            <block type="thorleif/adminhtml_commerciaux" name="blocktest" />
        </reference>
        <reference name="head">
            <action method="addLinkRel"><rel>text/javascript</rel><href>https://code.jquery.com/jquery-1.12.3.js</href></action>
        </reference>
    </routeuradmin_adminhtml_index_index>
</layout>

Any Idea or suggestion to implement or get those values please?

  • Have you some error in console and did you find well the https://code.jquery.com/jquery-1.12.3.js" in your code source ? – PЯINCƏ Jul 5 '17 at 18:24
  • no, when the srcipt is ubicated in the renderer file nothing happens. but when I put it in the grid file I find this error TypeError: element.attachEvent is not a function. prototype.js:5653:9 TypeError: elementClassName is undefined and custom module stop charging – javaTodev Jul 5 '17 at 18:35
  • Hi, have you found a solution for you problem? – sv3n Jul 12 '17 at 13:48
  • Sorry I was busy. Yes I can show the text chosen dropdownlist value in console with plain javascript without using the last part where you mentioned $row->getId. I've tried to get the value number and not the text with .val(). Sorry I'm not strong on javascript, if I want to post the gotten id value how could I post it with the Sync action? – javaTodev Jul 14 '17 at 20:00
  • "Sync Action"? ... Answer updated. – sv3n Jul 14 '17 at 22:34
0

Try to add your js like this:

<layout>
    <your_layout_handle> <!-- adminhtml_dashboard_index for exemple-->
        <reference name="head">
            <action method="addLinkRel"><rel>text/javascript</rel><href>https://code.jquery.com/jquery-1.12.3.js</href></action>
        </reference>
    </adminhtml_dashboard_index>
</layout>

EDIT:

I think that you dont get the selected option ! try this one

<script type="text/javascript">
    $(document).ready(function() {
        $('select#select_category').ready(function() {
            var selectedText = $(this).find('option:selected').text();
            alert(selectedText);
        });
    });
</script>
  • I've added to my existing layout as in my edit post. but nothing still happend. when I remove the script tag for the javascript url in the renderer file, the last script code become displayed as an "echo" before the grid – javaTodev Jul 5 '17 at 19:15
  • Look my update please – PЯINCƏ Jul 5 '17 at 21:13
  • I've tried again but still same problem (as in the picture updated) when I don't put this part <script src="https://code.jquery.com/jquery-1.12.3.js"></script> . and with it nothing happens. – javaTodev Jul 5 '17 at 21:30
  • This mean that the js lib is not present in your page, you can check it in the source code, well let src="..jquery-1.12.3.js"in your page ans try my code, check also if you get well the value option ! – PЯINCƏ Jul 5 '17 at 21:53
  • ok, let me do some test and will inform you. – javaTodev Jul 5 '17 at 22:06
0

Either add your javascript code to $html variable or you put in a seperate file and load it via

<layout>
    <your_grid_layout_handle>
        <reference name="head">
            <action method="addJs">
                <script>your-script.js</script>
            </action>
        </reference>
    </your_grid_layout_handle>
</layout>

If you don't need jQuery for other things I would use plain javascript

<script type="text/javascript">
    document.observe('dom:loaded', function() {
        elem = document.getElementById('select_category');
        if (elem.selectedIndex != -1) {
            console.log(elem.options[elem.selectedIndex].text);
        }
    });
</script>

For logging onchange value you can replace

$html = '<select id="select_category" name="select_category">';

with

$html = '<select id="select_category" name="select_category" onchange="console.log(this.options[this.selectedIndex].text)>';

If you use $html = '<select id="select_category" name="select_category">'; in render() method, you'll get invalid HTML, because an element ID should be unique at a page, but you'll get id="select_category" for every row.

Think this should be replaced with

$elem = 'select_category' . $row->getId();
$html = '<select id="' . $elem . '" name="' . $elem . '">';

Edit:

if I want to post the gotten id value how could I post it with the Sync action? – javaTodev

Is this what you'trying to achieve?

$this->addColumn('linio',
    array(
        'header'    => 'Linio Category',
        'align'     => 'left',
        'index'     => 'linio',
        'filter'    => false,
        'sortable'  => false,
        'type'      => 'options',
        'options'   => Mage::getModel('thorleif/category')->getOptionsArray()
    )
);

Add this to Ns_Thorleif_Model_Category

public function getOptionsArray()
{
    $options = array();
    foreach ($this->getCollection() as $option) {
        $options[$option->getIdLinioCategory()] = $option->getName();
    }
    return $options;
}
  • Is not clear that you want to implement above. But I'm trying like this way <script type="text/javascript"> document.observe('dom:loaded', function() { elem = document.getElementById('select_category'); if (elem.selectedIndex != -1) { var val = elem.options[elem.selectedIndex].value; window.location.href = '*/*/sync?val=' + val; //window.document.write(val); console.log(elem.options[elem.selectedIndex].value); } }); </script> and to get the value in the syncAction using $_GET['val'] I can get it but front still executing. – javaTodev Jul 15 '17 at 22:07
  • Not sure if i got it right ... you want to set a value in your dropdown and with hitting "sync" it should be passed to your controller action? If yes, the updated code should work. Dropdown value should be passed there ... – sv3n Jul 15 '17 at 23:44
  • I have the grid with dropdown list. First I have to chose a value from the dropdown list then I have to click on sync (the action is actualy generate an xml with some details I get from database) and the xml should contain also the dropdown chosed value. So it will work with added code you sent me? I've tried also to save the value in a table que get it in sync action directly from database. I didn't understand this Ns_Thorleif_Model_Category is it my file Category or is it a new file that I should create?Thanks again – javaTodev Jul 16 '17 at 2:30
  • Add this method to Ns_Thorleif_Model_Category ... its there to generate the dropdown. Think this code should work for you. – sv3n Jul 16 '17 at 9:49
  • I've tried yesterday but the column goes empty. if you have a way to share my screen with you let me know please. in Model I use different way to get list names from database. the dropdown I have it already generated. My blocker is more get the value when a sync action is called. – javaTodev Jul 16 '17 at 16:25
0

I've put the dropdown list out of the grid as a fieldset into a form and I will save the value I need to use for my process and then get it from DB. It's work for me like this without to add any javascript. I know that is not the solution for the issue posted but this is another way to resolve my blocker. My solution

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.