We Keep Coding

Execute javascript code delivered via PHP using AJAX

I have been stumped on this for about 2 hours now.
My problem is that I need to load an array from a MySQL database using PHP and Ajax, and use the array in JavaScript.
I got that part working fine however the part where it references "onClick" and contains a function to run does not work. It provides numerous errors which say the exact same thing.
Uncaught RangeError: Maximum call stack size exceeded
at buttons.<computed>.onClick (app.js:1281)
The example of the array is the following:
[
{
"text": "Lost to Competitor",
"onClick": "closeOpportunity(\"Lost to Competitor\", el, stages)"
},
{
"text": "No Budget \/ Lost Funding",
"onClick": "closeOpportunity(\"No Budget \/ Lost Funding\", el, stages)"
},
{
"text": "No Decision \/ Non-responsive",
"onClick": "closeOpportunity(\"No Decision \/ Non-responsive\", el, stages)"
},
{
"text": "Price",
"onClick": "closeOpportunity(\"Price\", el, stages)"
},
{
"text": "Other",
"onClick": "closeOpportunity(\"Other\", el, stages)"
},
{
"text": "Won via Another Opportunity",
"onClick": "closeOpportunity(\"Won via Another Opportunity\", el, stages)"
}
]
My code for loading the array is the following:
function closeOpportunity(name, el, stages) {
$$("#opportunity_loss_reason2").text(name);
$$("#closedType").text("Closed Lost");
$$("#convertToProject").hide();
$$("#lostReasonLI").show();
upStepper(el, stages);
}
var stages = [
"enquiry",
"qualification",
"proposal",
"negotiation",
"closed"
];
var buttons = [];
app.request.json('scripts/lostButtonsArray.php', function (data) {
buttons = data;
console.log(buttons);
});
buttons.forEach((v, i) => {
console.log(v['onClick']);
buttons[i]['onClick'] = function() { window.eval.call(window, v['onClick'])(el, stages); };
});
app.dialog.create({
title: 'ECOM',
text: 'Why was the opportunity lost?',
cssClass: 'custom-dialog',
closeByBackdropClick: 'true',
buttons: buttons,
verticalButtons: true,
}).open();
I have already tried using regular eval() and loading the code directly without any sort of helper (eval, window.eval).
I will be happy to provide more information to help solve this problem if I haven't provided enough information.

Found the solution.
I was trying to load "name" instead of "text"
Working function
app.request.json('scripts/lostButtonsArray.php', function (data) {
buttons = data;
buttons.forEach((v, i) => {
buttons[i]['onClick'] = function() { eval('closeOpportunity')(v['text'], el, stages); };
});
});

AngularJS $interval dont stop on .cancel();

I have SPA multi view application in AngularJS, I have defined $interval which is started from another view Controller. When i click a btn with function called and line $interval.cancel(); in it, it does not stop.
Here are examples of my code:
MainController:
$scope.$on("startInterval", function () {
$interval(function warningsControl() {
console.log("Timer stamp!");
$.ajax({
// some web api call which works fine
})
}, 10000);
});
$scope.stop = function () {
$interval.cancel();
}
$scope.logoutButton = {
text: "Logout",
type: "normal",
visible: false,
onClick: function () {
// some working code
$scope.stop();
var logoutBtn = $("#logout-btn").dxButton("instance");
logoutBtn.option({
visible: false
});
}
}
And SecondController:
$scope.authenticateButton = {
type: "default",
text: "Log In",
onClick: function () {
$.ajax({
// some web api calling
success: (data) => {
// some working code
$rootScope.$broadcast("startInterval");
}
})
}
}
This code start interval and everithing is running OK, until the point i click Logout btn - it made everithing except stoping the interval.
Any ideas how to fix it? I would be grateful for advice.

The $interval function should return some sort of ID which you can pass into $interval.cancel(). For example:
var int_id = $interval( func, time )
//...later...
$interval.cancel(int_id)

JQuery window.location.assign method doesn't work

I've struggled with this problem for two days. I googled it and see some similar cases.
After sending POST request to the server, I wanna redirect the page to another one. The POST function works properly but window.location.assign() method doesn't work (although it works in another part of my project).
Here is my code:
const $btnDel = $("<button>", {
appendTo: $('td:eq(0)', $tr),
"class": "revertButton",
html: "<i class='material-icons'>restore</i>",
on: {
click: function () {
console.log(`Reverting: ${book.name}`)
$.post(`/revert/${book.name}`, {
bookName: `${book.name}`,
pageCount: `${book.pageCount}`,
action: "REVERT"
}).done(() => {
window.location.assign('/bookPage');
})
}
}
});
The first console.log works (I mean console.log("Reverting: ${book.name}"), but done function doesn't work.

Can you please try the below code.
const $btnDel = $("<button>", {
appendTo: $('td:eq(0)', $tr),
"class": "revertButton",
html: "<i class='material-icons'>restore</i>",
on: {
click: function () {
console.log(`Reverting: ${book.name}`)
$.post(`/revert/${book.name}`, () => {
bookName: `${book.name}`,
pageCount: `${book.pageCount}`,
action: "REVERT"
}).done(() => {
window.location.assign('/bookPage');
}).fail(function(error){
console.log(error);
})
}
}
});
Hope this will give you some help/clue.

Redirect to a react route using phonegap

I'm working with a react.js project and convert it into a mobile application, that part is ok, the idea is that the app must receive push notifications, once the user clicks the notification, it must change the react route, I've been trying this code but had not success the app doesn't change the route once the user clicks the notification, I had success getting the react-router instance, but i don't know how to use it properly to go to the desired route.
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
var mmjUser=localStorage.getItem("mmj-user");
if (mmjUser !== null) {
var push = PushNotification.init({
"android": {
"senderID": "491359499412",
"forceShow": 'true'
},
"ios": {
"alert": "true",
"badge": "true",
"sound": "true",
"senderID": "491359499412"},
"windows": {}
});
push.on('registration', function(data) {
console.log("registration event");
});
push.on('notification', function(data) {
console.log("notification event");
console.log(JSON.stringify(data));
var reactRouter=require('react-router');
reactRouter.HistoryLocation.replace('/waiting');
push.finish(function () {
console.log('finish successfully called');
});
});
push.on('error', function(e) {
console.log("push error");
});
}
}
};
app.initialize();
this is the reactRouter object that i'm getting
Thanks for your help!

JSTree binding my own click event

I am using jstree, and would like to bind my own click event to each of the nodes....
This is what i am trying....
$("#demo1").jstree({
"core": { "initially_open": ["root"] },
"html_data": {
"data": out
},
"plugins": ["themes", "html_data"]
}).bind("select_node.jstree",
function (e, data)
{
alert(data.rslt.obj.data("id")); });
I am using the HTML_Plugin, setting the out variable to look like this
"<li id='root'><a href='#'>Root node</a><ul><li><a href='#'>Child node</a></li></ul></li>"
trouble is, the click event does not appear to be firing, as i do not see the alert message.
Please show me the error in my ways.
thanks
tony

Remove the following attribute from your code and try, the out variable would give you "out not defined error."
"html_data": {
"data": out
},

$("#demo1").jstree({
"core": { "initially_open": ["root"] },
"html_data": {
"data": out
},
"plugins": ["themes", "html_data", "ui"]
}).bind("select_node.jstree", function (e, data) {
var id = data.rslt.obj.attr("id");
var parent = data.inst._get_parent(data.rslt.obj);
if (parent == -1) {
alert(id);
} else {
alert(parent.find('a').first().text() + "|" + id);
}
});
One thing was needed... addition of the plug in UI