I have a test page that I keep all my labs on on my local IDE (MAMP). I recently wrote a small php script that will read the directory and create a link of each file in that directory which is help to me as now i don't have to write out the full local url each time to test a new file. I still have to refresh the page though every time i create a new file so its' read. I wanted to set the page to being 'self-reading' so that when i add something, it would appear on the page. I thought Ajax would be a good use of this but the script i tried doesn't work. I've no knowledge of ajax and or jQuery - i'm a super newb honestly - but i'm trying to grow.
My problem in a nut shell: The script does not appear to update the page (maybe it is and i'm not doing it right? I don't know - maybe i ought to be using javascript to refresh the page?)
my code:
<!-- For ease of use, use JQuery hosted lib- you can download any version and link to it locally also -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("response.php");
var refreshId = setInterval(function() {
$("#responsecontainer").load('response.php?randval='+ Math.random());
}, 1000);
$.ajaxSetup({ cache: false });
});
</script>
<div id="responsecontainer">
<?php //index.php
$dir_open = opendir('.');
while(false !== ($filename = readdir($dir_open))){
if($filename != "." && $filename != ".."){
$link = "<a href='./$filename' target='_blank'> $filename </a><br />";
echo $link;
}
}
closedir($dir_open);
?>
</div>
<!-- End jQuery auto update div -->
Related
I have a few html pages that share the same navbar. Therefore I wrote one html file - topnav.html and I used the following jQuery code to load it into every page.
javascript
<script type="text/javascript">
$(function() {
$('#topnav').load('topnav.html');
});
</script>
html
<body>
<div id="topnav"></div>
...
Now, I discovery each page need to have different properties (say different titles). How can I pass the title parameter to the tapnav.html page?
This first solution is in PHP, because I like it much better. If you want to do it in JS, see the edit below.
If you are using PHP, you can include a file (with functions), and pass the function as a parameter, like so:
index.php
<?php
include "topnav.php";
top("title");
?>
topnav.php
<?php
function top($title) {
?>
<div id="topNav">
<!-- Other code you need here -->
<span id="title"><?= $title ?></span> <!-- put in inputted title -->
</div>
<?php
}
?>
I don't use JS/jQuery to load resources (parts of pages) for my websites. PHP include() is much more convenient and I use it all the time!
EDIT
Now that I think about it, you could probably do a very similar thing in JavaScript, although it's slightly more cumbersome. Put a function in the JS, and just call it from the page.
For example:
index.html
<script type="text/javascript">
$(function() {
$('#topnav').load('topnav.html');
$("body").append(top("title"));
});
</script>
topnav.html
<script>
// basically return (or print out) string of resource
function top(title) {
return "<div id='topNav'>" +
"<!-- Other code you need here -->" +
"<span id='title'>" + title + "</span>" +
"</div>";
}
</script>
EDIT 2: More detailed explanation (by request)
What the JS example does is load the resource file like you did in your example. However, instead of it being a plain HTML file like yours, it is a JS file. Once you've loaded it, you now can use the JS script. Basically the added script allows you to use a mostly-predefined string, but you can add some variables (for example, "<span id='title'>" + title + "</span>" allows you to put title into it).
I have included this code using php "include" at the end of the body tag in
</div>
<?php include "jq.php" ?>
</body>
</html>
contents of jq.php----------------------------------------------------------------------------------
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
if (!window.jQuery)
{
document.write('<script src="./script/jquery.min.js"><\/script>');
}
</script>
-----------------but it is visible at the end of each page----------------------------
There's still not much to go on why this isn't working without looking at a lot more of your codebase.
I'd suggest a few things. Firstly, that you probably don't need to include a local copy unless you're doing development work - the chances of Google's CDN being down are very low, and if the user can't access it you'll likely have trouble with other components of the page anyway.
If you do need the local version for development (e.g. if you want to test the site when you're offline) then simply add this to PHP:
if (is_development()){
echo '<script src="./script/jquery.min.js"></script>';
}
else {
echo '<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>';
}
Where is_development() checks some defined CONSTANT or (less ideally) a global variable or local file.
The final approach would be to simply include the jQuery code at the top of your own JS file:
if (!window.jQuery){
var jQuery=.... // full minified jQuery here
}
None of those really answer your query but they should help you continue with your development without too many more problems relating to this issue.
Non-programmer here, trying to figure something out.
I have a javascript function in the header of my document that upon page load it opens another page in an iframe and reveals an svg file on my server for minor online editing. I would like to place my javascript function in a php file, so that these folder locations of the svg files cannot be determined for anyone to download these svg files freely.
Currently I have this on my html header:
<script type="text/javascript">
function loaded()
{
document.getElementById("myiframe").src="http://www.mydomain.com/myfolder/mypage.html?url=myotherfolder/"+window.location.search.substr(1);
}
onload=loaded;
</script>
Since I have heard that php is a server side script and not viewable, I thought this would mask the location of these files on my server.
I want to remove this javascript code from my header and place it in a php file and replace the header code with either of these:
<script src="phpjavafile.php"></script>
or
<?php include ('phpjavafile.php'; ?>
and finally put the javascript into a php file like this:
<?php
<script type="text/javascript">
function loaded()
{
document.getElementById("myiframe").src="http://www.mydomain.com/myfolder/mypage.html?url=myotherfolder/"+window.location.search.substr(1);
}
onload=loaded;
</script>
?>
I have tried both of these methods and neither load properly.
I must be doing something wrong. Am I on the right track, or is there a better way of getting this to work.
Thank you ahead of time.
By using the echo() function
PHP
<?php
echo '<script>
some javascript
</script';
?>
However if you are just trying to load the php on page load without any php args then just write it out of the tags.
If you have the JavaScript is another file then using
PHP
<?php
include 'path/to/javascript/file.php';
?>
Should work.
You cannot hide javascript as it is interpreted browser side and not server side so the users browser has to have accesses to the code.
Here is the code I think you are asking for:
PHP HTML
<?php
$html = file_get_contents("path/to/data.html");
?>
<div>
<?php echo $html; ?>
</div>
doesn't use an iframe but should still work. However any relative links will not work unless both files are in the same dir and there will be no iframe functionality without additional css
You can just output it as text in your PHP file.
<?php
// Some PHP stuff here
?>
<script type="text/javascript">
function loaded(){
....
}
onload=loaded;
</script>
<?php
// Some more PHP stuff here
?>
Alternatively, you can just link to it in the usual way from within the same file:
<script src="path/to/your/file.js"></script>
I separate many CSS/JS so it's easier to work in and look over.
But when the website loads, it has to load all those JS and CSS files and that will extend the loading times more and more.
So I was trying to put a simple php script in my website that takes all the CSS content and put it in 1 file. Same goes for the JS content.
It looks like this ($data['js'] and $data['css'] are arrays with all the files):
<?php
$jsData = "";
$cssData = "";
foreach($data['js'] as $js) {
$jsData .= file_get_contents($js);
}
foreach($data['css'] as $css) {
$cssData .= file_get_contents($css);
}
file_put_contents('static/js/javascript.js', $jsData);
file_put_contents('static/css/style.css', $cssData);
?>
<script type="text/javascript" src="static/js/javascript.js"></script>
<link href="static/css/style.css" rel="stylesheet" type="text/css">
As I'm still a beginner I wanted to ask you for tips/suggestions,
What do you guys think?
Thank you
Use this CssJsBundler
The above is on github, and opensource and it does what you have requested !
And also check out http://www.subchild.com/2008/08/07/simple-javascript-and-css-file-bundler/
which tells you how to configure the options.
I have a site that show ads.
These ads are JavaScript snippets given by the ads provider.
I'd like to know whether it's possible to automatically replace the JavaScript snippet of these ads in my page by another JavaScript snippet to show ads from other ad provider after some time user is browsing the page (say 1 minute).
I looked for a solution but I failed to find one.
So a practical example:
How to change the code below
<div id="myAd">
<div id="headbanner"><script type="text/javascript"><!--
google_ad_client = "ca-pub-2874724721134868";
/* girlsgamesalon-468x60 */
google_ad_slot = "4183777947";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
</div>
by
<div id="myAd">
<script type="text/javascript">document.write("<scr" + "ipt type='text/javascript' src='http://advertising.youraddprovider.com/ad/getoffers/?instanceID=xx18fdbb471&" + Math.random() + "'></scri" + "pt>");</script>
</div>
after 1 minute that user is browsing the page.
Is impossible to change the javascript code. You have to haldle that with server side code, like php, c#.net, etc, etc.
Example in php:
if(someconditionismet)
{
echo "<script src='thejsfileforthiscase.js'></script>";
}
else
{
echo "<script src='theotherjsfile.js'></script>";
}
Update asked for the user:
You could use
document.write("<script src='javascriptfile.sj'></script>")
But it will delete the whole content of you page which mean that if you a html tag, document.write will delete and will write just the tags. There is a work around but as i told you, DO NOT USE IT.
And with server side, you have to learn php, or c#.net, asp.net, etc, etc. I already answered you. If you want i can give you some good toturials to start.