CODEWITHSUNDEEP
javascriptcss
Terrence Poe
Terrence Poe

Reputation: 644

onclick function on radio cannot trigger second one at first click

I have two radio type inputs. I want background change its color when radio switch to different input.

As the pic downbelow,
enter image description here

I met a problem that while click first one it can change color immediately, but click second can not change at first click.

I need to click two times in second one to change its color.

<div class="o_field_radio o_vertical o_field_widget o_required_modifier in_out bg" name="in_out" style="width:70px;">
    <div class="o_radio_item">
        <input class="o_radio_input" type="radio" data-index="0" data-value="I" id="radio1032_I">
        <label class="o_form_label" for="radio1032_I">進貨</label>
    </div>

    <div class="o_radio_item">
        <input class="o_radio_input" type="radio" checked="true" data-index="1" data-value="O" id="radio1032_O">
        <label class="o_form_label" for="radio1032_O">出貨</label>
    </div>
</div>

var bg = $('.bg');
// check-box value decide background-color.
$(document).on('click', "div[name='in_out']", function(event){
    var v = $("div[name='in_out'] div input:checked").attr('data-value');
    if (v =='O') {
        bg.css("background-color","#adff2f");
    }
    else if(v =='I') {
        bg.css("background-color","#ffc0cb");
    }
});

Do anyone knows how to solve this error?

Upvotes: 1

Views: 340

Answers (3)

Mamun
Mamun

Reputation: 68933

You do not have any element with class bg in the markup. You also should group them by setting the name attribute.

The html document is generate by framework ODOO. So I can not change its name attribute

If you are not able to change the HTML manually then you can set the name attribute on document ready

You can try the following way:

// Set the name attribute on document ready
$('document').ready(function(){
  $('.bg .o_radio_input').attr('name', 'myRadio');
});

var bg = $('.bg');
// check-box value decide background-color.
$(document).on('click', "div[name='in_out']", function(event){
    var v = $("div[name='in_out'] div input:checked").attr('data-value');
    if (v =='O') {
        bg.css("background-color","#adff2f");
    }
    else if(v =='I') {
        bg.css("background-color","#ffc0cb");
    }
});
$('div[name=in_out]').trigger('click');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="o_field_radio o_vertical o_field_widget o_required_modifier in_out bg" name="in_out" style="width:70px;">
    <div class="o_radio_item">
        <input class="o_radio_input" type="radio" data-index="0" data-value="I" id="radio1032_I">
        <label class="o_form_label" for="radio1032_I">進貨</label>
    </div>

    <div class="o_radio_item">
        <input class="o_radio_input" type="radio" checked="true" data-index="1" data-value="O" id="radio1032_O">
        <label class="o_form_label" for="radio1032_O">出貨</label>
    </div>
</div>

Upvotes: 1

Terrence Poe
Terrence Poe

Reputation: 644

I miss some info:

1.The html document is generate by framework ODOO. So I can not change its name atrribute. the view template is deploy by xml document. the origin code is looks like this:

<field class="in_out" name="in_out" widget="radio"/>

  1. the div is wrap by a div class='bg', I just miss it.

  2. In order to show more clearly, I add alert function. It will show you message while you click.

var bg = $('.bg')
// check-box value decide background-color.
$(document).on('click', "div[name='in_out']", function(event){
    alert('clicked');
    let v = $("div[name='in_out'] div input:checked").attr('data-value');
    if (v =='O') {
        bg.css("background-color","#adff2f");
    }
    else if(v =='I') {
        bg.css("background-color","#ffc0cb");
    }
});
$('div[name=in_out]').trigger('click');

and the result looks like this:
enter image description here

Mamun's script is working well here. But when it runs on ODOO, it will work as the pic.

Upvotes: 0

brk
brk

Reputation: 50291

First thing , you need to have same name for radio buttons. Secondly you may not need this line $(document).on('click', "div[name='in_out']", function(event){ since the elements are not dynamically loaded.So no need to delegate it from the document. Also var v = $("div[name='in_out'] div input:checked").attr('data-value'); line will be redundant. Besides you can have the color as the data-attribute of the radio button & use change instead of click. So on change get the data attribute and set it using .css 

var bg = $('.bg');
// check-box value decide background-color.
$('.o_radio_input').on('change', function(event) {
  bg.css("background-color", $(this).data('color'));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="o_field_radio o_vertical o_field_widget o_required_modifier in_out bg" style="width:70px;">
  <div class="o_radio_item">
    <input name="in_out" class="o_radio_input" type="radio" data-index="0" data-value="I" id="radio1032_I" data-color='#adff2f'>
    <label class="o_form_label" for="radio1032_I">進貨</label>
  </div>

  <div class="o_radio_item">
    <input name="in_out" class="o_radio_input" type="radio" checked="true" data-index="1" data-value="O" id="radio1032_O" data-color="#ffc0cb">
    <label class="o_form_label" for="radio1032_O">出貨</label>
  </div>
</div>

Upvotes: 1

Related Questions