I have a php file that I load into another php file with jQuery. This works, but the moment I start using jQuery in the 'external file', I get ERROR 500.
The reason I used this approach is because this is handy to refresh the data after an AJAX function.
This I have:
test.php:
<script type="text/javascript" src="js/modernizr.custom.29473.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function () {
$(document).tooltip({
items: ".plupic , .ingr",
content: function() {
var element = $( this );
if ( element.is( ".plupic " ) ) {
var src = element.attr('src');
return "<img src='" + src + "' style='max-height: 300px; max-width: 300px;'>";
}
if ( element.is( ".ingr" ) ) {
var txt = element.text();
return txt;
}
}
});
$('#kasticket').load('cart.php');
});
</script>
</head>
<body>
<div class="container">
<div id="kasticket"></div><!-- Load data with jQuery-->
cart.php:
I just do a select from the database and write some data to a table with echo();
This works perfectly, but the moment I want to use jQuery, I goes all wrong...(I know this for sure because the jQUery works in a local html file and putting this line in comment makes my php working again)
echo("
<script>
jQuery(document).ready(function() {
if($('#L$MyAant').width() < 70) {
$('.TR1$MyAant').show();
$('.TR2$MyAant').hide();
}else{
$('.TR2$MyAant').show();
$('.TR1$MyAant').hide();
}
});
</script>
");
I have no idea what I'm doing wrong.
If its any help: http://www.itreflex.be/TestAcc/test.php (with currently the jQuery line in comment).
And this is cart.php, exported to txt, it was to long to paste here.
hard to tell without the full source code but I have got a couple of ideas:
First Error 500 should be the HTTP code for internal server error, which basically means that the error lies on the server, then on the PHP side.
Could it be possible that you are mixing up PHP and jQuery on some of your other statements not posted here?
Second, you missed a single quote on your line
$('#kasticket').load(cart.php');
In your cart.php remove the brackets after echo ... For example
echo "<script>
jQuery(document).ready(function() {
if($('#L$MyAant').width() < 70) {
$('.TR1$MyAant').show();
$('.TR2$MyAant').hide();
}else{
$('.TR2$MyAant').show();
$('.TR1$MyAant').hide();
}
});
</script>";
Try this above line in your cart.php and see if that works.
Related
I don't know if this is possible as i know php is server side and javascript is client side.
But i am trying to run this javascript code from an if isset inside a php page.
I am using this code:
<?php
if( isset($_POST['submit2'])){
echo "
<script type=\"text/javascript\">
$(document).ready(function(){
setTimeout(function () {
doWork();
window.location.reload();
}, 2000);
function doWork() {
$('#submit').trigger('click');
}
});
</script>";
}
?>
this javascript should click on the button named (submit) and it works fine if its not inside the PHP echo.. and I also checked to see if the if if( isset($_POST['submit2'])) actually returns a value and it does and it works as it should.
So, I don't know what the issue is here>
can some one please help me out with this?
I have always found it best to keep my main javascript/jquery code within the head tag and use php to check and set variables that allow my scripts to run; echoing a javascript boolean into my JS block using php. This way you know that the javascript is doing what it should natively and not worry about elements not being treated properly in the DOM.
So I would do this (I don't know the order in which you want things to happen so this might seem out of order but the principle should still be the same):
<?php
if( isset($_POST['submit2'])){
$varSet = "var set2 = 1;";
} else {
$varSet = "var set2 = 0;";
}
?>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type=\"text/javascript\">
$(document).ready(function(){
<?php echo $varSet; ?>
if(set2 == 1){
setTimeout(function () {
doWork();
window.location.reload();
}, 2000);
function doWork() {
$('#submit').trigger('click');
}
}
});
</script>
</head>
I'm building a web application inside CodeIgniter and I've decided to have a fiddle with jQuery and Javascript - something I've never really used before.
I have included jQuery in my header using Google Libraries:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
And now I'm fiddling with the SIMPLEST of jQuery but it's not working.
<p><?php if ($post->love) { echo $post->love; } else { echo 0; } ?></p>
<script type="text/javascript">
$("#lovecounter").click(function() {
alert("Click");
});
</script>
I am clicking on the lovecounter link but there is no alert. If I add simple javascript to the actual anchor tag it works though.
<p><?php if ($post->love) { echo $post->love; } else { echo 0; } ?></p>
Any ideas? What am I doing wrong?
Wrap your code in ready handler:
$(document).ready(function(){
$("#lovecounter").click(function() {
alert("Click");
});
});
Working Example
This works perfectly fine for me:
<p>asdf</p>
<script type="text/javascript">
$(document).ready(function() {
$("#lovecounter").click(function() {
alert("Click");
});
});
</script>
You should include a $(document).ready(function() {}); just like Sarfraz said. Otherwise, it would not find anything with an id of lovecounter because nothing on the page has loaded yet. If you wait for it to load, then it will find the element. Here is some documentation: http://www.w3schools.com/jquery/event_ready.asp. Here is a full jQuery lesson: http://www.codecademy.com/tracks/jquery.
I'm a bit new to Ajax.
I've got a Ajax file which includes a php file and refreshes it every X seconds. That code for AJAX.PHP is:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script language="JavaScript">
setInterval( "SANAjax();", 10000 ); ///////// 10 seconds
$(function() {
SANAjax = function(){
$('#dataDisplay').fadeOut("slow").load('rand.php').fadeIn("slow");
}
});
</script>
<div id="dataDisplay"></div>
This code is working fine.
Bbut the html of AJAX.PHP page shows as it is code, while I want the output html of rand.php not javascript code given above. How can i do it?
suppost "rand.php" html out put (source) is: < html >< body >this is body <\ body ><\ html >.
I want this html to be shown on the html source of AJAX.PHP.
How can i do it?
If I mess any thing let me know, I'll try to make it more clear.
You need to run it. Not insert only as file.
$.post("rand.php", { },
function(data) { $('#dataDisplay').html(data) });
updated:
SANAjax = function(){
$.post("rand.php", { },
function(data) { $('#dataDisplay').fadeOut("slow").html(data).fadeIn("slow"); });
}
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_rand').load('rand.php').fadeIn("slow");
}, 10000); // refresh every 10000 milliseconds
</script>
<div id="load_rand"> </div>
Don't forget to add the jquery library
learning Jquery and integrating with PHP - getting there, but have one last challenge in some code I'm working on.
I have HTML in a string, trying to pull html in tags, might be multiple elements in the HTML string, so trying to use each. My function worked fine without each, below is my each integration (returns nothing currently):
<?php
$info = '<li><strong>I want this text</strong></li><li><strong>I want this text too</strong></li>';
$info = json_encode($info);
?>
<script type="text/javascript">
$(document).ready(function () {
$("a", $( < ? php echo $info; ? > )).each(
function () {
alert($(this).html());
});
};
This code below does work, but only returns the first element in the HTML:
<?php
$info = '<li><strong>I want this text</strong></li>';
$info = json_encode($info);
?>
<script type="text/javascript">
$(document).ready(function () {
var output = $("a", $( < ? php echo $info; ? > )).html();
var link = $("a", $( < ? php echo $info; ? > )).attr("href");
alert(output);
alert(link);
});
</script>
This is a description and a working example of How to use .each() LINK
You can try this one as a example
$("a").each(function(index){alert($(this).html()});
Your code is not working because there are a few syntax issues.
First, change
< ? php echo $info; ? >
to
<?php echo $info; ?>
PHP doesn't like spaces and the opening and closing tags must appear without spaces.
Second, close the ready function and the script tag properly. Instead of
};
use,
});
</script>
Why are you encoding a piece of XML with JSON? That makes like no sense at all. Both are ways to encode data. HTML is XML too, btw. You can directly reference the $info variable since PHP will process everything first on the server.
<?php
$info = '<li><strong>I want this text</strong></li>';
?>
<script type="text/javascript">
$(document).ready(function() {
$("a", $("<?php echo $info; ?>")).each(
function () {
alert($(this).html());
}
);
});
Or just remove the temporary variable altogether. Makes it combersome to read, but that's essentially what PHP is doing.
$("a", $("<?php echo '<li><strong>I want this text</strong></li>'; ?>")).each(
Or to make it even simpler, since you already have the HTML, simply include it as part of the page and maybe give it an ID to make referencing it easier with jQuery.
<li id="myList">
<strong>I want this text</strong>
</li>
<script type="text/javascript">
$(document).ready(function() {
$("a", "#myList").each(function() {
alert($(this).html());
});
});
</script>
This last example gets rid of PHP completely, but you weren't really using it anyways.
Working on the same page as before,but now I'm using it as a playground for messing around with jQuery so I can learn it for my'boss.' Unfortunately, I can't get the javascript in this file to execute, let alone give me a warning. All of the PHP and HTML on the page work perfectly, it's just the script that's the issue. What am I doing wrong?
<?php
if( isset($_POST['mushu']) )
{
playAnimation();
clickInc();
}
function playAnimation()
{
echo "<img src='cocktail-kitten.jpg' id='blur'>";
}
function clickInc()
{
$count = glob("click*.txt");
$clicks = file($count[0]);
$clicks[0]+=1;
$fp = fopen($count[0], "w") or die("Can't open file");
fputs($fp, $clicks[0]);
fclose($fp);
echo $clicks[0];
}
?>
<html>
<head>
<title>Adobe Kitten</title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<form action="<?php $_SERVER['PHP_SELF']; ?>"
method="post">
<input type="submit"
value="Let's see what Mushu is up to."
name="mushu">
</form>
<script>
$(document).ready( function()
{
$('#blur').click( function()
{
$(this).blur( function()
{
alert('Handler for .blur() called.');
});
});
});
</script>
</body>
</html>
You're calling playAnimation() before your <html> tag, so your html is malformed. JQuery probably can't find the #blur element because it's not actually inside your web page, much less within the <body>.
Move the if( isset($_POST['mushu'])) ... block of code somewhere after the body tag.
Check FireBug's console, or FireFox' Error Console.
Verify that jquery.js is being included, and check your error console.
Otherwise, a few obvious errors which may or may not contribute to your javascript problems:
You're outputting HTML in playAnimation() before your opening HTML tag
Your form's action attribute is blank - you need <?= or <?php echo
Your script tags should read <script type="text/javascript">
Like Scott said you need to echo the div in the actual body of the page. Also, I think another problem you have is you're calling .blur which is the event when your mouse leaves the image. Since you have functions like animate I think you might actually be looking for .fade http://api.jquery.com/fadeOut/. Try something like:
<script>
$(document).ready( function()
{
$('#blur').click( function()
{
$(this).fadeOut('slow', function()
{
alert('All Done');
});
});
});
</script>