I have the following structure:
-uploadpage.html
-index.php
-resources
-jquery-1.4.2.min.js
On my index.php, I get the contents then output uploadpage.html through this code:
$output = file_get_contents("uploadpage.html");
echo $output;
My upload.html has the javascript at the bottom:
<script type="text/javscript" src="./resources/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(
function() {
callSomething();
}
);
function callSomething() {return true;}
</script>
However this results in an error "$ is not defined" which means that the jquery js file is not loaded. Any ideas?
change:
type="text/javscript"
to:
type="text/javascript"
jquery.1.4.2.min.js
jquery-1.4.2.min.js
If that was just a typo in your question, open up Firebug and look at the "Net" tab to see what the browser is actually trying to load, and what happens when it tries to do that.
Related
I found on stackoverflow how to use a php variable in jquery, but on my test page, it simply isn't working:
$('#q').keyup(function(e) {
var test = "<?php echo 'test123'; ?>";
alert(test);
});
The code above outputs "" literally in the box where I want it to say "test123". I tried using single quotes instead of double, other small changes ... Didn't get it to work. Am I missing something?
The code above sits in a .js file which is linked in a .php page, which is (again) linked in my index.php file via require_once.
You should not use PHP in javascript files (.js). Javascript and PHP are different languages. PHP works on the server-side and Javascript on the client-side.
You have to put this code in your <head> under the jquery.js file, like this:
<script type="text/javascript" src="link-to-jquery-file.js"></script>
<script type="text/javascript">
$('#q').keyup(function(e) {
var test = "<?php echo 'test123'; ?>";
alert(test);
});
</script>
Also make sure your file extension ends with .php
There is also an advanced solution for this, and that would be using the header() function. Save as javascript.php or someting Example:
<?php
header("Content-Type: text/javascript");
?>
$('#q').keyup(function(e) {
var test = "<?php echo 'test123'; ?>";
alert(test);
});
Then attach the file in your <head> like this:
<script type="text/javascript" src="javascript.php"></script>
Goodluck!
I am trying to load the output of a PHP script into a using JavaScript and JQuery. The JavaScript function I am using uses the $.get function in JQuery to call a php script, which I want to display in another division. The script I wrote is:
<script type="text/javascript">
function on_load() {
$(document).ready(function() {
alert('here');
$.get("http://localhost/dbtest.php", function(data){
alert('here too too');
$("uname").html(data);
});
});
}
</script>
The PHP script (dbtest.php) uses a simple echo statement:
echo "hello, world!!!";
I am getting the first alert here, but not the second. What Can I be doing wrong here?
I suppose uname is a ID, in that case you should use:
$("#uname").html(data);
You can add this to your php for debugging:
error_reporting(E_ALL ^ E_NOTICE);
ini_set("display_errors", 1);
Try also to remove http:// from your ajax call and use relative path instead.
The guys below pointed out that the selector is wrong. Indeed that's a problem, but I think that the real issue is that you don't get the second alert. Probably your php file localhost/dbtest.php is not accessible. What happen if you open localhost/dbtest.php in a new tab?
I think the problem is the path to your dbtest.php file. You are saying you seecond alert will not be displayed so your request must be wrong.
Try to copy your page into the same folder like dbtest.php open the page in your browser with http://localhost/yourfile.php
If this does not display both alert-boxes try the same with an open developer console (Chrome/IE = F12) and look if there are errors.
You say you are trying to make ajax requests to your localhost from a Phonegap application. Phonegap prevents making ajax requests to other domains by default. You must add localhost to whitelist. Here is more detail: http://docs.phonegap.com/en/1.9.0/guide_whitelist_index.md.html
Here you have a working example:
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div id="uname"></div>
<script>
function on_load() {
$(document).ready(function() {
alert('here');
$.get("http://localhost/dbtest.php", function(data){
alert('here too too');
$("#uname").html(data);
});
});
}
on_load();
</script>
Beware of the same-origin-policy. The page loading dbtest.php must be from the same origin, unless you grant other origins by adding a header from dbtest.php.
Try add some error handling to your code to better see what´s happening.
<script type="text/javascript">
function on_load() {
$(document).ready(function() {
alert('here');
$.get("http://localhost/dbtest.php", function(data){
alert('here too too');
$("uname").html(data);
}).fail(function () {
alert("failed");
});
});
}
</script>
I have the following script which brings up a dialog on my screen telling me there has been an error:
<script type="text/javascript">
var myFunc = function()
{
var html='<div class="cs-body">explanation of the error</div>';
$(html).csDialog();
return false;
};
</script>
I want this dialog to pop-up when my php script returns a "1" value for $error, like this:
if ($error==1) {
echo "<script type='javascript'>$(document).ready(myFunc)</script>";
}
Even if I leave the if-clause and just echo the script it doensn't do anything. Can somebody tell me what I'm missing here?
Thanks in advance!
try changing script type from 'javascript' to 'text/javascript'
that did the trick! thanks lostsource!
You need to make sure, this script fragment is output after the inclusion of jQuery.
Check if you javascript function is defined when running this
echo "<script type='javascript'>$(document).ready(myFunc)</script>
Include jQuery and your js function in the tag, just to see if it works.
PS: you should only add js script in the tag if they are necessary right away, else, added them at the bottom of the tag. Remember, the loading of js files blocks the loading of any other page resources
try this
<?php if ($error==1) { ?>
<script type="text/javascript">
$(document).ready(myFunc)
</script>";
<?php } ?>
Dins
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 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.