Server sent event issue

I have a function triggering a SSE to get data from the server.

When I click on a button on my page to fill the content with other data I get the following error regarding the SSE. It seems there is no HTML placeholder to put the data being received…since the SSE is still running. How do I stop the SSE process?

Uncaught TypeError: Cannot set property ‘innerHTML’ of null

var i_source = new EventSource("instructors_events_sse.php");
i_source.onmessage = function(e) {
    document.getElementById("instructor_e_box").innerHTML = e.data;
}

How does the SSE’s state have anything to do with the fact that there’s no element in your HTML with id “instructor_e_box”?

I have an element on the page with ID instructor_e_box. When this element become visible the SSE works. When I click on a navigation button to clear part of the screen…including instructor_e_box…I get the SSE error. What I mean by clear screen is I make it invisible display none.

Well, without being able to see the page, i’d just be guessing, but the error message you are receiving means javascript does not think there is an element with that Id on your page at time of execution.

That is probably correct…so my question is how do I stop that function when i navigate away from it?

Well the browser would close its socket when you change pages, so it would stop the server’s processing at that stage, i would say.

Thats makes sense. However I am staying on the same page…hence the problem. I think I will use ajax with an interval instead.