AJAX operation does its work, but always get error

Question

I have the following AJAX:

$.ajax({
          url: url,
          data: {"url" : hangOutUrl, "participants" : params},
          dataType: 'jsonp',
          success: function(){
            console.log("Connected");
          },
          error: function(xhr, textStatus, error) {
          console.log("Impossible to connect");
          console.log(xhr.statusText);
          console.log(textStatus);
          console.log(error);
      }
        });

And this is code on my controller

def hangout_started

    #Get information from hangout using ajax and widget
    url = params[:url]
    participants = params[:participants].split(/-/)


    #Find users 
    caller1 = Kid.where(username: participants[0]).first
    caller2 = Kid.where(username: participants[1]).first

    #Set all users to busy
    caller1.set_busy_status!

    #Create REDIS row with user and URL 

    REDIS.sadd "hangout:#{caller2.id.to_s}", url
    REDIS.expire "hangout:#{caller2.id.to_s}", 60

    respond_to do |format|
        format.json { head :ok }
      end


  end

And this work perfect, except that I always get "Impossible to connect" on my console log. Why I always enter into my error function?

Error function and post error from browser console:

message: "jQuery211019731531548313797_1401196032110 was not called" stack: "Error: jQuery211019731531548313797_1401196032110 was not called↵ at Function.n.extend.error (https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:2:1821)↵ at h.jsonp.b.dataTypes.(anonymous function).b.converters.script json (https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:4:16293)↵ at vc (https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:4:7397)↵ at x (https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:4:10802)↵ at HTMLScriptElement.n.prop.on.c (https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:4:15583)↵ at HTMLScriptElement.n.event.dispatch (https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:3:6404)↵ at HTMLScriptElement.r.handle (https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js:3:3179)"

Answer 1

Ajax

Something you need to know about $.ajax - when you use the error callback, it's caused by your ajax hitting an actual error. I used to think it was if your app returns an error - that's wrong:

• success: {} is for every time your ajax hits the URL & delivers the request
• error: {} is for every time your ajax fails to hit the URL correctly

This means if the error was in your controller, I believe it will come back with a success callback from your controller

---

Fix

For you, I would recommend this:

1. Determine your ajax is hitting the right url (you've not detailed url in your code)
2. Be sure you've included jquery in your javascript application js
3. Use a way to capture the returned error from your ajax
4. Try using json

You may wish to change your ajax to this:

$.ajax({
     url: url,
     data: {"url" : hangOutUrl, "participants" : params},
     dataType: 'json',
     success: function(){
        console.log("Connected");
     },
     error: function(jqXHR,error, errorThrown) {  
           if(jqXHR.status&&jqXHR.status==400){
                alert(jqXHR.responseText); 
           }else{
               alert("Something went wrong");
           }
      }
});

This will allow you to capture the error response properly, giving you the ability to show the error correctly. You can do that by looking at this:

---

If you give me something to work on, I'll be in a much better position to help you out!