Link to home
Start Free TrialLog in
Avatar of APD Toronto
APD TorontoFlag for Canada

asked on

jQuery AJAX Redirects Without Response/Error

Hi Experts,

I'm trying to make an AJAX Calling, but the following code returns neither a response nor error, It just reloads.  Whats happening?

$(function() { //Document Ready
    
    $('#btnConvert').on('click', function(){
        console.log('x');
        $.ajax({
            url: 'http://api.fixer.io/latest',
            method: 'GET',
            dataType: 'jsonp',
            success: function(result){
                console.log(result);
            },
            error: function(error){
                console.log('Something went wrong.');
            }
        });
    });
});

Open in new window


Console:
exchange.js:4 x
Navigated to http://localhost/GBC_JS2/public_html/Assign2_API/?

Open in new window

Avatar of APD Toronto
APD Toronto
Flag of Canada image

ASKER

I just changed my code to...

$(function() { //Document Ready
    
    $('#btnConvert').on('click', function(){
        console.log('x');
        $.ajax({
            url: 'http://api.fixer.io/latest',
            method: 'GET',
            dataType: 'json',
            data: {
              base: 'USD',
              format: 'json'
            },
            success: function(result){
                console.log(result);
            },
            error: function(error){
                console.log('Something went wrong.');
                console.error(error);
            }
        });
        console.log('end');
    });
});

Open in new window


...but Iget:
x
exchange.js:21 end
jquery-3.1.1.min.js:4 XHR failed loading: GET "http://api.fixer.io/latest?base=USD&format=json".
send @ jquery-3.1.1.min.js:4
ajax @ jquery-3.1.1.min.js:4
(anonymous) @ exchange.js:5
dispatch @ jquery-3.1.1.min.js:3
q.handle @ jquery-3.1.1.min.js:3
exchange.js:17 Something went wrong.
exchange.js:18 Object {readyState: 0, responseJSON: undefined, status: 0, statusText: "error"}
error @ exchange.js:18
i @ jquery-3.1.1.min.js:2
fireWith @ jquery-3.1.1.min.js:2
A @ jquery-3.1.1.min.js:4
(anonymous) @ jquery-3.1.1.min.js:4
Navigated to http://localhost/GBC_JS2/public_html/Assign2_API/?

Open in new window

This is my latest code, and if I change line 11 to EUR I get my object, but it does not work with any other base currency.

Additionally, even with EUR why does it refresh at the end?

//app object

var exchange = {};

//Init Method

exchange.init = function(){

    

    $.ajax({

        url: 'https://api.fixer.io/latest',

        type: 'GET',

        data: {

          base: 'USD'

        },

        success: function(result){

            console.log(result);

        },

        error: function(error){

            console.log('Something went wrong.');

            console.error(error);

        }

    });

}    

$(function() { //Document Ready

    //Event Listener

    $('#btnConvert').on('click', function(){

        exchange.init();

    });

});

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Marco Gasi
Marco Gasi
Flag of Spain image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
No points for this please.

Marco probably nailed it already - just expanding on what he did.

e.preventDefault() is the key bit here.

A button click usually has a default action - if attached to a form it will submit the form. When doing AJAX requests you want to disable default behaviour on any control that is going to result in request to the server (posts / get)

The e.preventDefault() is basically invoking the preventDefault() method on the event (e) which tells JavaScript not to execute the default behaviour for the event once the custom event handler has completed.

If this does not solve your problem then you need to post your HTML code as well where #btnConvert is defined.
Check this: http://test.webintenerife.com/getCurrency.html
Your code works fine even for USD. You have some problem in some other part of your script. Can you show your markup?
Probably a good idea to keep the thread focused on only one problem or we end up with spaghetti.

The problem we are currently focusing on is the page refresh. Lets solve that first and you can potentially open another question to deal with the currency issue.

Please try Marco's suggestion and post back here with a result. If it is successful I suggest closing the question and awarding points to Marco. You can then open another question on the currency issue (if it is still relevant) and post the link here so we can find it.
For some reason e.preventDefault() also resolved the currency issue.

Thank you
You're welcome! I supected that could happen when I saw your script worked fine in my  test. The reason is probably in your markup even if it sounds strange that for EUR currency it worked in your script too. I fear this will remain a mystery :)
Thanks Marco!