When I call a PHP function from a javascript function (located in an .js external file), the webpage refreshes and appears to stop loading at the PHP function.
function completePurchase(){
//check if perosn signed in
if (signedIn){
alert("Purchase Complete! Total : " + total);
//Upadte database - call PHP function in MainPage2
document.write('<?php echo upadtePurchaseToDB();?>');
}
}
The PHP function resides in the PHP page enclosed within PHP tags:
//PHP to handle data when purchase button is pressed
function upadtePurchaseToDB(){
echo "PHP CALLAED AS PURCHASE BUTTON PRESSED";
};
The idea is to update a database when the PHP function is called.
However when called the page refreshes and remains blank.
In the console if i navigate to the 'Element' tab I can see the PHP call:
Not sure what the underlying issue is wether its how I have called the PHP function using JS or where the PHP function is placed.
One problem is that you're trying to make JS genarate PHP code, and then expecting that to work: it can't. PHP runs on the server, and only "does things" when asked for a page by the browser: PHP generates source code for the browser to deal with. That's all it does.
When the browser has the page, JS kicks in, and PHP is no longer anywhere to be found: see Difference between Javascript and PHP for more information on this, and I can strongly recommend reading up on that.
However, the real problem that you're describing (your page seemingly reloading but dying on the PHP code) is one caused by your use of document.write(), which absolute doesn't do what you think it does, and you should not be using it in modern code.
document.write is one of the earliest functions in JS and is super low level: it does not write text into a webpage, it writes bytes into the document bytestream so that the document parser can pick up data from the bytestream at the same time and parse it into a page tree.
While the page is still being processed, that seems safe: document.write will simply inject bytes into the open bytestream, and the parser will parse that, and all will seem well. However, once the page tree is done and the document bytestream gets closed, things start to go very, very wrong:
Any call to document.write will try to write into the open bytestream, and if it's closed, document.write will simply open a bytestream: now you have an empty document bytestream. And because the document parser sees an open bytestream, it start building a page tree based on what's in it, and now your page is gone because that's what you told the browser to do.
It's also not the case that it "appears to stop loading at the PHP function", what actually happens is that you've told the page parser that the new page code to form a page tree off of is the byte sequence <?php echo upadtePurchaseToDB();?>. So the parser looks at that, sees <, and so knows that what comes after that will be a tag, because that's how HTML works. It then sees ? and goes "Error: this HTML is invalid HTML" and stops.
So the bottom line here is to read up on where and when PHP runs, vs where and when JS runs, but arguably even more importantly: never use document.write because it doesn't do what you think, at all.
Related
I'm trying to run chrome debugger to gather deobfuscated JavaScripts but it returns a large number of chunks for a script. I want to know how does chrome divides one JavaScript file to multiple chunks? What exactly is one chunk of a script?
I am aware that for each script file, script tag, and eval() function separate chunks will be created. I just want to pinpoint all possible cases for which chunks are created. For example, does lazy parsing also creates chunks for some functions?
It would be great if somebody can point me to some documentation about how the process works.
Chrome debugging protocol API used
The Debugger.scriptParsed event is what generates the scriptId for each script found. Each script file parsed will fire the event and should receive a unique id. As well as individual script files, each instance of a <script> tag within a page source will also get its own id.
There are a number of parameters the event callback gets passed. You can inspect all the arguments by logging out the arguments object. For example, you'll get a url back for a script file and startLine gives you the offset for <script> tags that appear in an HTML resource.
on('Debugger.scriptParsed', function() {
console.log(JSON.stringify(arguments, null, 2)(
});
Investigation
In response to your updated question, my understanding is that in debugger mode it will attempt a full parse and not to try to optimise with a pre-parse. I wasn't able to really understand the v8 code base, but I did a little testing.
I created an HTML page with a button, and a separate script file. I executed one function immediately after page load. Another function is executed on click of button.
document.addEventListener("DOMContentLoaded", () => {
document.getElementById('clickMe').addEventListener('click', () => clicked);
});
I inspected the output from Debugger.scriptParsed. It parsed the script file straight away. Upon clicking the button, there were no additional output entries. If I changed the handler to invoke the clicked called dynamically using eval, it did output a new script chunk.
eval('clicked()');
This makes sense as there's no way for the parser to know about it until it's executed. The same applies to an inline handler, e.g. onclick="doSomething()"
Other chunks I noticed were Chrome Extension URIs and internals URIs from chrome.
I have 5 html pages and a JavaScript function DoInitialConfiguration() in a JavaScript File. User can open any of the five html pages and I want that irrespective of which page is opened, I call this function on the first page access. But also want to remember that the function has been called once and not call it in other page load. I only have these 5 html pages and the JavaScript file which has the function. I am owner of the JavaScript file but can do limited change in the html pages (which I don't own) like load the JavaScipt file and call the function DoInitialConfiguration().
Since the JavaScript file will remain in browser cache, is there a way to remember the function has been called once by using any variable in the JS file. It is OK to call DoInitialConfiguration() again if the page is reloaded after clearing browser cache.
how can this functionality be achieved
If your 5 pages are hosted under same site (which probably would be the case), you can use localStorage to add a key to check if your script was called first time or not.
if (localStorage.getItem("firstRun") != null) {
// second run+ code goes here
} else {
localStorage.setItem("firstRun", "ohyes");
// first run code goes here
}
You can possibly use localStorage for this. Once your code executes set a localStorage variable i.e. localStorage.setItem(<key>, <value>) and in the function check if the localStorage has been set i.e. localStorage.getItem("lastname"). If its set do not execute the code.
It would be good to understand you setup and case study better.
If I understand you correctly, you have 5 separate HTML pages (and you are not running a Single Page Application [SPA]) then what you want to do is impossible through browser and cache memory alone. If you want to remember settings you need to save these using localStorage or cookies (as some of the answers popped up have suggested) but as they are 5 different html pages what does the Js do to make you not want to re-run it on a second page load?
I'm new to web development. I've google'd the question and found no result. To begin, consider the following code:
<p id="par">Hello World</p>
If you have PHP set-up, the following is valid:
<p id="par"><?php echo "Hello World";?></p>
Both produces the same result, but what I recall is that PHP codes are executed in the server, thus the following question arise concerning the execution of the code:
Is <p></p> element first retrieved from server, while some background ajax process waits for the "Hello World"?
I'd really like to know so I can make a more predictable code. Another possible scenario that bothers me is when using javascript and/or jQuery:
$(document).load(function(){
$("#foo").width($("#par").width());
});
which raises the question, does it wait for PHP server requests to finnish or does it just load the page therefore, some code that will need to react to the size of the <p> element above will be a bug?
Again, pardon the beginner question.
PHP it is server side program language. All code will be processed on server before return to client.
I believe in your case JavaScript is client side part. So.
PHP will generate HTML first. Then Browser load HTML(already with "Hello World") and Javascript. And in the end Javascript will get access to #foo DOM element.
But here can be case when Javascript loaded before HTML. In this case
$("#foo").width($("#par").width()) will do nothing or throw error because no #par element exist yet. To fix this you have to ensure that Javascript start work after all HTML loaded. For this you can use:
$(document).load(function() {
$("#foo").width($("#par").width())
});
I hope this will help you.
Ok all the time that you type a url in the browser bar and you press enter, your browser is generating a request http to a server.
So eg:
www.example.com/ -> is asking to the example.com server the page index.html which is just text.
When you have something like:
www.example.com/test.php -> again is just converting all the php in text and returning that text.
You can see this on your Network tab in Firebug for eg.
So PHP is just generating the html code for you straight forward linearly.
So about your question:
No it won't be bugged. If you analyse the html code you receive from both you cases, you'll see they are identicall.
I am trying to print the variable in the if condition. It's done using Spring and JavaScript. I don't know Spring. How do I print the value of a Spring variable in the browser?
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
$(this).hide();
});
});
</script>
</head>
<body>
<p>If you click on me, I will disappear.</p>
<p>Click me away!</p>
<p>Click me too!</p>
</body>
</html>
I'll be attempting to piece together my comments on your question into an answer, since they seem to have solved it.
What you should first understand is the difference between server-side code parsing and execution (a JSP page for you), and client-side code parsing and execution (HTML and JavaScript for you). You can read a brief overview in the top-rated answers to this programmers.stackexchange.com question. Further reading can be found on Wikipedia's articles on server-side scripting and client-side scripting. A key concept to take away from the client-side scripting article about server-side scripts is:
[Server-side scripts] produce output in a format understandable by web browsers (usually HTML), which is then sent to the user's computer. The user cannot see the script's source code (unless the author publishes the code separately), and may not even be aware that a script was executed. Documents produced by server-side scripts may, in turn, contain client-side scripts.
In terms of your setup, this means that when you request your JSP page via your browser, your browser tells the server that is hosting the JSP page that the browser wants that page. The server then executes the JSP page to produce a document that is purely HTML and JavaScript in nature (perhaps some CSS too, if you wrote it that way) for sending to the browser. The browser never sees the JSP code. By the time the server is done parsing and executing the JSP page, all instances of ${someExpression} (JSP EL statements) and other JSP-specific expressions (such as taglibs, like <spring:xx> tags) will be resolved to some client-side equivalent. For basic JSP EL statments (${...}), these resolve to some string value. If you happen to cleverly place that EL statement in some JavaScript in the JSP, such as console.log("${myVariable}");, then you are dynamically producing JavaScript code that will depend on the output of the EL statement (in this example, it would resolve to something like console.log("myVariable-value");).
Up to this point, the server has just been executing JSP code (and otherwise leaving HTML/JS/CSS already in the page intact). No JavaScript has been parsed or executed. This final "rendered" page, after the server is done executing JSP stuff, is then sent as purely HTML/JS/CSS to the client browser, which receives it and parses/executes it. At this point, the browser sees something like console.log("myVariable-value");, without knowing or caring that your JSP code produced it, and executes that (since you cleverly placed your EL statement to produce valid JS).
This long-winded explanation then means you can do the following:
Server-side JSP:
alert("${createBehavior.behaviorRevisionAllowed}");
Resulting code sent from the server to the client browser:
alert("false");
Result after code is executed in the browser: An alert box pops up with the value false in it.
Server-side JSP:
console.log("${createBehavior.behaviorRevisionAllowed}");
Resulting code sent from the server to the client browser:
console.log("false");
Result after code is executed in the browser: The value false is logged to the console.
Server-side JSP
return [$('#some-id'), "<spring:message code='BH-MS-0070'/>"];
Resulting code sent from the server to the client browser:
return [$('#some-id'), "some-spring-message-string"];
Result after code is executed in the browser: The array in the JavaScript return statement is created with the value "some-spring-message-string" as the second element.
From your question in your comment about an "EL variable", when I said "EL variable" I meant the fact that an EL statement, such as ${someStatement}, could be a statement as simple as a variable name, such as ${createBehavior.behaviorRevisionAllowed}. This EL statement will see just a variable name in it, attempt to find that variable and get its value, and then replace ${createBehavior.behaviorRevisionAllowed} with the actual value.
Let me know if further explanation is needed.
I have a script that sends emails (subscriptions). Processing takes long enough. The script outputs a log (of what is successfully sent to the moment) to browser.
I would like it to show progress bar also. How do I do that? There is no AJAX calls, page loads synchronously. I thought may be I should just output <script>...</script> tags every X email sendings to move progress bar, but I'm not sure it's cross-browser compliant. Is that a standard, that browser should execute Javascript as soon as it encounters some in the page body?
Yes, your idea is used very often and should work in most browsers - the standard is that javascript must be executed synchronously, unless specifically told not to by the async attribute.
So you can just put in a script tag every now and again to update the status bar. Gmail uses the same technique, as far as I know.