Button Not Working Without Refreshing Page

Question

I am building a website with some simple functions and I'm running into some issues. I can't provided any sample code because I have no idea where the problem lies and technically the site is not crashing.

The frontend of the site is html and javascript, the backend I'm using ASP.Net and C#.

There's a button on the page, which will trigger a function in javascript. The function will then make a call to the backend aspx file (say, myFunction.aspx) and generate a output file for the user to download.

Everything is working just fine. I was getting the expected result and was able to download the output file with no problem.

I didn't notice the issue until I try to re-run this function.

I hit the button again but it wasn't doing anything (I was also using Httpfox so I know it's not calling anything)

I realize that I wasn't able to run the function again without refreshing the page. After refreshing the page it works just fine.

Can anyone explain why its this way? How can I go about debugging this issue? I don't even know if the problem is with the fontend or the backend.

Thanks for the help.

EDIT

This is how I created the button.

<button dojoType="dijit.form.Button" type="button" onclick ="myJSFunction('uploadForm')">Generate</button>

and this is how the function is calling the asp backend

var myJSFunction= function (formId) {
    dojo.io.iframe.send
    ({
        url: 'myURL/myFunction.aspx?parameter=p',
        form: dojo.byId(formId),
        method: "POST",
        handleAs: "text",
        load: function (response, ioArgs) {
            dojo.byId("timeStamp").value = response;
        }
        error: function (response, ioArgs) {
            alert("Failure:" + response);
        }
    });
}

EDIT 2

I just notice something interesting.

I have been running in Firefox using HttpFox and was not getting any error message. Then I tried to run it in Chrome using F12 and I'm getting red alerts.

In Chrome, under the Network tab, the status says "canceled", but I was still getting the output.

How could this happen? How can I find where the issue is?

can you paste the code where you add the button click handler. To debug the issue just open the devtools on any browser (usually F12). if you have a one time only event, it's usually because you declared a handler with `once` or it was detached after used. — bitoiu, Jan 31 '14 at 16:55
@bitoiu I uses firebug and there was no errors, as a matter of fact, nothing was running at all. — sora0419, Jan 31 '14 at 17:06
is myJSFunction('uploadForm') calling dojo.io.iframe.send? really not familiar with dojo, where is myJSFunction? — bitoiu, Jan 31 '14 at 17:12
@bitoiu yes, please see my updated code. myJSFuntion is in the — sora0419, Jan 31 '14 at 17:16
so, nothing wrong there, but I don't know that a dojo typed button does, so can you have another simple HTML button, attach a simple test function and console.log("Test"), check if it triggers twice. — bitoiu, Jan 31 '14 at 17:31
You literally did and you declared f as function f() { alert("test") } and nothing happened? — bitoiu, Jan 31 '14 at 17:44
@bitoiu yes. I was able to trigger it the first time, but not the second time without refreshing the page. — sora0419, Jan 31 '14 at 17:51
@bitoiu thanks! i also just found something quite interesting, please see my update. — sora0419, Jan 31 '14 at 17:57

score 0 · Answer 1 · edited May 23 '17 at 12:28

0

Check your javascript console to see that you don't have any errors on the page. Otherwise post your asp.net markup for the button and the javascript function.

Edit: Try returning false from your javascript function. This will prevent the default browser behavior from executing (What's the effect of adding 'return false' to a click event listener?)

edited May 23 '17 at 12:28

Community

1
1

answered Jan 31 '14 at 16:55

Sam Trost

2,173
20
26

I added the return false as you suggested, but it didn't make any changes. I still couldn't run the function again without refreshing the page. – sora0419 Jan 31 '14 at 17:36

MaxPRafferty · Answer 2 · 2014-01-31T20:14:18.363

A workaround might be to unnbind and then rebind the click event on your element so every click is effectively the "first", to avoid anything that dojo or something else may be doing out of your control. I don't know dojo, but based on http://dojotoolkit.org/reference-guide/1.9/dojo/on.html#dojo-on the following should be about right:

var updateHandle;
var myJSFunction= function (formId) {
    updateHandle.remove();
    dojo.io.iframe.send
    ({
        url: 'myURL/myFunction.aspx?parameter=p',
        form: dojo.byId(formId),
        method: "POST",
        handleAs: "text",
        load: function (response, ioArgs) {
            dojo.byId("timeStamp").value = response;
            updateHandle = on(your.buttonElement, "click", function(){
            myJSFunction(formId);
            });
        }
        error: function (response, ioArgs) {
            alert("Failure:" + response);
        }
    });
}
updateHandle = on(your.buttonElement, "click", function(){
            myJSFunction("myFormId");
});

score 0 · Accepted Answer · answered Jan 31 '14 at 21:12

0

Thank you all for the help and suggestion.

I have found the solution to the issue. All I need is a single line to the frontend code.

dojo.io.iframe._currentDfd = null; //add this line
dojo.io.iframe.send
({...
});

Thanks for the help.

answered Jan 31 '14 at 21:12

sora0419

2,308
9
39
58

Button Not Working Without Refreshing Page

3 Answers3