I have a button in html page.

<input type="image" src="images/login_button.png" id="imageButton" onclick="LoginButtonClick();" />

I am calling this method on button click:

LoginButtonClick = function() {
    alert ("Button click event raised");  // this alert msg raising every time when onclick event occurs.
    $.ajax({  
        alert ("Inside Ajax.");  // This alert not executing first 1 or 2 times.
        type: 'GET',
        url: 'http://URL/Service.svc/LoginValidation',
        dataType: 'json',
        error: pmamml.ajaxError,
        success: function(response, status, xhr) {
            if (response != "") {
                alert ("Response receive ");
                }
            else {
                alert("Invalid Data.");
            }
        }
    });
}

As I mentioned above $.ajax not working first 2 , 3 button click attempts.

In mozilla it throws an error "[Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE)" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: JQuery.js :: :: line 20" data: no]"

Is there any way to fix this issues..

I have a button in html page.

<input type="image" src="images/login_button.png" id="imageButton" onclick="LoginButtonClick();" />

I am calling this method on button click:

LoginButtonClick = function() {
    alert ("Button click event raised");  // this alert msg raising every time when onclick event occurs.
    $.ajax({  
        alert ("Inside Ajax.");  // This alert not executing first 1 or 2 times.
        type: 'GET',
        url: 'http://URL/Service.svc/LoginValidation',
        dataType: 'json',
        error: pmamml.ajaxError,
        success: function(response, status, xhr) {
            if (response != "") {
                alert ("Response receive ");
                }
            else {
                alert("Invalid Data.");
            }
        }
    });
}

As I mentioned above $.ajax not working first 2 , 3 button click attempts.

In mozilla it throws an error "[Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE)" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: JQuery.js :: :: line 20" data: no]"

Is there any way to fix this issues..

• javascript
• jquery
• ajax

• what about your return alerts? do they work always? – Carlo Moretti Commented Jul 10, 2012 at 15:46
• Is your server method returning json or text? If text, then set dataType='text'. – ron tornambe Commented Jul 10, 2012 at 15:49
• Thanks Onheiron.. No.. return alrets not firing. – watraplion Commented Jul 10, 2012 at 15:54

4 Answers 4

I'm not sure why it is executing later. But here's the deal--you're placing the alert in the object literal that defines the parameters for the .ajax method. It doesn't belong there. Try putting the alert in your success and/or error handlers.

UPDATE

How long are you waiting? When you initiate an ajax request, it isn't going to hang the UI. It could be that you're seeing the result of the first click on your 3rd or 4th attempt and think that you're triggering it on that 3rd or 4th attempt.

The $.ajax() function receives as a parameter a set of key/value pairs that configure the Ajax request. I don't think that the syntax will be correct by placing the alert() in there.

Note - entering an absolute path isnt going to work if the domain is not the current one - it is against the Same Origin Policy that browsers adhere too - this might explain why nothing happens when its executed - i suggest you look in your browser debugger to verify.

You should be binding the click event like this :

$(document).ready(function() {
  $('#imageButton').click(function() {
    // code here
  });
});

so your plete code will look like this :

HTML

<input type="image" src="images/login_button.png" id="imageButton" />

JavaScript

$(document).ready(function () {
  $('#imageButton').click(function () {
    alert("Button click event raised"); // this alert msg raising every time when onclick event occurs.
    $.ajax({
      type: 'GET',
      url: 'http://URL/Service.svc/LoginValidation',
      dataType: 'json',
      error: pmamml.ajaxError,
      success: function (response, status, xhr) {
        if (response != "") {
          alert("Response receive ");
        } else {
          alert("Invalid Data.");
        }
      }
    });
  });
});

I have removed the alert ("Inside Ajax."); line as this will not be executed - you pass an object {} of parameters not code to execute. If you want to execute before the ajax request is sent do this :

$.ajax({
   beforeSend: function() {
     alert('inside ajax');
   }
   // other options here
});

Docs for the $.ajax() function are here

I agree that you have the second alert in the wrong place, and dont know what pmamml.ajaxError function is but may be your call returns with error and therefore your success alerts are not firing. You can check with error and plete functions as follows:

LoginButtonClick = function() {
alert ("Button click event raised");  // this alert msg raising every time when onclick event occurs.
$.ajax({  
    type: 'GET',
    url: 'http://URL/Service.svc/LoginValidation',
    dataType: 'json',
    error: function(jqXHR, textStatus, errorThrown){
          alert ("ajax call returns error: " + errorThrown);
    },
    success: function(response, status, xhr) {
        if (response != "") {
            alert ("Response receive ");
            }
        else {
            alert("Invalid Data.");
        }
    },
   plete:function(jqXHR, textStatus){
         alert('pleted with either success or fail');
    }
});

}

You can test with Google Chrome's Developer tools -> Network tab, if a request is made and returned (https://developers.google./chrome-developer-tools/docs/network)