APD Toronto
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?
Console:
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.');
}
});
});
});
Console:
exchange.js:4 x
Navigated to http://localhost/GBC_JS2/public_html/Assign2_API/?
ASKER
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?
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();
});
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
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?
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.
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.
ASKER
For some reason e.preventDefault() also resolved the currency issue.
Thank you
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 :)
ASKER
Thanks Marco!
ASKER
Open in new window
...but Iget:
Open in new window