Calling a JS function on a button click refreshes the page

Question

I have a ASP page which has a JS function that is being called on a HTML input button click, but every time on the button click the page is reloaded and goes back to the initial state.

I have disabled caching both on server and client side, using these tags

<%
Response.Cache.SetExpires(DateTime.UtcNow.AddMinutes(-1));
Response.Cache.SetCacheability(HttpCacheability.NoCache);
Response.Cache.SetNoStore();
%>

and

<meta http-equiv="Expires" CONTENT="0"/>
<meta http-equiv="Cache-Control" CONTENT="no-cache"/>
<meta http-equiv="Pragma" CONTENT="no-cache"/>   

I tried to figure out what is the problem which is causing the page to refresh on a button click, rather than calling a JS function, but no dice.

---

As asked for here is the button code

   <button class="textinput" id ="reloadData" onclick="reloadData()" title="Reload Data">Refresh</button>

and the function called

            function reloadData() {
            var DPS = document.getElementById("datepickerStart").value;
            var DPE = document.getElementById("datepickerEnd").value;

            var startDP = new Date(DPS);
            var endDP = new Date(DPE);

            var startDate = (startDP.format("isoDateTime")).replace(/:/g, '\\:');
            var endDate = (endDP.format("isoDateTime")).replace(/:/g, '\\:');

            layer.redraw();
            }

I don't think this has to do something with the function called because it is just readjusting the values in the filter.

Answer 1

The button is likely causing a postback. Does it exist in a form?

Have the javascript function return false to prevent the postback.

Answer 2

Reuse of reloadData in <... id ="reloadData" onclick="reloadData()" ...> may be problematic in some browsers, though you wouldn't expect it.

In any case, try attaching the onclick handler in javascript rather than in the HTML, as follows:

HTML:

<button class="textinput" id="reloadData" title="Reload Data">Refresh</button>

Javascript:

window.onload = function(){
    var reloadDataButton = document.getElementById('reloadData');
    var DPS = document.getElementById("datepickerStart");
    var DPE = document.getElementById("datepickerEnd");
    if(reloadDataButton && DPS && DPE){
        reloadDataButton.onclick = function(){
            var startDP = new Date(DPS.value);
            var endDP = new Date(DPE.value);

            var startDate = (startDP.format("isoDateTime")).replace(/:/g, '\\:');
            var endDate = (endDP.format("isoDateTime")).replace(/:/g, '\\:');

            layer.redraw();
            }
        };
    }
};

(Merge with existing window.onload handler if necessary)

If that doesn't fix it, and the button is genuinely not in a form, then the problem must lie in layer.redraw(); (or a window.onerror handler). Try commenting out layer.redraw(); and see what happens.