JavaScript executes only if I add a breakpoint in it in Firebug or Chrome developer tools

Question

I am using asp.net, JavaScript and HTML Handler.

In a asp button onclick event I am calling the JavaScript like this.

<asp:Button ID="btn_Tagging" CssClass="button" UseSubmitBehavior="false"
     Text="Done" OnClientClick="DoneClick()" />

In the same page within the script tag I have written the JavaScript like this:

<script type="text/javascript">
function DoneClick()
{
   var checkLocation = "";
   var txtMM = document.getElementById("hdn_Tagging").value;///Id s of textbox assigned in code behind MB--
   txtMM = txtMM.slice(0, -1);
   var arrTxtMM = txtMM.split(",");
   for(var j=0;j<arrTxtMM.length;j++)
   {
      var Loc = document.getElementById(arrTxtMM[j]).value;
      if(Loc == "")
      {
         checkLocation = "";
         break;
      }
      else
      {
         checkLocation += Loc + ":";
      }
   }
   if(checkLocation != "")
   {
      var url ='Handler/newExifDetails.ashx?Id='+txtMM+'&Location='+checkLocation+'';
      var completetbl, html;
      $.getJSON(url,function(json)
      {
         $.each(json,function(i,weed)
         {
            var res = weed.res;
            alert(res);
            if(res == null)
            {
            }
            else
            {   
               window.top.location.href = "Dashboard.aspx";
            }
          });        
       });

    }
    else
    {
       alert("Please pick the locations for all objects");
    }
 }
</script>

Then when I click on button the alert within the JavaScript shows only if I put a breakpoint in Firebug or in Chrome Developers tool Script if I put breakpoint it works. Without putting that breakpoint neither the alert shows nor redirects.

Re-check if the JSON you get is correct and doesn't contain a syntax error, if it is the case then $.getJSON will usually fail silently. Also put breakpoint on redirection entry and check the local vars. May be something weird is happening. — alekperos, Sep 21 '12 at 10:39
Why you use `asp:Button` control here? Do you have any server logic for this button's click event? Your problem is that postback occurs before $.getJson function return result to client. — Yuriy Rozhovetskiy, Sep 21 '12 at 10:49
the json is working as if i put a brekpoint in handler Process request without any breakpoint in js... it goes to handler so the handler is called .... then will try giving alerts within function to check... — Shruthi, Sep 21 '12 at 11:10
when i add the alerts it shows alerts correctly before $.getJSON(url,function(json) but after this no alerts will show if no breakpoints in js... so what might have gone wrong here please help!! — Shruthi, Sep 21 '12 at 11:21

score 0 · Answer 1 · edited May 23 '17 at 11:52

0

It's a classical heisenbug. It would help if you could show us how the button looks like in the generated HTML code. Did you try using a simple alert as a click handler? Did you try adding the handler dynamically in JavaScript?

Try adding:

$('#btn_Tagging').click(DoneClick);

or:

$(function() { $('#btn_Tagging').click(DoneClick); });

at the end of your JavaScript code and remove the:

OnClientClick="DoneClick()"

from ASP.

I assume that the generated HTML button gets the id of "btn_Tagging" - am I correct? If it doesn't work then don't show us your ASP code but show us the generated HTML that gets to the browser instead, most importantly: what is its value attribute.

(Also, since you are already using jQuery for AJAX, I would suggest using jQuery also for the DOM manipulation. The way you do it it's easier to make mistakes and you're not using a library that is already loaded. See this reply for an example that even getElementById is easy to introduce bugs if you're not careful.)

edited May 23 '17 at 11:52

Community

1
1

answered Sep 21 '12 at 11:10

rsp

107,747
29
201
177

i have included the line as u told but still the alert is not showing without breakpoint... i also tried including breakpoints within the function DoneClick() i got all the alerts before this line ... $.getJSON(url,function(json) the alerts after this line is not showing... i do not the reson and also i tried removing the onclientclick and gave the line which u have mentioned but still the alerts after the line the json line is not executing.... what might be wrong?? – Shruthi Sep 21 '12 at 11:50
Try running your code through the [JavaScript beautifier](http://jsbeautifier.org/) because the indentation of your code makes it not so obvious what's going on in some places. Place an alert - or better yet a `console.dir(json);` at the beginning of your `$.getJSON` handler function (just before `$.each(...)`) to see whether your AJAX call succeeds and what it actually returns. – rsp Sep 21 '12 at 12:12
i tried the link u provided and got the js aligned and then i added the alert after that $.getJSON and before $.each() i did not get that alert ... nor did the console.dir(json) worked there.... but that alert and all works if i do by putting a breakpoint in that place in fire bug... so .. is there any problem in that calling of json?? – Shruthi Sep 21 '12 at 12:41
If you didn't get the alert that means that your AJAX call didn't succeed, but it can also mean that it didn't even get started. Try putting an alert **before** the `$.getJSON` to see if the execution of your code goes so far, and if it doesn't then place an alert before the `if(checkLocation != "")` to see if it gets there. You have to experiment a little bit to find the place where your code is not doing what you expect it to do. – rsp Sep 21 '12 at 13:00
I would also add `console.dir(txtMM);` and `console.dir(arrTxtMM);` just before the first `for` loop and see in your browser's console how do those objects look like to make sure that they are what you expect. (In Firefox you have to install [Firebug](http://getfirebug.com/) for `console.dir` to work.) – rsp Sep 21 '12 at 13:04
the alert works till the line $.getJSON means just before this line alert is working but after this line any alert i put is not working... but if i put breakpoint in firebug it works... so the code till the $.getJSON is working from this line some problem... – Shruthi Sep 21 '12 at 13:06
ok, so if the alert works before but not after `getJSON` then the AJAX call doesn't return. Open your browser's web console and see the network connections. – rsp Sep 21 '12 at 13:09
(Use Firebug in Firefox or Developer Tools in Chrome and see the AJAX connections while they are taking place - or should take place) – rsp Sep 21 '12 at 13:17
yes... in firebug and chrome if i put the breakpoint in the js its working... all alerts even after the $getJSON is working... but without that breakpoint its not working.... so why it is niot working without breakpoint i wanted to check... pls help! – Shruthi Sep 21 '12 at 13:28
Sorry, I don't think I can help you here any more than just with an advice to closely and carefully monitor all of the network connections in Firebug (with and without breakpoints), to monitor the values of all of the important variables (especially the `url`) with `console.dir` and maybe to change the `$.getJSON` shortcut to a full [`$.ajax`](http://api.jquery.com/jQuery.ajax/) call with a proper error handler that would tell you what's going on with the connection. Good luck. – rsp Sep 21 '12 at 13:39

score 0 · Answer 2 · answered Sep 21 '12 at 15:44

Just try to use plain input type="button" control instead of asp:Button. Or rewrite your button as below:

<asp:Button ID="btn_Tagging" CssClass="button" UseSubmitBehavior="false"
     Text="Done" OnClientClick="DoneClick(); return false;" />

The problem is in asynchronous mature of $.getJSON function so just after it called, execution context leaves the DoneClick function and called __doPostBack function added to btn_Tagging html control's onclick attribute by asp.net infrastructure.

JavaScript executes only if I add a breakpoint in it in Firebug or Chrome developer tools

2 Answers2