|
This is part of the old PHP 4.7 App that I'm working on. The last time somebody worked on it was back in 2008, so there is a lot of old outdated stuff in it. One of them is this eval() function.
I read up on it, but I'm still kind of fuzzy on the point of it. If I understand correct, it evaluates the notion of an equation, or string, and returns the outcome if it can be done, or undefined if it can't be done. And then the Mozilla documentation said "Don't use it", and offered work around solutions such as using a function instead.
Looking at this block of JavaScript, I'm having trouble with understanding why it was written this way, and coming up with a rewrite.
So like on Ref 1, it must be a select option element, and it getting the value.
I would think document.getElementByID('document.step2.' + txt + '.value') would be a good replacement, and then check if the element is undefined.
And Ref 2 is thew same thing.
Mozilla says this, in which I get, but confuses me because my eval() is being used different.
I just need help in understanding, and if I am interpreting this correct.
Wrong
function looseJsonParse(obj){
return eval("(" + obj + ")");
}
Right
function looseJsonParse(obj){
return Function('"use strict";return (' + obj + ')')();
}
function save(bkType, txt, id , dataType) {
let error = false;
let typeVar = eval('document.step2.' + txt + '.value');
let referenceId = '';
let refDetail = '';
let quantity = '';
const fPost = true;
if ('Q' == bkType) {
typeVar = 'document.step2.' + id + '\$quan' + '.value';
quantity = eval(typeVar);
}
else if ('TQ' == bkType) {
typeVar = 'document.step2.' + id + '\$quan' + '.value';
quantity = eval(typeVar);
typeVar = 'document.step2.' + id + '\$type' + '.value';
referenceId = eval(typeVar);
if ('quan' != data_type) {
var typeOptions = eval('document.step2.' + txt + '.options');
FilterInactivePart(typeOptions);
}
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
There is a much easier way than using eval for your particular example. The w.x.y.z syntax in Javascript can be rewritten as w['x']['y']['z'] instead.
So instead of
var typeOptions = eval('document.step2.' + txt + '.options');
you can use
var typeOptions = document.step2[txt].options;
|
|
|
|
|
That was going to be my next question.
I got that error about missing name after dot operator, and tried working with dots.
So I started working on it, but didn't get it to work right. Then I realized that the original author just wanted to make sure that the right select element was chosen, so I sent "this" to the function.
From this:
<select id='$sel_cat_name' name='$sel_cat_name' onchange='return check_supplier($sel_cat_name)'>
To this:
<select id='$sel_cat_name' name='$sel_cat_name' onchange='return check_supplier(this, $sel_cat_name)'>
And adjusted the function
From this:
function check_supplier(opType) {
const form_ele_name = "document.form2." + op_type + ".selectedIndex";
let tmp_sel_index = eval(form_ele_name);
const form_sel_name = "document.form2."+op_type+".options["+tmp_sel_index+"].text";
let sel_ven_name = eval(form_sel_name);
To This:
function check_supplier(sourceElement, opType) {
const tempSelectIndex = sourceElement.selectedIndex;
const formSelectName = sourceElement.options[tempSelectIndex].text;
let selectVendorName = eval(formSelectName);
I don't know, guess it could be re imagined several different ways. But your help is of great value to quickly fix this.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Hi!
This is an example of code.
Simply not able to understand what it does. How can I check some kind of result in the console?
Thank you in advance if sy tell me.
timeFuncRuntime(() => {
for (let i = 10; i>0; i--){
console.log(i);
}
});
The explanation from lecture:
In this example, we invoked timeFuncRuntime() with an anonymous function that counts backwards from 10. Anonymous functions can be arguments too!
|
|
|
|
|
It sets variable i to the value 10, and then runs the for loop. Each time round the loop it prints the value of i to the console. At the end of each iteration it subtracts 1 from i (i--) and tests if it is greater than zero. When the value of i is not greater than zero the loop terminates.
Use your browser console window to see the results.
|
|
|
|
|
I see, but this is a anonymous function how can be invoked?
If simply run it throw an error like:
error: Uncaught ReferenceError: timeFuncRuntime is not defined
|
|
|
|
|
Yes, I get the same. I think there is some information missing.
|
|
|
|
|
If you add the line:
function timeFuncRuntime(f) { f();}
somewhere in your script section it should work. The timeFuncRuntime function must be defined, and take a function as its only parameter. It will then call that function and execute it. So the call in the other block of code passes the anonymous function to timeFuncRuntime, where it gets executed.
|
|
|
|
|
|
You are welcome; and I learned something today. But I would suggest you talk to your lecturer about what we discovered.
|
|
|
|
|
Hi, i have created a favourite button which once clicked uses .append to add onto the favourites page the option clicked. I am having difficulties grabbing all the results on that page and displaying it in a textfield which can then be emailed. Below is what i got so far many thanks.
<!-- This is page 1-->
<div data-role="page" id="item1">
<!-- favourites button-->
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="favourite1" id="favourite1" class="custom">
<label for="favourite1">Add to favourites</label>
<div id="dog"><img id="theImg" src="images/dog.png" />Where is the image?</div>
</fieldset>
<!-- This is page 2-->
<div data-role="page" id="item2">
<div data-role="header" data-position="fixed"> <!-- header-->
<h1>Item 2</h1>
</div>
<!-- favourites button-->
<fieldset data-role="controlgroup" data-type="horizontal">
<input type="checkbox" name="favourite2" id="favourite2" class="custom">
<label for="favourite2">Add to favourites</label>
</fieldset>
<!-- Favourites page -->
<div data-role="page" id="favourites">
<div data-role="header" data-position="fixed"> <!-- header-->
<h1>Favourites</h1>
</div>
<div role="main" class="ui-content"> <!-- main contain-->
<h1>Favourites</h1>
<!-- buttons allowing navigation to item 1 and item 2-->
<a href="#item1" class="ui-btn ui-btn-inline">Item 1 page</a>
<a href="#item2" class="ui-btn ui-btn-inline">Item 2 page</a>
<div id="favourite-content"><p>My favourites: </p></div>
<div id="list"
<form action="mailto:@mail.com Feedback" method="post" enctype="text/plain">
Email Adress:<br />
<input type="text" id ="fav" name="email_address" value="" maxlength="100" /><br />
<input type="submit" value="Submit" />
</form>
</div>
$(document).on( 'pagecontainerbeforehide', 'body', function( event, ui){
//do something
if ( ui.nextPage.attr('id')== "favourites") {
$("#favourite-content").html ("");
if ($( "#favourite1" ).is( ":checked" )) {
$("#favourite-content").prepend('<img id="theImg" src="images/dog.png"/>');
}
if ($( "#favourite2" ).is( ":checked" )) {
$("#favourite-content").append("<p>item2 details</p>");
}
}
});
|
|
|
|
|
I've been searching around the web. Found indexedDB.open and tried it out. But I really need some sort of call back, or a promise when the PHP page has finished.
Below seems to work, but returns success right away and the spinner doesn't show.
Just looking for better ideas. Or maybe I can build on this. It's a start at least.
function saveWithProgress(stage) {
console.log("Save with Progress - Calling msrp.phtml");
const spinner = document.getElementById('spinnerOverlay');
if (stage == 'construction') {
let note = prompt('Please brief summary of changes - construction', '');
if (note != '' && note != null) {
spinner.classList.remove('hide');<br />
spinner.classList.add('show');
const cUrl = 'msrp.phtml?save=1&new_note=' + note + '&cachebuster=' + (new Date()).valueOf();
let openRequest = indexedDB.open(cUrl, 1);
openRequest.onsuccess = (event) => {
console.log('Save with Progress Construction - Success!');
var db = event.target.result;
console.log("Save with Progress Construction - ", db);
spinner.classList.remove('show');<br />
spinner.classList.add('hide');
};
openRequest.onerror = (error) => {
console.log('Save with Progress Construction - ', error);
};
}
}
else
{
if (confirm('Are you sure that you want to save the changes? - everything but construction')) {
spinner.classList.remove('hide');<br />
spinner.classList.add('show');
const saveUrl = 'msrp.phtml?save=1&cachebuster=' + (new Date()).valueOf();
let openRequest = indexedDB.open(saveUrl, 1);
openRequest.onsuccess = (event) => {
console.log('Save with Progress - Success!');
var db = event.target.result;
console.log("Save with Progress - ", db);
spinner.classList.remove('show');<br />
spinner.classList.add('hide');
};
openRequest.onerror = (error) => {
console.log('Save with Progress Construction - ', error);
};
}
}
return false;
}
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
the "onsuccess" and "onerror" functions are your callbacks. IndexedDB is asynchronous; see IDBFactory.open() - Web APIs | MDN for how to define those callback functions.
Have you tried stepping through your code in the browser's debugger? The "open" call is likely to complete so fast that you won't see the spinner appear/disappear if you run in "real time".
|
|
|
|
|
I'm using Visual Code for this PHP 4.3 App, and I don't have the database available locally. I have to work off a remote server, edit here and copy to there and then run the program.
I figured open just opens the file, and success confirms that the file was opened as a call back. I was looking for a call back for when the file was done executing.
I guess I can try a setting a var, which is suppose to be beyond block level and see if the file I'm calling can see the var and alter the value, or something like that. Or maybe build a promise.
Spent all day yesterday building the spinner, CSS and testing it to run in frames and out of frames and reverse engineering of how this thing works. Was pretty brain dead by the time I got to this.
Thanks for the lead however, I'll run with it and see where it goes.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
The "open" method simply creates a connection to the database, your code as shown above is not (yet) running anything (in terms of saving or retrieving data). You've not told us what you're trying to achieve, but the documentation does include a number of examples that should guide you through what you need. I suspect you may (a) be overcomplicating things, and/or (b) be expecting things to take much longer than they actually will.
|
|
|
|
|
The PHP page will access the SQL server database, read values, crunch the numbers, and write values.
The PHP page also updates HTML in a value container on the presentation layer. Not sure how I'm going to handle that.
The purpose is to let the user know that work is being done; obvious, but the old method was to open a browser window with a progress spinner and close it using this copied from the internet back in 2005.
I get what it does, but it seems over complicated to me.
(function() {
window.spawn = window.spawn || function(gen) {
function continuer(verb, arg) {
let result;
try {
result = generator[verb](arg);
}
catch (err) {
return Promise.reject(err);
}
if (result.done) {
return result.value;
} else {
return Promise.resolve(result.value).then(onFulfilled, onRejected);
}
}
let generator = gen();
let onFulfilled = continuer.bind(continuer, 'next');
let onRejected = continuer.bind(continuer, 'throw');
return onFulfilled();
};
window.showModalDialog = window.showModalDialog || function(url, arg, opt) {
url = url || '';
arg = arg || null;
opt = opt || 'dialogWidth:300px;dialogHeight:300px';
let caller = showModalDialog.caller.toString();
let dialog = document.body.appendChild(document.createElement('dialog'));
dialog.setAttribute('style', opt.replace(/dialog/gi, ''));
dialog.innerHTML = '<input class="btn-primary" type="button" id="dialog-close" value="Continue" style="position: absolute; top: 2px; right: 4px; font-size: 20px; color: #000; text-decoration: none; outline: none;"><iframe id="dialog-body" src="' + url + '" style="border: 0; width: 100%; height: 100%;"></iframe>';
document.getElementById('dialog-body').contentWindow.dialogArguments = arg;
document.getElementById('dialog-close').addEventListener('click', function(e) {
e.preventDefault();
dialog.close();
});
if (caller.indexOf('yield') >= 0) {
return new Promise(function(resolve, reject) {
dialog.addEventListener('close', function() {
var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
document.body.removeChild(dialog);
resolve(returnValue);
});
});
}
var isNext = false;
var nextStmts = caller.split('\n').filter(function(stmt) {
if (isNext || stmt.indexOf('showModalDialog(') >= 0)
return isNext = true;
return false;
});
dialog.addEventListener('close', function() {
var returnValue = document.getElementById('dialog-body').contentWindow.returnValue;
document.body.removeChild(dialog);
nextStmts[0] = nextStmts[0].replace(/(window\.)?showModalDialog\(.*\)/g, JSON.stringify(returnValue));
eval('{\n' + nextStmts.join('\n'));
});
};
})();
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Hmm, that's not remotely what your page is doing, though. The code you have shown us is running in the browser, and makes a remote call to the d/b. That's totally different from "running a php page". If you want to do that, just enable the php page, then submit the form. When the server side code is complete and the response returned to the browser, the page will replace what was previously shown and the spinner will be gone. Or, just make an AJAX callback to your php page.
|
|
|
|
|
Ok
Thanks for verifying that, I'm way off course here. I'll do the AJAX call first and see how that works out.
I'll be back. 
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Well this works, the page takes about 10 secs to run and the spinner turns off. I'm trying to return some JSON back from the PHP page, as an option in case I need to use the option. I should probably post this in the other forum. Anyways, this is my JavaScript.
.then(function(data) is undefined, scratching my head on this. Maybe it's another keyword.
This is what I get back from .then(status = {, which actually looks good. The status below returns when the PHP page is done running. When I think about it, this must be the response header sent when done. So my JSON output should be in this payload within the body I think.
HTTP Status:<br /><br />
Response<br />
body: ReadableStream { locked: false }<br />
bodyUsed: false<br />
headers: Headers { }<br />
ok: true<br />
redirected: false<br />
status: 200<br />
statusText: "OK"<br />
type: "basic"<br />
url: "<a href="http:
<prototype>: ResponsePrototype { clone: clone(), arrayBuffer: arrayBuffer(), blob: blob(), … }<br />
msrpAsync.js:42:25
My JavaScript
spinner.classList.remove('hide');
spinner.classList.add('show');
const saveUrl = 'msrpControllerTest.phtml?save=1&cachebuster=' + (new Date()).valueOf();
fetch(saveUrl, { mode: 'same-origin', headers: { "Content-Type": "application/json; charset=utf-8" }})
.then(status => {
console.log("HTTP Status: ", status);
})
.then(function(data) {
console.log("Request succeeded with JSON response: ", JSON.stringify(data));
spinner.classList.remove('show');
spinner.classList.add('hide');
})
.catch(err => {
spinner.classList.remove('show');
spinner.classList.add('hide');
console.log("Ajax error - ", err);
alert("An error has occurred, and no error code has been written yet to debug the error")
});
I wrote this as a PHP 4.3 test page. I don't think that json_encode() will work since it's PHP 4.3.
Remember that I haven't worked with PHP 4 since 2003, so it's been 17 years.
ob_start();
header('Content-Type: application/json');
$jsonResult = "
{
\'status\': \'202\',
\'message\': \'No Project Number assigned\',
\'msrp\': {
\'bookPrice\': 0.00,
\'finalAdd\': 0.00
}
}";
echo $jsonResult;
ob_end_flush();
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
I can only have 1 then in the fetch, with catch.
On Postman, my JSON is there in the body from the PHP page.
I'll figure it out eventually. But be my Fetch.
spinner.classList.remove('hide');
spinner.classList.add('show');
const saveUrl = 'msrp-api-async.phtml?save=1&cachebuster=' + (new Date()).valueOf();
fetch(saveUrl, { mode: 'same-origin', headers: { "Content-Type": "application/json; charset=utf-8" }})
.then(response => {
console.log("response: ", response);
console.log("Request succeeded with JSON response: ", JSON.stringify(response.json));
spinner.classList.remove('show');
spinner.classList.add('hide');
})
.catch(err => {
spinner.classList.remove('show');
spinner.classList.add('hide');
console.log("Ajax error - ", err);
alert("An error has occurred, and no error code has been written yet to debug the error")
});
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Then must be like a pipe in Angular or rxjs. And it required more piping. I think think the internet is loaded with bad or old examples of how to use fetch.
Using Fetch - Web APIs | MDN
spinner.classList.remove('hide');
spinner.classList.add('show');
const saveUrl = 'msrp-api-test.phtml?save=1&cachebuster=' + (new Date()).valueOf();
fetch(saveUrl, { mode: 'same-origin', method: 'POST', headers: { "Content-Type": "application/json; charset=utf-8" }})
.then(response => response.json())
.then(data => {
console.log("Success: ", data);
spinner.classList.remove('show');
spinner.classList.add('hide');
})
.catch(err => {
spinner.classList.remove('show');
spinner.classList.add('hide');
console.log("Ajax error - ", err);
alert("An error has occurred, and no error code has been written yet to debug the error")
});
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
Hi we have a beautiful feature in Visual Studio that takes us from the place of its usage to definition if we right click and say go to definition or implementation.
Can we do the same for JavaScript frameworks, is there any way to do it? For example I have a component usage as below:
{{#link-to 'dashboard' tagName='li'}}
, in EmberJS, can I go to the definition of this component?.
Thank you so much
|
|
|
|
|
What happens when you try it?
|
|
|
|
|
|
Well there is your answer.
|
|
|
|
|
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
