I want to show loading animation if browser supports JS. if JavaScript is disabled then the image will show but never be hidden, in this case. For this purpose I wrote this code directly after the <body> tag:
<?php
$results = get_browser();
if ($results["javascript"] == 1) {
echo '<div id="loading"><img src="core/design/img/load/load.gif"/></div>';
}
?>
And my js looks like that
$(window).load(function(){
$('#loading').fadeOut(600);
});
Got error message browscap ini directive not set in. How can I realize my idea?
You can just use:
<body>
//set the div to hidden by default
<div id="loading" style="display:none"><img src="core/design/img/load/load.gif"/></div>
//place this code directly below the loading div, it will run before page/dom is loaded
<script type="text/javascript">
document.getElementById('loading').style.display = 'block';
</script>
<script type="text/javascript">
$(function() {
//this will run after the page has loaded
$('#loading').fadeOut(600);
});
</script>
...
If you want to do exactly what aquastyle.az does (though the above solution is faster), You can do this:
<body>
<script type="text/javascript">
//if JavaScript is enabled, append the loading div to be body
$('body').append('<div id="loading"><img src="core/design/img/load/load.gif" /></div>');
</script>
<script type="text/javascript">
$(function() {
//this will run after the page has loaded
$('#loading').fadeOut(600);
});
</script>
...
In your HTML, you could do something like this:
<html class="no-js">
...
Then, once the page loads, replace the no-js class with a js class via JavaScript.
$(window).load(function(){
$('html').removeClass('no-js').addClass('js');
});
Finally, in your CSS, show the loading image if the browser supports js and hide it if it doesn't.
.js #loading {
display: block;
}
.no-js #loading {
display: none;
}
Does that make sense?
The get_browser function must be download the appropriate INI file and include it in your PHP.ini file.
Instead of trying to figure out if the user has javascript enabled, why don't you build out the site from the perspective of progressive enhancement, so it works for all users regardless of their browser settings.
Alternatively, you could ask javascript to set a cookie, and then check that the cookie exists in PHP, it's by no means 100% foolproof method but could work for your situation.
Related
I have a form inside a DIV (normally the div is hidden using "display:none;")
The user open the DIV with: onclick='$("#Details").show("slow");
Fills out the form and save the data.
I don't want the entire page to be reloaded, and I need only this DIV to be reloaded
I tried:
function(data) {
$('#Detalils').load(location.href + ' #Detalils');
});
and:
$("#Detalils").load(location.href + " #Detalils, script");
and:
$('#Detalils').load(location.href + ' #Detalils', function() {
$('#script').hide();
})
where in #script I put my script
In this div I have some script, and because of the jQuery on load script execution, the script is not executed.
I cannot put the script in an external file, it must be in the page body.
Is there a way to execute the script a well?
Thanks
Your actual Javascript code should not be within the div, that is the issue. If you wish to reload the form for the user to enter new data, then use ID's on the elements within your forms and write your JQuery code outside of it or in an external file, here is a simple example :
Instead of something like :
<form>
<input type="button" onclick="alert('hello');"> Click me ! </input>
</form>
Do something like :
<form>
<input id="myButton" type="button"> Click me ! </input>
</form>
<script type="text/javascript">
$("#myButton").click(function()
{
alert('hello');
});
</script>
You will have to adapt your code to this, of course, but you don't have another choice. HTML code can be removed and added at will, but Javascript code must not be treated the same way. There are many reasons for this, but one reason is that the browser will only load the Javascript functions once, for obvious optimization reasons.
The works within my local environment. Give it a shot in yours.
The HTML:
<div id="wrapper">
Remove
Reload
<div id="Details">my details box</div>
</div>
The jQuery:
<script type="text/javascript">
function mload() {
/*LOAD IN MY EXTERNAL STUFF*/
mtarget = $('#Details'); //the element on your page, that houses your external content
mscript = 'external.js'; //the js script required for your plugin to work
mtarget.load("external.html", function(){
$.getScript(mscript, function() {
//run the plug-in options code for your external script here
});
});
//*/
}
function madjustments() {
/*ADJUST THE LOADING PROCESS*/
//remove the load request on click from your remove button
$('#mremovebtn').on("click",function(e) {
e.preventDefault();
$('#Details').children().remove();
});
//reload the request on click from your reload button
$('#mreloadbtn').on("click", function(e) {
e.preventDefault();
mload();
});
//*/
}
(function($){
mload();
madjustments();
})(jQuery);
</script>
You will obviously need 2 additional files. One called external.html and another called external.js, for my demo code to work. But you can change the naming process to whatever works for you.
Extra:
Set a class in your external html file (on the parent element), for example #external. And by default, set the CSS to display:none in the style sheet. Then when the page loads in, simply show() it in the jQuery code.
I've tried several options to try and load the content from a div on one page with id="container" into a div on a different html page id="landing".
I used the answer here and also lots of variations of it
Load content of a div on another page
I've run a test and Jquery is being loaded.
The test files are here http://www.salcombeyurts.co.uk/test/landing.html
My code looks like this:
<script type="text/javascript">
$('#landing').load('source.html #container');
</script>
This will eventually end up on a PHP page. Part of a Joomla site.
You run the script before the #landing div is defined.
Run your code after the DOM ready event
$(function(){
$('#landing').load('source.html #container');
});
It seems like the suggestion you got was to do an AJAX request and load the entire page into the #container div on the current page, which is not a bad idea. What you seem to be trying to do, on the other hand, is load the page and then get the content of a div inside that page and put it in a container div on the current page, which is overly complicated and a bad solution to what ever the problem is.
Here is my solution none the less
$(function() {
$.get('page with the div you want', function(data) {
var content = $(data); //turn the page into a jquery object
var div = content.find('#div'); // this is the div you want the content from
$('#container').html(div.html()); // this will set the content of the current div
});
});
I would move your script to the bottom of the page and replace it like so.
Original:
<script type="text/javascript">
$('#landing').load('source.html #container');
</script>
New:
<script type="text/javascript">
$(document).ready(function() {
$('#landing').load('source.html #container');
});
</script>
Note the space removal between source.html and #container.
I am using an external javascript file to call a function and it will not. i get function not defined in firebug too.
the name of the external js file is getpic.js
in the html, i put this in the header:
<script src="getpic.js" type="text/javascript">
</script>
php:
echo "<button id='sldkfj' onclick='hg();'>sdlkfj</button>";
js:
function hg()
{
alert("hello")
}
the file system is basically in one folder for wamp
this is all of getpic.js
function hg()
{
alert("hello")
}
for the php part
<html>
<head>
<script src="getpic.js" type="text/javascript">
</script>
</head>
<body>
<?php
echo "<button id='sldkfj' onclick='hg();'>sdlkfj</button>";
?>
EDIT-----
i also keep getting this in firebug:
Reload the page to get source for: http://localhost/iframe/getpic.js
Thanks
Edit:
add the code segment to the html page as a
<script type="text/javascript">
function hg()
{
alert("hello");
}
</script>
if still it doesnt work there should be something wrong with the browser.
(disabled java script) try a different browser
if it works,
obviously there's an error in linking the file.
on firebug go to the script panel and see whether it is loaded or not. (you can also use net panel as well)
try linking
<script src="/getpic.js" type="text/javascript">
if you are at the localhost(www) directory or the absolute path
<script src="/mytest/getpic.js" type="text/javascript">
add ; at the end of the alert() command
function hg()
{
alert("hello");
}
Try taking the script tag out of the head element and put it in the body. I've had this problem before and that's what fixed it for me.
I am building a website that uses PHP and JavaScript. I have a main menu that dynamically, when I click on a button it loads a page in the content div and runs its JavaScript script.
Now the problem is when I have loaded a JavaScript file and I go to another page that loads its contents in the same content div, the old JavaScript file that was included in the previous page is still loaded. Is there a way to prevent this.
JavaScript code:
$(".button").click(function(){
$("#content").empty();
$("#content").load("PHP/home.php");
});
PHP/home.php code
<html>
<head>
<title>test</title>
<script type="text/javascript">
$(document).ready(run);
function run(){
alert("test");
setTimeout(run, 500);
}
</script>
</head>
<body>
<h1>Homepage</h1>
</body>
the Jquery is loaded in the HTML that the content div is. And all the other buttons and PHP pages is being used the same way. When i load a new page the Alert function of the home.php is still going.
just have a clue because you haven't shown enough code
try clearing out the div with
document.getElementById("content").innerHMTL = "";
then adding other page content in it
I am requesting with AJAX (using jQuery) a tag which contains a Javascript function call to an Apache+PHP server. Here is the HTML and AJAX code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://localhost/LivingLab/javascript/jquery.min.js"></script>
</head>
<body>
<a href="javascript: void(0)" onclick="
$.post(
'http://localhost/test.php', // server target page
{some_var: 'abc'}, // data to be sent via POST method
function(data) { // JS callback function
$('#container').html(data); // innerHTML of <div id="container"> will be replaced
}
)
">Click me!</a>
<div id="container"></div>
</body>
</html>
AJAX requests the page 'http://localhost/test.php' which has the following PHP code:
<?php
echo '<script type="text/javascript"> document.write("Javascript output"); </script>';
?>
When I click on the link, after the AJAX request, the whole page is replaced by "Javascript output", instead of writing this only inside the div tag with id "container".
If the PHP server script writes something else, instead of a script tag like this:
<?php echo 'text' ?>
the AJAX call behaves normal, by replacing div with id "container" and not the whole page.
I tried to investigate HTTP data transfered by this pages with Wireshark and it doesn't seem to be an HTTP problem because server response is exactly how it should be:
<script type="text/javascript"> document.write("Javascript output"); </script>
Running the Javascript code without AJAX does not replace the whole page, this happens only when the script tag is returned using AJAX. A noticed the same behavior in Firefox 3 and 5 and also in Google Chrome.
Why does this happen?
document.write is normally used during the main load of the page, during which it outputs to the parsing stream that the browser reads to render the main page. If you use it after the initial load of the page is complete, it implicitly does an open on the document, which completely tears down the document and starts fresh with the newly-written content.
The short version is: Only use document.write during main page load (if then). After the page has loaded, use DOM manipulation instead.
Example (live copy):
<body>
<input type='button' id='theButton' value='Click Me'>
<script>
document.write(
"<p><code>document.write</code> is fine here, during " +
"the main load of the page.</p>");
document.getElementById("theButton").onclick = function() {
document.write(
"<p>But not here, because the initial " +
"page load is complete and using " +
"<code>document.write</code> at this point tears " +
"down the document and starts new one.</p>");
};
</script>
</body>
More about from the DOM2 HTML spec, the HTML5 spec, and MDC:
document.write: DOM2 | HTML5 | MDC
document.open: DOM2 | HTML5 | MDC(called implicitly by document.write if you call it once the page is loaded)
Because jQuery will recognise the javascript block and run it against the page, not the target container.
https://groups.google.com/forum/#!topic/jquery-en/tzu5n5k8Jp4
<script type="text/javascript"> document.write("Javascript output"); </script>
Why not just return "JavaScript Output" since you're altering the value of $('#container') anyway, there's no need to try to use an inline JavaScript document.write to write it out.