Mostafa Mohamed Mostafa Mohamed - 4 months ago 9
Javascript Question

manage visibility and invisibility of widget

I need help in show/hide widget based in the space i click

i'm using datepicker bootstrap widget and some other widget

my code is :

<div class="o_datepicker">

<t t-set="placeholder" t-value="widget.getParent().node and widget.getParent().node.attrs.placeholder"/>
<input type="text"
t-att-name="widget.name"
t-att-placeholder="placeholder"
class="oe_datepicker_master oe_simple_date"/>
<input t-att-id="widget.name" type="text"
t-att-placeholder="placeholder"
class="oe_hijri oe_datepicker_master"
/>
</div>


when i click in anywhere in that
div
the bootstrap datepicker widget is visible.. i want to restrict that to the first input only, and when i click the second input the widget should be invisible because there is another widget that opens when i click the second input.

Note :The both inputs must be in the same
<div class="o_datepicker">


Thanks

Answer

You have to stop event propagation on the second input click:

$(".o_datepicker input:last").click(function(event) {
    //Prevents the event from bubbling up the DOM tree, 
    //preventing any parent handlers from being notified of the event.
    event.stopPropagation();
    //Your code here.
});

I hope this will help you.