I used to write JS inline in my footer but since it's getting too much I want to write it in an external file and include the file in the footer then.
I'm currently using
<?php include "https://example.com/myjs.php"; ?>
in the footer.
In that Php file which is mainly js with a few php expressions, I'm defining all the functions first and afterwards I'm calling some of them functions "onload" with
jQuery(document).ready(function() {
// functions....
});
I've put everything inside
<script></script>
The thing is that I get an error showing the functions I'm calling arent defined. However, when I just paste the code in the footer template inside
<script> </script>
tags it works fine.
I'm assuming that the error is with the tags and inlcude...
What am I doing wrong?
EDIT:
I am using WP functions which are based on logged in user id and page id. Do these might cause the errors?
I'm using wordpress with jQuery.
Since it's a remote URL, all php scripts will be executed before inclusion into your file. So how about
echo file_get_contents("https://example.com/myjs.php");
I could solve the problem:
I defined the php vars in JS before the script within the footer.php. Credits to: Access PHP var from external javascript file
Then I just replaced the php vars wih the js vars and included it with html as script.
Works like a charm now,
thanks anyway for all the help!
Related
I have a file index.php and there is a main js script in its header.
I'm using Jquery load method to load other php file inside a div element:
$("#formHideinAjax").load('loginpass.php');
And as our friend explained here the main js file which had loaded in the header doesn't work in new imported file so I was forced to add the js file inside the loginpass.php too(Now I have two same js file, one in header and one in div that loads loginpass.php ! )
I know that this method of loading js file is not standard and sends more request to my server.
How can I fix this problem?
Well, it is explicitly said in $.load() documentation. I'm afraid you can't just paste <script></script> code into your DOM for browser to run it.
I'm afraid you have to send JavaScript code from your loginpass.php file (without <script></script> tags) and just eval it in your JavaScript
$("#formHideinAjax").load('loginpass.php', function () {
// eval JavaScript code from php file here
});
I have created jquery functions and put them in a js file and called the file from my php using <script src="newajax.js"></script>.
This was working and now it has stopped working.
If i copy all my functions into the php file between the <script></script> tags, It works. I know there is not any issue with the js script.
To test I only added
$(document).ready(function(){
alert("ready");
});
into the js file and called it from my php. It did not show the alert but when I did this inside the php file
<script>
$(document).ready(function(){
alert("ready");
})
</script>
It worked.
So I know there isn't any issue in the php file. It just looks like the script is not being picked up and it was before with exactly the same code. I have not removed the files to a different location. The js files are in the same directory as the php file.
Anybody encountered such an issue? Or know a reason why this could happen.
FYI - I know they are html tags but I have used php extension to be able to run php functions in my file.
The jquery.js file is loaded first before my js file.
When I loaded the webpage in a new tab, it worked. I was refreshing the same browser window when the .js script stopped being called.
I am trying to include external javascript to a document. Let's say that external js has the following code.
function myFunction() {
console.log("hello");
}
and I include it from console by
var script = document.createElement('script');
script.src = "http://myjs";
document.getElementsByTagName('head')[0].appendChild(script);
but then I still get myFunction() is undefined error. The function is being called from php file included on the page somehow. Interestingly, appending my external javascript right after the head tag in the document was not enough for it to precede the function call from the loaded php file.
Q: how do I ensure that I include my javascript BEFORE the php file given my situation?
EDIT: this is the hierarchy of all the sources
mysubsite.com
myfolder
mypage.html
mysite.com
myfolder
main.php
problem.php
problem.php is calling function myFunction() but it's not included anywhere yet. So I try to define the function in an outside js file and include it in mypage.html, but problem.php still comes before the included javascript in mypage.html
EDIT:
I think the real problem is that I am dealing with an iframe that's included inside a main document. In this case, is there a way to include my external javascript file inside the main document from console? Including scripts from console only affects the iframe instead of the main document.
What you're doing is fine, but then you have to wait for the file to load. Most browsers will raise the load event on the script element although some older versions of IE use onreadystatechanged instead. But since you're using jQuery (from the tags on the question), you don't have to worry about that, you can just use $.getScript:
$.getScript("http://myjs", function() {
// The script has been loaded, you can call myFunction now
});
PHP is always included before JavaScript. PHP is executed by the server before it's sent to the client, and JavaScript is executed by the client.
Why can't you just put a regular <script type="text/javascript" src="http:/myjs"></script> in your head?
I have two ASPX pages (P1.aspx and P2.aspx). The first (P1.aspx) contains a lot of JavaScript code.
How can I call all this JavaScript from another page (P2.aspx)?
I tried to do this using PageAsyncTask from code behind of P2.aspx, but JavaScript code (on P1.aspx) didn't work.
Any suggestions?
you cant do that.
put the javascript into JS file and reference it when needed.
What you can do ( I think) is to get the HTML content of the file and then EXTRACT the JS data
edit
try that (I dont think that it will include the inside JS - but try it yourself)
WebRequest oRequest;
WebResponse oResponse;
oRequest = WebRequest.Create("http://www.google.com/");
oResponse = oRequest.GetResponse();
StreamReader sr = new StreamReader(oResponse.GetResponseStream());
string pagedata = sr.ReadToEnd();
pagedata+=#"sdfsdf";
All javascript code you want to use on a page has to be included in that page or dynamically loaded by that page. You cannot call code that is only in another page.
The usual way of sharing code among pages is to have a .js file that contains common code that is included in more than one page and then a .js file that contains code that is unique to each specific page (if required).
One way to do this is <!--#INCLUDE FILE="somefile.aspx" --> but your aspx page will complain that there can be only one 'page' directive. So in order to do this properly you need to include as the previous mentiond the js files in the aspx file.
One way is makeing a master page and include all the necessary js code in there, then all pages that are loaded within the masterpage will automatically inherit the javascript included libraries.
Another way is to make an html file that includes all the libraries and then use the <!--#INCLUDE FILE="myjslibs.html" --> to include all your code there to each page.
So actually copy all your code in one file and then include that just one file each time in every page.
I am using code-igniter, and some of my views require jquery. Because they must be used in multiple places they must call jquery in their file, however since they are referencing an external file, calls to $(document.ready) are evaluated before loading jquery and therefore fail. Is it possible to put jquery in the body and still have it load before an javascript is evaluated. Or alternatively, is the some way to pass the fact that jquery is required back through code-igniter into the headers, which were callled before the file in question.
In a view:
echo $this->import->js('jquery.js','jquery');
echo '<script type="text/javascript">
$(document).ready(function(){$(\'div#login.rounded\').corner();})
</script>';
You can view the page at: http://formulator.codingproject.net/content/login/
NOTE This page actually resides on my home machine, so it is expected that the recaptcha fails.
I guess the answer is yes. you can load the jQuery.js in your body. But you have to write your script tags only after jQuery.js declaration, if not you may end up with errors :)
PS : please correct me If I'm wrong :)
jQuery should really be called in the head element. Here's how you'd do that conditionally (untested).
In your controller, each function that needs jQuery should have:
$data['need_jquery'] = true;
$this->load->view('header');
In your header view:
<head>
<? if($need_jquery) { ?>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" /></script>
<? } ?>
</head>
It looks like you are using PHP? If so, create a static method that returns that string, but only if it hasn't already been included this request. Then you can ensure that it's only being included once.
My website is the same way. What I do is I have one header that is loaded on all pages. In that header I do if($this->uri->segment(2) == 'controller'). Then I load jQuery and certain scripts if needed for that controller.
I think it will be fine if jQuery will be included in the tag of every page, besides, you can use the minified version of jQuery which is not so heavy.
Uh, maybe I'm wrong. But when I view your source code and follow where the jquery file is: http://www.formulator.com/assets/scripts/jquery/jquery.js I get a "page cannot be found" error. So I'm guessing this could be the problem. Maybe the way your php outputs it isn't including the correct domain/subdomain?