JavaScript not 'unclicking' button and its affecting Flask-CodePudding

I am trying to create buttons on my webpage that apply a filter to a camera feed using a Python backend.

My two javascript buttons, Filter on / Filter off have an execution problem. When a button is pressed for the first time the system works. But when the next button is pressed it does not 'unpress' the first button and therefore the requests to flask are mixed together.

I've included a print statement in the code to demonstrate the problem. When the filter button is pressed the first time, the loop is consistent and displays the pressed parameter 1, 1, 1, 1, 1, 1, 1. Once I press the second button the results become inconsistent 1, 0, 0, 0, 1, 0, 1, 1, 1

The same behaviour is true regardless of which button I press first.

I need the results to be 1, 1, 1, 1, 1.... etc or 0, 0, 0, 0, 0 depending on which button is pressed.

Assistance will be greatly appreciated, Thanks

#### Javascript ###
            $(function(){
                $(document).ready(function(){
                  $("#filterOn").click(function(){
                    filterOn();     
                  });                    
                  $("#filterOff").click(function(){
                    filterOff();        
                  });
                    
                });

               function filterOn(){
                   $.get('/video_feed/1');
                }  
               function filterOff(){
                   $.get('/video_feed/0');
                }

######### Backend Python using Flask ##########

def Capture_data(filter):
    while True:
        success, image = video.read()
        print(filter)  ###### Troubleshooting line here #########
        if filter == 1:
            image = filtered_spectrum(image)
         
        encode_param = [int(cv2.IMWRITE_JPEG_QUALITY), 90]
        ret, jpeg2 = cv2.imencode('.jpg', image, encode_param)
       
        frame = jpeg2.tobytes()
        yield (b'--frame\r\n'
               b'Content-Type: image/jpeg\r\n\r\n'   frame   b'\r\n\r\n')

@app.route('video_feed')       
@app.route('video_feed/<int:toggle>')
def video_feed(toggle):
    if toggle == 0:
        return Response(Capture_data(0),
                mimetype='multipart/x-mixed-replace; boundary=frame')  

    if toggle == 1:   
        return Response(Capture_data(1),
                mimetype='multipart/x-mixed-replace; boundary=frame')

CodePudding user response：

If they are radios, they need the same name

Also you wrap in too many load directives

function filterOn(){
  $.get('/video_feed/1'); // normally one needs to do something with that
}  
function filterOff(){
  $.get('/video_feed/0');
}  
$(function(){
  $("#filterOn").on("click",filterOn)
  $("#filterOff").on("click",filterOff)
})

<label><input type="radio" name="filter" id="filterOn">On</label>
<label><input type="radio" name="filter" id="filterOff">Off</label>

CodePudding user response：

it looks like you do not change the ID of the button.

Personally I would do it like that:

$('MYELEMENTSELECTOR').on('click', function(event) {
  
  event.preventDefault();
  
  let $this = $(this);
  
  if($this.hasAttr('active')) {
    $.get('/video_feed/0');
  } else {
    $.get('/video_feed/1');
  }
})