cannot show/hide jtable jquery fields depending upon user input in edit window

Question

I need to show/hide a particular field in jtable jquery depending upon selection in edit window (updateAction:). I have tried doing so by css show/hide, but its showing / hiding only input box , and it leaves the title of input, which looks weird.

What i really want is to hide whole "jtable-input-field-container", but just for a particular field/input.

here is the snippet:

fields: {
contentType: {
                    title: 'Content Type',
                    list: false,
                    options: { '1': 'message', '2': 'Image'},
                    onchange : 'select_function(this)',
                    edit:true
                },
title: {
                    title: 'Title',
                    width: '8%',
                    edit:true
                },

             message: {
                    title: 'Message',
                    width: '8%',
                    list: true,
                    edit: true
                },

             imageurl: {
                    title: 'image URL',
                    width: '8%',
                    edit: true
                },
 ......

}

Here i want , if contentType is set to image, then imageurl field should be shown otherwise hidden, in edit window , which we define under updateAction.

Please help.

Answer 1

I found a solution, which is working fine :). What I am doing is based on selection, i iterate over all .jtable-input-field-container' , and check if innerText is same as in given in title of field. Based on that , i hide/show that div.

Iteration can be avoided if you are sure that indexenter code here of field will not change.

Code Snippet:

function select_function(target){
    var myselect = target.value;
    if(myselect=='1')
    {       
        var data = $('.jtable-input-field-container');
        for (j = 0; j< data.length ;j++)
        {   
            console.log(j);
            console.log("+"+data[j].innerText+"+");
            if (data[j].innerText.indexOf("image URL") != -1)
            {
                $(data[j]).hide();
                console.log(data[j]);
            }
        }   
        console.log(data);
    }
    else
    {
        var data = $('.jtable-input-field-container');
        for (j = 0; j< data.length ;j++)
        {   
            console.log(j);
            console.log("+"+data[j].innerText+"+");
            if (data[j].innerText.indexOf("image URL") != -1)
            {
                $(data[j]).show();
                console.log(data[j]);
            }
        }
    }