Develop Reference

Load all <script> tags from a different page

I'm hooking into a separate page (same domain) and pulling it into the current page using $.load, which would be fine, if I was doing it for the whole page, but I'm not, I'm just doing it for the JavaScript code in that page. I was wondering if it's possible to load all the script tags from said page into the current page?
I'm currently using the below code:
var newMessageURL = $('#lnkCompose a').attr('href');
$('#hiddenScriptLoad').load(newMessageURL);

Is said page on the same domain or do you have access to it? You will run into trouble with the cross domain origin policy otherwise.
If you do have access, the only way is to parse the html using a regex statement or html parser and pull the scripts manually.
This sounds like a very hacky approach though and I'm not really sure why you'd want to do this.
If you have access, get the page contents and then use the below to get the script tag sources.
text.match( /<script src="scripts\/(.*?)\.scripts\.js"><\/script>/g )
Credit Javascript regex to get src url between script tag

var newMessageURL = $('#lnkCompose a').attr('href');
$('#hiddenScriptLoad').load(newMessageURL);
The above code will load all the contents you have in the second file and it will also import any javascript codes you have there. But the codes you'll have in second file will not work and wont get into action unless you call to them from first page using a function call or in any other manner.
If you just want to separate your js codings and html and have them in two separate files, it would be better to use PHP to import the second file into the first one and in this way, when the page is loaded in the client browser, it will render it as it was just a single file containing both contents. Ex..
<?php
include("script_file.js");
?>
And also if you want get only the js part of the second file use something like this
<?php
$Vdata = file_get_contents('path/to/YOUR/FILE.php');
preg_match_all("'<script(.*?)</script>'si", $Vdata, $match);
foreach($match[1] as $val)
{
echo $val;
}
?>

The query string seems to affect page loading speed

I'm working on this.
It's hosted on c9.io, a browser based collaborative programming IDE
I have an index.php with a small script:
<?php
$path = ltrim($_SERVER['REQUEST_URI'], '/');
$elements = explode('/', $path);
if(is_numeric($elements[0])){
require_once 'post.php';
}elseif($elements[0]==''){
require_once 'main.php';
}else{
require_once '404.php';
}
?>
When there is nothing in the url (only https://dickbutt-etaoin.c9.io ) it displays the page pretty much instantly but keeps loading for another five seconds during which none of the javascript on the page works
When I have a few numbers (for instance https://dickbutt-etaoin.c9.io/241 ) it's about as fast as it gets.
How can I make both the pages load at a normal speed?
I've tried reversing the order of if statements and it doesn't change a thing. Both the pages are relatively big, contain both php and javascript and a giant css file.

After some prodding in the network tab and googling, I found my answer.
I added this line of code to index.php
header('Connection: close');
Now it does what I wanted it to do. Thank you all for trying to help!

How to tell requirejs to load only the javascript required by the current page

I'm using requirejs in a wordpress plugin. I'm trying to use it so that only the javascript needed for the page is loaded.
My idea is to have a main.js file that loads the js for the current page, but i was wondering how to tell main.js what file to load.
require(
[ "pages/name-of-the-page" ], // How do i tell require that we are on page x?
function( page ) {
page.start();
}
);
I was thinking about what to use, maybe i should set a cookie server-side, read it and then use that data?Use the url parameters to guess the page?What should i do?

It would seem more sensible to just load core JS modules in your main.js (since it will be loaded on every page) and then for each page require only the code you need.
One crude way is to check in wordpress what page is currently loaded and then load your files there:
<?php if (is_page('Contact')): ?>
<script>
require(['scripts/pages/contact.js']);
// Note use of a plain js file, and not a module
</script>
<?php endif; ?>
Then in contact.js
require(['some/contact/module'], function(contact) {
// do cool stuff
});
I covered a similar situation in this answer that may help as well.

Is it possible to load Jquery in the body of a 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?

Optimizing a static php website

i am making a "static" php website in this style
<?php include "header.php" ?>
<?php include "left.php" ?>
<?php include "photos.php" ?>
In "photos.php" i have 3 heavy javascript files from the lightbox and i thought it could be a good to include the javascript files only in this "photos.php" and not at the "header.php".
But javascript supposed to be only in the head html tags. Do you have any better approach or mine is just fine?
thanks very much

It's best to have all javascript in the head whenever you can. And you can without much difficulty. As Dominic Rodger said, it's probably not a big deal to include the js files on every page because they should be cached.
I tend to create page template class files with lots of variables for this sort of thing. A simpler thing to do that's more inline with what you're already doing is to set a variable before you include the header file, then access that variable in the header file and add the js if appropriate.
<?php
$includePhotoJavascript = true;
include "header.php";
?>
In the header file:
if(isset($includePhotoJavascript) and $includePhotoJavascript == true)
{
// add the javascript
}

JavaScript does not only have to be in the head HTML tag. It is actually advisable to put it at the end of the HTML file, because they halt the rest of the HTML file from loading.
What you could do in the header.php file, is something like this:
<html>
<head>
<title><?php print $title; ?></title>
<?php
foreach($javascript as $src){
?>
<script type="text/javascript" src="<?php print $src; ?>"></script>
<?php
}
?>
</head>
Then the file you posted would look like this:
<?php
$title = "Photo album";
$javascript = array("jsfile1.js", "file2.js");
include "header.php"
include "left.php"
include "photos.php"
?>

If you're going down this route, you could try setting a variable before you include header.php which stores whether or not those JavaScript files are needed. It might not be necessary to sweat it too much though, if users tend to stick around on your website they'll fetch those files once and then not again, since hopefully your server will return a 304 Not-Modified response, and they'll be served from your browser's cache.

thanks very much for your ideas.
i am planning of making the home page(index.php) as light as posible. So
i will load javascript(lightbox.js) only in photos.php and try to do a
LAZY LOADING to this lightbox.js so when "first time" visitor go to
photos.php javascript file will be in cache.
and all these in background.
I think is the same Facebook does. Look here
Optimizing Facebook