I need to call onDataReturnInitializeTable yui datatable method from custom call back function.
Normally I would use on success of sendRequest method like this:
success: onDataReturnInitializeTable,
but now I need to do something else after that. I tried to do this
success: function(e) {
dataTable.onDataReturnInitializeTable;
//do my code here
},
but that won't work cause onDataReturnInitializeTable is a function and needs to be called in correct context
Please help.
success: function(e) {
dataTable.onDataReturnInitializeTable.apply(this, arguments);
//do my code here
},
This is a generic JavaScript trick, it is not limited to DataTable.
Related
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 one
submit_vote only accepts one argument
So:
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)
I'm trying to write a js function that triggers another, variable, function when complete. I figured I could do this by passing the second function's name as a string, but I can't get it to work. Here's my code:
logMeIn('likeThisPost');
function logMeIn(callBack) {
//First function content
$.post("/ajaxurl/",
{
login_id: login_id,
intent: 'login'
},
function(){
console.log('Logged in, refreshing header');
$.post("/secondajaxurl/",{},
function(data){
//success
if(typeof callBack!=='undefined') {
window[callBack]();
}
}
);
}
);
});
}
This should, according to my thinking, run likeThisPost after successfully completing both ajax calls in logMeIn, but instead I get this error:
window[callBack] is not a function
The function I'm calling on success definitley exists, and besides which, it doesn't look like it's even trying to call that function, but it's treating callBack as literal rather than a string.
I'm using jQuery and have everything wrapped in a $. Where am I going wrong?
With thanks to Jonas W and Rory McCrossan, the answer was to change the passed function to the function name, rather than a string, and then call the function directly rather than using window.
So logMeIn(likeThisPost) instead of logMeIn("likeThisPost") and callBack(); rather than window[callBack]();.
Thanks!
I am making an ajax call that returns XML. This XML needs to be handled differently based upon the section of the page within the site the user is on. Thus, I would like to implement 1 ajax function that makes the calls, and has a variable success function... I'm sure it is simple but I've searched for a while and cannot figure it out..
function makeAjaxCall(variableSuccessFunction) {
$.ajax.... (ajax stuff goes here)...
success: variableSuccessFunction(xml)
}
function ViewOne(xml) {
//take the XML and update the dom as appropriate
}
function ViewTwo(xml) {
//take the XML and update the dom as appropriate
}
$(document).ready(function() {
//be able to call either one of these functions
makeAjaxCall(ViewOne);
makeAjaxCall(ViewTwo);
}
You've basically got it! Just one tweak:
function makeAjaxCall(variableSuccessFunction) {
$.ajax.... (ajax stuff goes here)...
success: variableSuccessFunction // no (xml)
}
You're passing around function references. success is passed a reference to variableSuccessFunction (whatever that may be) and will call it just like it would if you had supplied an anonymous function to it. No need to invoke it inside of makeAjaxCall.
If the following possible?
I wish to move the alert(result) into a function and to dynamically call it.
Current
$.ajax(this.href, {
success: function (result)
{
alert(result);
AjaxComplete();
}
});
My Attempt - not working
$.ajax(this.href, {
success: function (result)
{
window["MyAlert(result)"]();
AjaxComplete();
}
});
function MyAlert(result)
{
alert(result);
}
Is this possible?
Why can't you just do this?
MyAlert(result);
If MyAlert is a part of the window object, it's already a global.
Unless you want to call an arbitrary function by name (which isn't really good practice, IMO), which you can do like this:
window[function_name_string](argument);
window["MyAlert(result)");
is invalid syntax (missmatching [ and ), wrong function name, and not calling it at all, just getting it..). Should be
window["MyAlert"](result);
if you want to call it like that, but I see no reason why you couldn't just call it normally, as Blender mentioned.
Basically what I am trying to do is pass a callback function through PHP using JQuery $.post. Something like:
function loadPage()
{
$.post('myurl.php', { 'callbackfunc' : function (info) { alert(info); } },
function(data) {
$("#divid").html(data);
} );
}
Where myurl.php creates a page with a table. The table rows have an onclick handler that calls the callback function.
The problem is, passing the function this way sends it as undefined via post, and if I enclose it in quotes, then when I try to call it I get the error that it is not a function.
Is there any way to do what I am describing?
there is a way but not normally recommended. You can pass the function as a string and then when you receive the function with javascript use the eval() function.
function loadPage()
{
$.post('myurl.php', { 'callbackfunc' : "function (info) { alert(info); }" },
function(data) {
$("#divid").html(eval(data));
} );
}
pass it as a string (function body in double quotes, probably using escape characters).
You could attach your function to your table rows after the table has been returned, rather than try to have the php code create it with the proper callback.
function loadPage(callbackfunc)
{
$.post('myurl.php', {},
function(data) {
$("#divid").html(data);
$("#divid").find("tr").each($(this).click(callbackfunc));
} );
}
there is no way to do what you are describing, but there is a probably way to do what you want. ( i dont know what you want )
you cant pass a JS function to the server. you can only pass strings.
edit:
based on your response, i can tell you that your way of doing this is not only not good, but dangerous, as it allows XSS.
it would be better to delegate the click function to the div where you are inserting the table like this:
function loadPage(){
$("#divid").delegate('tr', 'click', function(evt){
//this code is different per page, change color, alert, etc
});
//after the above event is delegated, you can reload the table as much as you want, without needing to rebind the above event
$.post('myurl.php', function(data) {
$("#divid").html(data);
});
}