0

I am a total newbie to ASP.net, javascript, jquery, ajax etc. I used to be a WPF programmer but have been handed a web app to write (my first) and am facing a lot of problems. I have jquery/ajax call I have to make to connect to a WCF JSON REST service (tested with Fiddler). The service works fine but I am unable to connect to the service via the jquery. I seem unable to debug it either (I'm used to straightforward debugging in C#, how do you debug this?? I did try that in chrome tools->developer tools and it appeared like it wasn't entering the $.ajax section, but I am not sure if my results were accurate).

Also, what libraries/other setup do you need for jquery/ajax to work?

This is my input button:" "

<script type="text/javascript">

    function POSTMethodCall() {
        alert("entered function");
        debugger;
        $.ajax({
            type: "GET",
            url: "http://localhost:1282/DispatchAcceptStatsService.svc/GetStr",
            //                data: JSON.stringify(),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                alert("entered success function");
            },
            error: {alert:"entered error function"}
        });

    }

</script>

UPDATE: I think I managed to get it to break at that error statement. Here is a copy of the "watch window" for response. The responseText appears to be blank though. proto: function Empty() {} readyState: 0 responseText: "" setRequestHeader: function ( name, value ) { state: function () { status: 0 statusCode: function ( map ) { statusText: "error" success: function () { then: function ( doneCallbacks, failCallbacks, progressCallbacks ) { proto: Object – Tanuj Oruganti 22 mins ago

However these are the contents of the console window: event.returnValue is deprecated. Please use the standard event.preventDefault() instead. jquery-1.7.1.js:3445 OPTIONS localhost:1282/DispatchAcceptStatsService.svc/GetStr 405 (Method Not Allowed) jquery-1.7.1.js:8102 XMLHttpRequest cannot load localhost:1282/DispatchAcceptStatsService.svc/GetStr. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'localhost:62175'; is therefore not allowed access. Submit:1 – Tanuj Oruganti 2 mins ago edit

User762019-2
  • 1
  • 3
  • If you aren't getting the "entered function" alert, you haven't properly bound `POSTMethodCall` to your button's click event. – Mister Epic May 21 '14 at 19:19
  • The template for an MVC4 project should already include jquery. There is also a jquery.unobtrusive-ajax.js file you will want to include if you are going to use the Ajax helper methods. Aside from that you shouldn't need anything to use jquery ajax that isn't already included. – bsayegh May 21 '14 at 19:24
  • Your input button code currently isn't showing anything. Are you not seeing the "entered error function" alert? – bsayegh May 21 '14 at 19:25
  • @bsayegh, thats right I am not seeing the entered error function alert. – User762019-2 May 21 '14 at 19:30
  • Any comments, anyone? @bsayegh – User762019-2 May 22 '14 at 13:58
  • Since the error says "No Access-Control-Allow-Origin header is present", I am guessing it is a cross-site-scripting error. Read up on it here http://stackoverflow.com/questions/19821753/jquery-xml-error-no-access-control-allow-origin-header-is-present-on-the-req . Essentially you cant sent a script from one site to another site unless they are on the same domain. There are some solutions to it that you should be able to find at the link. – bsayegh May 22 '14 at 14:07

1 Answers1

0

My guess is that you are getting an error but don't have your breakpoint in the right place. Stepping over the ajax call wont do anything noticeable because it is asynchronous. Try adding a debugger in the error like this

<script type="text/javascript">

  function POSTMethodCall() {
    alert("entered function");
    debugger;
    $.ajax({
        type: "GET",
        url: "http://localhost:1282/DispatchAcceptStatsService.svc/GetStr",
        //                data: JSON.stringify(),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            alert("entered success function");
        },
        error: function(response) {
            debugger;
            alert("entered error function");
         }
    });

}

When it hits your error statement, check the response. It should have a responseText property that you can check for the error.

I also changed your error handler to the correct syntax. Once you see the error, if you don't understand what it means you can repost the question or edit this one with the error.

bsayegh
  • 990
  • 6
  • 17