Here is my CSS:
#optionHotel{
display:none;
}
Here is my JavaScript:
function cb1(type){
switch(type){
case "hotel":
alert("hotel");
$("#optionHotel").css("display","block");
break;
}
}
Here is my Html:
<div id="optionHotel"> Some Element In here</div>
Start Script in 'Head Tag':
<?echo '
<script>window.onload = cb1("'.$orderType.'");</script>
'?>
<!--CSS-->
<link href="../../css/navigate.css" rel="stylesheet"/>
<link href="../../css/reservation.css" rel="stylesheet"/>
Passing data from php to js is ok because I have checked In the switchcase
with alert() it's ok but I don't know why .css display to block doesn't work
please advice, Thank in advance
Your code:
<script>window.onload = cb1("'.$orderType.'");</script>
will call the cb1() function immediately and try to assign its result as the window.onload handler. You see the alert because the function does run, but because it runs immediately from inside the head of the document the document body has not yet been parsed so the script can't find your element.
You need to assign an actual function as the handler, where that function will be run onload and at that point will call cb1():
<script>window.onload = function() { cb1("'.$orderType.'"); };</script>
Or, since you are using jQuery, and assuming you don't want to wait for images to load before calling your function, use a document ready handler:
<?echo '
<script>
$(document).ready(function() {
cb1("'.$orderType.'");
});
</script>
'?>
...or move the script to the end of the body and call your function directly:
<?echo '
<script>cb1("'.$orderType.'");</script>
'?>
Related
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.
What Im trying to do: Display a loading gif or text... at the very least show a black screen before and during the time the php is being executed.
What I have tried.
I have tested using flush () and I get nothing until the entire php process is finished. I dont particularly like this concept either but I'll take anything.
I am considering using two pages to accomplish this though the current project is nearly complete and would take some time to consolidate the scattered html/php code.
Currently I'm doing 3-simpleXML_load_file(), 1-include(), 1-file_get_contents()
I have javascript function plotting data from one of the simpleXML_Load_file()...
Im up for moving parts of the code to a different file but it's a big task. So id like some advise or suggestions on how to proceed.
If I need to elaborate more just ask!
Thanks,
JT
<html>
<head>
<?php
$lat = $_POST['Lat'];
$long = $_POST['Lon'];
$weather_hourly = simplexml_load_file('http:....lat='.$lat.'&lon='.$long.'');
?>
<script type="text/javascript">
<!--Plot function-->
$(function()
{
var d =
[
<?php
//Pulling in hourly data to plot temp vs time
$i=0;
$array=array();
while ($i<=100)
{
echo '['. (strtotime($weather_hourly->data->{'time-layout'}->{'start-valid-time'}[$i])*1000) .','.$weather_hourly->data->parameters->temperature->value[$i] .'],';
$value = $weather_hourly->data->parameters->temperature->value[$i];
array_push($array,$value);
$i++;
}
foreach ($array as $key => $value)
{
$value = (string) $value;
$min_sec_array[] = $value;
}
?>
</script>
</head>
<body>
<div id=graph>
</div>
</body
The main way you can accomplish this is by using AJAX and multiple pages. To accomplish this, the first page should not do any of the processing, just put the loading image here. Next, make an AJAX request, and once the request is finished, you can show the results on the page or redirect to a different page.
Example:
File 1 (jQuery must be included also), put this in the body along with the loader animation:
<script language="javascript" type="text/javascript">
$(function(){
var mydata = {};
$.post('/myajaxfile.php', mydata, function(resp){
// process response here or redirect page
}, 'json');
});
</script>
Update: Here is a more complete example based on your code. This has not been tested and needs to have the jQuery library included, but this should give you a good idea:
File 1: file1.html
</head>
<body>
<?php
$lat = $_POST['Lat'];
$long = $_POST['Lon'];
?>
<!-- Include jQuery here! Also have the loading animation here. -->
<script type="text/javascript">
$(function(){
$.get('/file2.php?Lat=<?php echo $lat; ?>&Lon=<?php echo $long; ?>', null, function(resp){
// resp will have the data from file2.php
console.log(resp);
console.log(resp['min_sec_array']);
console.log(resp['main']);
// here is where you will setup the graph
// with the data loaded
<!--Plot function-->
}, 'json');
});
</script>
<div id=graph>
</div>
</body
</html>
File 2: file2.php
I'm not sure if you needed the $min_sec_array, but I had this example return that as well as the main data you were using before.
$lat = $_POST['Lat'];
$long = $_POST['Lon'];
$weather_hourly = simplexml_load_file('http:....lat='.$lat.'&lon='.$long.'');
//Pulling in hourly data to plot temp vs time
$i=0;
$main = array();
$array=array();
while ($i<=100)
{
$main[] = array((strtotime($weather_hourly->data->{'time-layout'}->{'start-valid-time'}[$i])*1000), $weather_hourly->data->parameters->temperature->value[$i]);
$value = $weather_hourly->data->parameters->temperature->value[$i];
array_push($array,$value);
$i++;
}
foreach ($array as $key => $value)
{
$min_sec_array[] = (string) $value;
}
echo json_encode(array(
'min_sec_array' =>$min_sec_array,
'main' => $main
));
exit();
?>
I would recommend not to do this with plain html and php if u expect it modify the page after it is loaded. Because php is server side processing, so it is executed before the page is send to the user. U need Javascript. Using Javascript will enable u to dynamically add or remove html elements to or from the DOM tree after the page was send to the user. It is executed by the users browser.
For easier start I would recommend jQuery, because there are lots of tutorials on such topics.
JQuery
JQuery learning center
A small example:
HTML
<head>
<meta charset="utf-8" />
<title> </title>
<script type="text/javascript" src="js/lib/jquery-1.9.1.js"></script>
</head>
<body>
<h1>Addition</h1>
<div id="error_msg"> </div>
<div id="content">
<!-- show loading image when opening the page -->
<img src="images/loading.gif"/>
</div>
<script type="text/javascript">
// your script to load content from php goes here
</script>
</body>
this will be nothing more then the following until now:
adding the following php file
<?php
$num1 = $_GET['num1'];
$num2 = $_GET['num2'];
$result = $num1 + $num2;
echo '<p>Calculating '.$num1.' + '.$num2.' took a lot of time, but finally we were able to evaluate it to '.$result.'.</p>'
.'<p> '.$num1.' + '.$num2.' = '.$result.'</p>';
?>
wont change anything of the html, but adding javascript/ Jquery inside the HTML will be kind of connection between static html and server side php.
$(document).ready(function(){
$.ajax({ // call php script
url: 'php/script.php?num1=258&num2=121',
type:'GET',
timeout: 500,
contentType: 'html'
}).success(function(data){
// remove loading image and add content received from php
$('div#content').html(data);
}).error(function(jqXHR, textStatus, errorThrown){
// in case something went wrong, show error
$('div#error_msg').append('Sorry, something went wrong: ' + textStatus + ' (' + errorThrown + ')');
});
});
This will change your page to show the loading animation until the php script returns its data, like:
So you can setup the whole page in plain html, add some loading gifs, call several php scripts and change the content without reloading the page itself.
It is kind of nasty solution to your problem...
But this can work:
You work with those -
ob_start();
//printing done here...
ob_end_flush();
at the beginning you will create your rotating ajax gif...
Then you do all the processing and calculating you want...
At the end of the processing, just echo a small script that does a hide to your gif...
Depends on the exact need, maybe ajax can be more elegant solution.
In response to your conversation with David Constantine below, did you try using ob_flush()?
ob_start();
echo '<img src="pics/loading.gif">';
ob_flush();
// Do your processing here
ob_end_flush();
I think you don't have a problem with flushing your PHP output to the browser, but more likely with getting the browser to start rendering the partial html output. Unfortunately, browser behavior on partial html is browser-specific, so if you want something to work the same in any browser, the AJAX solution suggested in other answers is the better way to go.
But if you don't like that added complexity of a full AJAX solution, you can try to make your html output "nice" in the sense of providing some body output that can be formatted without needing the rest of the html output. This is were your sample code fails: It spends most of its time outputting data into a script tag inside the html header. The browser never even sees the start of the body until your PHP code has practically finished executing. If you first write your complete body, then add the script tag for the data there, you give the browser something to at least try to render whilst waiting for the final script to be completed.
I've found the same issue (albeit not in PHP) discussed here: Stack Overflow question "When do browsers start to render partially transmitted HTML?" In particular, the accepted answer there provides a fairly minimal non-AJAX example to display and hide a placeholder whilst the html file hasn't completely loaded yet.
I know this is an old question, but the answer provided in this page by rpnew is extremely clear and easy to adjust to your project's requirements.
It is a combination of AJAX and PHP.
The HTML page PHPAjax.html which calls the PHP script:
<html>
<head>
<script type="text/javascript">
document.write('<div id="loading">Loading...</div>');
//Ajax Function
function getHTTPObject()
{
var xmlhttp;
if (window.ActiveXObject)
{
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (E)
{
xmlhttp = false;
}
}
}
else
{
xmlhttp = false;
}
if (window.XMLHttpRequest)
{
try
{
xmlhttp = new XMLHttpRequest();
}
catch (e)
{
xmlhttp = false;
}
}
return xmlhttp;
}
//HTTP Objects..
var http = getHTTPObject();
//Function which we are calling...
function AjaxFunction()
{
url='PHPScript.php';
http.open("GET",url, true);
http.onreadystatechange = function()
{
if (http.readyState == 4)
{
//Change the text when result comes.....
document.getElementById("content").innerHTML="http. responseText";
}
}
http.send(null);
}
</script>
</head>
<body onload="AjaxFunction()">
</body>
</html>
The Background PHP Script PHPScript.php:
<?php
sleep(10);
echo "I'm from PHP Script";
?>
Save both files in the same directory. From your browser open the HTML file. It will show 'Loading...' for 10 seconds and then you will see the message changing to "I'm from PHP Script".
I am getting the following error from the chrome developer tool
Uncaught ReferenceError: searchRequests is not defined
searchProcess.php:174 onclick.
When I click on hyperlink produced from engine.php, I don't get the alert from the searchRequests function. I'm not sure what the problem is, I appreciate any advice given. Here is my code:
searchProcess.php
<?php
include '../include/engine.php';
?>
<html>
<head>
<script type="text/javascript" src="../jQuery.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
var instrID;
var cat;
$(window).load(function(){
});
var newheight = $(window).height();
function searchRequests(instr)
{
alert("in searchResults");
instrID = instr;
alert(instrID);
}
});
</script>
</head>
<body>
<?php
drawSearchResults($var1, $var2, $var3, $var3, $var4);
?>
</body>
</html>
engine.php
<?php
function drawSearchResults($var1, $var2, $var3, $var4, $var5)
{
while($row = mysql_fetch_assoc($result))
{
echo ("<tr>");
echo ("<td id='InstrumentID'><a href='javascript:void(0);' onclick='searchRequests($row[InstrumentID])'>$row[InstrumentID]</a></td>");
echo ("</tr>");
}
?>
The problem is that the function searchRequests is not in scope outside of the $(document).ready(). Move it outside of $(document).ready().
In general you shouldn't embed your javascript in the html. Much nicer:
$('#InstrumentID a').click(someFunctionThatIsInScope);
And you can put that code in the $(document).ready() block. In addition the function you call will get an event object that you can use to get any values you might need from the markup.
Because it is private. You are hiding it from global scope since it is inside the ready function. Do not use inline event handlers, use on() to attach events!
Is it possible to change this to display an element loaded later on in the document:
function tracksinfox_{$page_trackid}()
{
document.getElementById('tracksinfoxshow_{$page_trackid}').innerHTML = 'get stuff here';
}
In the place of "get stuff here", I would like to display a div by id, but the div is created later in the page load using PHP.
with jQuery's on(), you can add event handlers to elements which are added later to the document. http://api.jquery.com/on/
you can make the function perform after document ready by document.onreadystatechange:
document.onreadystatechange=function() {
if(document.readyState == 'complete'){
tracksinfox_{$page_trackid}();
}
}
or just use window.onload event simply;
window.onload = tracksinfox_{$page_trackid};
but there's one more thing you have to know, if you like to perform two or more function after document ready, you can do it like this:
run_after_document_ready( tracksinfox_{$page_trackid} );
run_after_document_ready( somethingelse );
run_after_document_ready( somethingelse2 );
function run_after_document_ready( callback ) {
callback_saver = window.onload;
window.onload = function (){
if ( typeof callback_saver == "function" ){
callback_saver();
}
callback();
}
}
or just use the jQuery
$(document).ready(tracksinfox_{$page_trackid});
$(document).ready(somethiselse);
$(document).ready(somethiselse2);
NOTICE: window.onload has a little different with document.ready, for more information, you should to find the documents about window.onload, document.onreadystatechange and the jquery document ready.
How about using jQuery and doing something like the following. It establishes a callback method that will be called when a new element with id="info" is added to the DOM, then it adds a new DIV with id="info", which causes the callback function to be executed. The callback function unregisters itself (thus it will only ever be called once), then sets the update-me DIV's text based on the new DIV.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div id="update-me">I will be updated.</div>
<script language="javascript">
jQuery(function ($) {
$("body").on("DOMNodeInserted", "#info", function(e){
$("body").off("DOMNodeInserted", "#info");
$("#update-me").text( $(e.target).text() );
});
$("body").append("<div id='info'>I have changed.</div>");
});
</script>
</body>
</html>
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>