How do I correctly combine these AJAX and jQuery functions?
0
Whenever I click this button:
<a onclick="AddToWishList(@item.id)" id="swapHeart" class="btn btn-default swap">
<span class="glyphicon glyphicon-heart-empty"></span>
</a>
I want the button to change state with jQuery whenever the AJAX function is called
AJAX:
<script>
function AddToWishList(item_id) {
$.ajax({
type: "POST",
data: {
itm_id: item_id
},
url: "/WishList/AddToWishList",
success: function (e) {
e.preventDefault();
},
error: function () {
return "error";
}
});
}
</script>
jQuery:
<script src="~/lib/jquery/dist/jquery.min.js">
</script>
<script>
jQuery(function ($) {
$('#swapHeart').on('click', function () {
var $el = $(this),
textNode = this.lastChild;
$el.find('span').toggleClass('glyphicon-heart glyphicon-heart-empty');
$el.toggleClass('swap');
});
});
</script>
So my first thought was that I had to combine these two function together as one function. But how? Because the button first handles the AJAX function and after that the jQuery.
Thanks in advance!
javascript jquery ajax
asked Nov 21 '18 at 18:28
floorvmtfloorvmt
829
add a comment |
0
Whenever I click this button:
<a onclick="AddToWishList(@item.id)" id="swapHeart" class="btn btn-default swap">
<span class="glyphicon glyphicon-heart-empty"></span>
</a>
I want the button to change state with jQuery whenever the AJAX function is called
AJAX:
<script>
function AddToWishList(item_id) {
$.ajax({
type: "POST",
data: {
itm_id: item_id
},
url: "/WishList/AddToWishList",
success: function (e) {
e.preventDefault();
},
error: function () {
return "error";
}
});
}
</script>
jQuery:
<script src="~/lib/jquery/dist/jquery.min.js">
</script>
<script>
jQuery(function ($) {
$('#swapHeart').on('click', function () {
var $el = $(this),
textNode = this.lastChild;
$el.find('span').toggleClass('glyphicon-heart glyphicon-heart-empty');
$el.toggleClass('swap');
});
});
</script>
So my first thought was that I had to combine these two function together as one function. But how? Because the button first handles the AJAX function and after that the jQuery.
Thanks in advance!
javascript jquery ajax
asked Nov 21 '18 at 18:28
floorvmtfloorvmt
829
I'm not completely clear on what you want. If you want the AJAX to fire when you click the button, move it into thefunction() { ... }you have below. Otherwise, if you want the state to change whenAddToWishListis called, then move that code into theAddToWishListfunction.
– Tyler Roper
Nov 21 '18 at 18:33
BTW,e.preventDefault();should be outside ofsuccess. you can add that as the first line of the click event handler
– Shyju
Nov 21 '18 at 18:40
@Shyju Whenever thee.preventDefault()was on the beginning, the ajax call wouldn't work. Whenever it was in thesucces, it would work..
– floorvmt
Nov 21 '18 at 19:03
@TylerRoper I want the state of the button to be changed whenever the AddToWishList is called.
– floorvmt
Nov 21 '18 at 19:05
add a comment |
0
0
0
Whenever I click this button:
<a onclick="AddToWishList(@item.id)" id="swapHeart" class="btn btn-default swap">
<span class="glyphicon glyphicon-heart-empty"></span>
</a>
I want the button to change state with jQuery whenever the AJAX function is called
AJAX:
<script>
function AddToWishList(item_id) {
$.ajax({
type: "POST",
data: {
itm_id: item_id
},
url: "/WishList/AddToWishList",
success: function (e) {
e.preventDefault();
},
error: function () {
return "error";
}
});
}
</script>
jQuery:
<script src="~/lib/jquery/dist/jquery.min.js">
</script>
<script>
jQuery(function ($) {
$('#swapHeart').on('click', function () {
var $el = $(this),
textNode = this.lastChild;
$el.find('span').toggleClass('glyphicon-heart glyphicon-heart-empty');
$el.toggleClass('swap');
});
});
</script>
So my first thought was that I had to combine these two function together as one function. But how? Because the button first handles the AJAX function and after that the jQuery.
Thanks in advance!
javascript jquery ajax
asked Nov 21 '18 at 18:28
floorvmtfloorvmt
829
Whenever I click this button:
<a onclick="AddToWishList(@item.id)" id="swapHeart" class="btn btn-default swap">
<span class="glyphicon glyphicon-heart-empty"></span>
</a>
I want the button to change state with jQuery whenever the AJAX function is called
AJAX:
<script>
function AddToWishList(item_id) {
$.ajax({
type: "POST",
data: {
itm_id: item_id
},
url: "/WishList/AddToWishList",
success: function (e) {
e.preventDefault();
},
error: function () {
return "error";
}
});
}
</script>
jQuery:
<script src="~/lib/jquery/dist/jquery.min.js">
</script>
<script>
jQuery(function ($) {
$('#swapHeart').on('click', function () {
var $el = $(this),
textNode = this.lastChild;
$el.find('span').toggleClass('glyphicon-heart glyphicon-heart-empty');
$el.toggleClass('swap');
});
});
</script>
So my first thought was that I had to combine these two function together as one function. But how? Because the button first handles the AJAX function and after that the jQuery.
Thanks in advance!
javascript jquery ajax
javascript jquery ajax
asked Nov 21 '18 at 18:28
floorvmtfloorvmt
829
asked Nov 21 '18 at 18:28
floorvmtfloorvmt
829
edited Nov 22 '18 at 19:44
floorvmt
asked Nov 21 '18 at 18:28
floorvmtfloorvmt
829
asked Nov 21 '18 at 18:28
floorvmtfloorvmt
829
asked Nov 21 '18 at 18:28
floorvmtfloorvmt
829
829
I'm not completely clear on what you want. If you want the AJAX to fire when you click the button, move it into thefunction() { ... }you have below. Otherwise, if you want the state to change whenAddToWishListis called, then move that code into theAddToWishListfunction.
– Tyler Roper
Nov 21 '18 at 18:33
BTW,e.preventDefault();should be outside ofsuccess. you can add that as the first line of the click event handler
– Shyju
Nov 21 '18 at 18:40
@Shyju Whenever thee.preventDefault()was on the beginning, the ajax call wouldn't work. Whenever it was in thesucces, it would work..
– floorvmt
Nov 21 '18 at 19:03
@TylerRoper I want the state of the button to be changed whenever the AddToWishList is called.
– floorvmt
Nov 21 '18 at 19:05
add a comment |
I'm not completely clear on what you want. If you want the AJAX to fire when you click the button, move it into thefunction() { ... }you have below. Otherwise, if you want the state to change whenAddToWishListis called, then move that code into theAddToWishListfunction.
– Tyler Roper
Nov 21 '18 at 18:33
BTW,e.preventDefault();should be outside ofsuccess. you can add that as the first line of the click event handler
– Shyju
Nov 21 '18 at 18:40
@Shyju Whenever thee.preventDefault()was on the beginning, the ajax call wouldn't work. Whenever it was in thesucces, it would work..
– floorvmt
Nov 21 '18 at 19:03
@TylerRoper I want the state of the button to be changed whenever the AddToWishList is called.
– floorvmt
Nov 21 '18 at 19:05
I'm not completely clear on what you want. If you want the AJAX to fire when you click the button, move it into the
function() { ... } you have below. Otherwise, if you want the state to change when AddToWishList is called, then move that code into the AddToWishList function.– Tyler Roper
Nov 21 '18 at 18:33
I'm not completely clear on what you want. If you want the AJAX to fire when you click the button, move it into the
function() { ... } you have below. Otherwise, if you want the state to change when AddToWishList is called, then move that code into the AddToWishList function.– Tyler Roper
Nov 21 '18 at 18:33
BTW,
e.preventDefault(); should be outside of success. you can add that as the first line of the click event handler– Shyju
Nov 21 '18 at 18:40
BTW,
e.preventDefault(); should be outside of success. you can add that as the first line of the click event handler– Shyju
Nov 21 '18 at 18:40
@Shyju Whenever the
e.preventDefault() was on the beginning, the ajax call wouldn't work. Whenever it was in the succes, it would work..– floorvmt
Nov 21 '18 at 19:03
@Shyju Whenever the
e.preventDefault() was on the beginning, the ajax call wouldn't work. Whenever it was in the succes, it would work..– floorvmt
Nov 21 '18 at 19:03
@TylerRoper I want the state of the button to be changed whenever the AddToWishList is called.
– floorvmt
Nov 21 '18 at 19:05
@TylerRoper I want the state of the button to be changed whenever the AddToWishList is called.
– floorvmt
Nov 21 '18 at 19:05
add a comment |
1 Answer
1
active
oldest
votes
1
Get rid of the onclick and pass the item id to a data attribute.
<a id="swapHeart" data-item_id="@item.id" .... </a>
Then do everything inside the jQuery click handler
$('#swapHeart').on('click', function(e) {
e.preventDefault();// calling this in success of ajax is too late
var $el = $(this);
$.ajax({
type: "POST",
data: {
itm_id: $el.data('item_id')// from data attribute
},
url: "/WishList/AddToWishList",
success: function(data) {
// do something with or based on response data
$el.find('span').toggleClass('glyphicon-heart glyphicon-heart-empty');
$el.toggleClass('swap');
},
error: function() {
console.log("ajax error");
}
});
});
answered Nov 21 '18 at 18:44
charlietflcharlietfl
141k1391125
This way the console is not logging an ajax error, but the ajax and jquery functions are both not working now like this for me..
– floorvmt
Nov 21 '18 at 19:03
OK. I saw your image and you have more than one of these. Instead ofid="swapHeart"makeswapHearta class and change the above selector to$('.swapHeart'). Also are you loading those elements using ajax? If so change to$(document).on('click','.swapHeart', function(e){
– charlietfl
Nov 21 '18 at 19:04
These elements are not using ajax. Changing all the things you said didn't do it.
– floorvmt
Nov 21 '18 at 19:07
Can you log something inside this clcik hndler and not in ajax to see if event is working? Any errors in browser console? Note I removed thejQuery(function ($) {just for simplicity
– charlietfl
Nov 21 '18 at 19:08
There are some errors in the browser console, but they don't have to do with this I think imgur.com/a/IHbDDq9
– floorvmt
Nov 21 '18 at 19:10
|
show 4 more comments
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418426%2fhow-do-i-correctly-combine-these-ajax-and-jquery-functions%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
1
Get rid of the onclick and pass the item id to a data attribute.
<a id="swapHeart" data-item_id="@item.id" .... </a>
Then do everything inside the jQuery click handler
$('#swapHeart').on('click', function(e) {
e.preventDefault();// calling this in success of ajax is too late
var $el = $(this);
$.ajax({
type: "POST",
data: {
itm_id: $el.data('item_id')// from data attribute
},
url: "/WishList/AddToWishList",
success: function(data) {
// do something with or based on response data
$el.find('span').toggleClass('glyphicon-heart glyphicon-heart-empty');
$el.toggleClass('swap');
},
error: function() {
console.log("ajax error");
}
});
});
answered Nov 21 '18 at 18:44
charlietflcharlietfl
141k1391125
This way the console is not logging an ajax error, but the ajax and jquery functions are both not working now like this for me..
– floorvmt
Nov 21 '18 at 19:03
OK. I saw your image and you have more than one of these. Instead ofid="swapHeart"makeswapHearta class and change the above selector to$('.swapHeart'). Also are you loading those elements using ajax? If so change to$(document).on('click','.swapHeart', function(e){
– charlietfl
Nov 21 '18 at 19:04
These elements are not using ajax. Changing all the things you said didn't do it.
– floorvmt
Nov 21 '18 at 19:07
Can you log something inside this clcik hndler and not in ajax to see if event is working? Any errors in browser console? Note I removed thejQuery(function ($) {just for simplicity
– charlietfl
Nov 21 '18 at 19:08
There are some errors in the browser console, but they don't have to do with this I think imgur.com/a/IHbDDq9
– floorvmt
Nov 21 '18 at 19:10
|
show 4 more comments
1
Get rid of the onclick and pass the item id to a data attribute.
<a id="swapHeart" data-item_id="@item.id" .... </a>
Then do everything inside the jQuery click handler
$('#swapHeart').on('click', function(e) {
e.preventDefault();// calling this in success of ajax is too late
var $el = $(this);
$.ajax({
type: "POST",
data: {
itm_id: $el.data('item_id')// from data attribute
},
url: "/WishList/AddToWishList",
success: function(data) {
// do something with or based on response data
$el.find('span').toggleClass('glyphicon-heart glyphicon-heart-empty');
$el.toggleClass('swap');
},
error: function() {
console.log("ajax error");
}
});
});
answered Nov 21 '18 at 18:44
charlietflcharlietfl
141k1391125
This way the console is not logging an ajax error, but the ajax and jquery functions are both not working now like this for me..
– floorvmt
Nov 21 '18 at 19:03
OK. I saw your image and you have more than one of these. Instead ofid="swapHeart"makeswapHearta class and change the above selector to$('.swapHeart'). Also are you loading those elements using ajax? If so change to$(document).on('click','.swapHeart', function(e){
– charlietfl
Nov 21 '18 at 19:04
These elements are not using ajax. Changing all the things you said didn't do it.
– floorvmt
Nov 21 '18 at 19:07
Can you log something inside this clcik hndler and not in ajax to see if event is working? Any errors in browser console? Note I removed thejQuery(function ($) {just for simplicity
– charlietfl
Nov 21 '18 at 19:08
There are some errors in the browser console, but they don't have to do with this I think imgur.com/a/IHbDDq9
– floorvmt
Nov 21 '18 at 19:10
|
show 4 more comments
1
1
1
Get rid of the onclick and pass the item id to a data attribute.
<a id="swapHeart" data-item_id="@item.id" .... </a>
Then do everything inside the jQuery click handler
$('#swapHeart').on('click', function(e) {
e.preventDefault();// calling this in success of ajax is too late
var $el = $(this);
$.ajax({
type: "POST",
data: {
itm_id: $el.data('item_id')// from data attribute
},
url: "/WishList/AddToWishList",
success: function(data) {
// do something with or based on response data
$el.find('span').toggleClass('glyphicon-heart glyphicon-heart-empty');
$el.toggleClass('swap');
},
error: function() {
console.log("ajax error");
}
});
});
answered Nov 21 '18 at 18:44
charlietflcharlietfl
141k1391125
Get rid of the onclick and pass the item id to a data attribute.
<a id="swapHeart" data-item_id="@item.id" .... </a>
Then do everything inside the jQuery click handler
$('#swapHeart').on('click', function(e) {
e.preventDefault();// calling this in success of ajax is too late
var $el = $(this);
$.ajax({
type: "POST",
data: {
itm_id: $el.data('item_id')// from data attribute
},
url: "/WishList/AddToWishList",
success: function(data) {
// do something with or based on response data
$el.find('span').toggleClass('glyphicon-heart glyphicon-heart-empty');
$el.toggleClass('swap');
},
error: function() {
console.log("ajax error");
}
});
});
answered Nov 21 '18 at 18:44
charlietflcharlietfl
141k1391125
edited Nov 21 '18 at 18:58
answered Nov 21 '18 at 18:44
charlietflcharlietfl
141k1391125
answered Nov 21 '18 at 18:44
charlietflcharlietfl
141k1391125
answered Nov 21 '18 at 18:44
charlietflcharlietfl
141k1391125
141k1391125
This way the console is not logging an ajax error, but the ajax and jquery functions are both not working now like this for me..
– floorvmt
Nov 21 '18 at 19:03
OK. I saw your image and you have more than one of these. Instead ofid="swapHeart"makeswapHearta class and change the above selector to$('.swapHeart'). Also are you loading those elements using ajax? If so change to$(document).on('click','.swapHeart', function(e){
– charlietfl
Nov 21 '18 at 19:04
These elements are not using ajax. Changing all the things you said didn't do it.
– floorvmt
Nov 21 '18 at 19:07
Can you log something inside this clcik hndler and not in ajax to see if event is working? Any errors in browser console? Note I removed thejQuery(function ($) {just for simplicity
– charlietfl
Nov 21 '18 at 19:08
There are some errors in the browser console, but they don't have to do with this I think imgur.com/a/IHbDDq9
– floorvmt
Nov 21 '18 at 19:10
|
show 4 more comments
This way the console is not logging an ajax error, but the ajax and jquery functions are both not working now like this for me..
– floorvmt
Nov 21 '18 at 19:03
OK. I saw your image and you have more than one of these. Instead ofid="swapHeart"makeswapHearta class and change the above selector to$('.swapHeart'). Also are you loading those elements using ajax? If so change to$(document).on('click','.swapHeart', function(e){
– charlietfl
Nov 21 '18 at 19:04
These elements are not using ajax. Changing all the things you said didn't do it.
– floorvmt
Nov 21 '18 at 19:07
Can you log something inside this clcik hndler and not in ajax to see if event is working? Any errors in browser console? Note I removed thejQuery(function ($) {just for simplicity
– charlietfl
Nov 21 '18 at 19:08
There are some errors in the browser console, but they don't have to do with this I think imgur.com/a/IHbDDq9
– floorvmt
Nov 21 '18 at 19:10
This way the console is not logging an ajax error, but the ajax and jquery functions are both not working now like this for me..
– floorvmt
Nov 21 '18 at 19:03
This way the console is not logging an ajax error, but the ajax and jquery functions are both not working now like this for me..
– floorvmt
Nov 21 '18 at 19:03
OK. I saw your image and you have more than one of these. Instead of
id="swapHeart" make swapHeart a class and change the above selector to $('.swapHeart'). Also are you loading those elements using ajax? If so change to $(document).on('click','.swapHeart', function(e){– charlietfl
Nov 21 '18 at 19:04
OK. I saw your image and you have more than one of these. Instead of
id="swapHeart" make swapHeart a class and change the above selector to $('.swapHeart'). Also are you loading those elements using ajax? If so change to $(document).on('click','.swapHeart', function(e){– charlietfl
Nov 21 '18 at 19:04
These elements are not using ajax. Changing all the things you said didn't do it.
– floorvmt
Nov 21 '18 at 19:07
These elements are not using ajax. Changing all the things you said didn't do it.
– floorvmt
Nov 21 '18 at 19:07
Can you log something inside this clcik hndler and not in ajax to see if event is working? Any errors in browser console? Note I removed the
jQuery(function ($) { just for simplicity– charlietfl
Nov 21 '18 at 19:08
Can you log something inside this clcik hndler and not in ajax to see if event is working? Any errors in browser console? Note I removed the
jQuery(function ($) { just for simplicity– charlietfl
Nov 21 '18 at 19:08
There are some errors in the browser console, but they don't have to do with this I think imgur.com/a/IHbDDq9
– floorvmt
Nov 21 '18 at 19:10
There are some errors in the browser console, but they don't have to do with this I think imgur.com/a/IHbDDq9
– floorvmt
Nov 21 '18 at 19:10
|
show 4 more comments
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418426%2fhow-do-i-correctly-combine-these-ajax-and-jquery-functions%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I'm not completely clear on what you want. If you want the AJAX to fire when you click the button, move it into the
function() { ... }you have below. Otherwise, if you want the state to change whenAddToWishListis called, then move that code into theAddToWishListfunction.– Tyler Roper
Nov 21 '18 at 18:33
BTW,
e.preventDefault();should be outside ofsuccess. you can add that as the first line of the click event handler– Shyju
Nov 21 '18 at 18:40
@Shyju Whenever the
e.preventDefault()was on the beginning, the ajax call wouldn't work. Whenever it was in thesucces, it would work..– floorvmt
Nov 21 '18 at 19:03
@TylerRoper I want the state of the button to be changed whenever the AddToWishList is called.
– floorvmt
Nov 21 '18 at 19:05