So I want to use this from an outer function within an ajax success function. I tried to apply these solutions but somehow I can't bring it to work.
// Submit vote on submit
$('.vote-choice-div').on('click', function(event){
event.preventDefault();
// bind the clicked object
this.submit_vote.bind(this); // so I have to bind the element to use it in the ajax function?
// fire ajax
submit_vote(this.id, this);
});
// AJAX for posting
function submit_vote(vote) {
$.ajax({
url : "submit-vote/",
headers: {'X-CSRFToken': csrftoken},
type : "POST",
data : { vote : vote },
success : function(data) {
if(data.status === 1){
console.log(this) // can't access the initial clicked element
}
Uncaught TypeError: Cannot read properties of undefined (reading 'bind')
You have two problems (and a pointless argument).
submit_vote is a global, not a property of the element. To access it, you don't use this.bind returns a new function. It doesn't mutate the existing onesubmit_vote only accepts one argumentSo:
const localSubmitVote = submit_vote.bind(this)
localSubmitVote(this.id);
However… bind is only useful if you are going to store a function so you can pass it around or use it multiple times.
You aren't doing that, you're only calling it once, so use call
submit_vote.call(this, this.id);
However… submit_vote isn't a method. It isn't sensible to design it to use this in the first place. So the better approach here is to redesign it to just use the second argument that you were passing before.
function submit_vote(vote, element) {
$.ajax({
// ...
success: function(data) {
if (data.status === 1) {
console.log(element);
}
}
});
}
and
submit_vote(this.id, this)