Uncaught ReferenceError: checkin is not defined in HTMLButtonElement.onclick
I have a problem with js function on button click.
<button class="checkin_button btn-block" onclick="checkin(345)"><i class="fa fa-map-marker"></i> Check In</button>
My jQuery function:
var CheckIn;
$(document).ready(function() {
CheckIn = function checkin(id) {
jQuery.ajax({
type: 'POST',
url: ajaxurl,
data: {
action: 'foody_checkin',
'restaurant' = id,
},
beforeSend: function() {},
success: function() {}
});
}
});
But it doesn't work.
+3
source to share
3 answers
checkin(345)
is a function, so do the following: -
function checkin(id){
var ajaxurl = "abc.com" //an example that you have to define ajaxurl before using it
jQuery.ajax({
type : 'POST',
url : ajaxurl, // now you can use ajaxurl happily
data : {
action : 'foody_checkin',
'restaurant': id, // : needed instead of =
},
beforeSend : function(){},
success : function(){}
});
}
Notes: -
1.Please take care of the comments written inside the quote.
2. Also check that jQuery library is added before you script code
0
source to share
Try using HTML data-id method
<button class="checkin_button btn-block" data-id='345'><i class="fa fa-map-marker"></i> Check In</button>
JQuery
$(document).on('click', '.checkin_button', function () {
var id = $(this).data('id');
console.log(id);
// write your ajax below
});
Here is a working jsfiddle: https://jsfiddle.net/nuxtw2ft/
0
source to share
To assign a value to a declared var, you need to use this . Call the same by pressing a button.
Also assign the ajaxurl value as AlivetoDie mentioned in his answer.
You can run below code snapshot and confirm.
var CheckIn;
$(document).ready(function() {
var ajaxurl="yourservice.com"
this.CheckIn = function checkin(id) {
console.log("CheckIn function called on click");
jQuery.ajax({
type: 'POST',
url: ajaxurl,
data: {
action: 'foody_checkin',
'restaurant': id,
},
beforeSend: function() {},
success: function() {}
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="checkin_button btn-block" onclick="CheckIn(345)"><i class="fa fa-map-marker"></i> Check In</button>
Hope this helps!
0
source to share