My question is very simple. I have some cycles within other cycles, however, let's imagine it's just one and I want to use a progress bar to only show the progress of this cycle.
I have here code that I am developing, in which I use UIKit, but that is making my head hurt because everything works except the progress bar.
The memory consumption is also a complete exaggeration, because through the task manager I see RAM being completely consumed!
The code I'm using is this:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="uikit3/css/uikit.min.css" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="uikit3/js/uikit.min.js"></script>
</head>
<body>
<progress id="progressbar" class="uk-progress" value="0" max="100"></progress>
<div id="information" style="width"></div>
<div id="information2" style="width"></div>
<?php
ini_set('memory_limit','16M');
$total = 1741768;
$x = 0;
for($n1=1; $n1 < 15; ++$n1)
{
for($n2=($n1+1); $n2<48; ++$n2)
{
for($n3=($n2+1); $n3<49; ++$n3)
{
for($n4=($n3+1); $n4<50; ++$n4)
{
for($n5=($n4+1); $n5<51; ++$n5)
{
++$x;
$percent = intval($x/$total * 100);
echo '<script language="javascript">document.getElementById("information").innerHTML="'.$percent.'"</script>';
echo '<script language="javascript">document.getElementById("information2").innerHTML="'.$x.'"</script>';
echo '<script>
jQuery(function () {
var animate = setInterval(function () {
window.progressbar && (progressbar.value = "'.$percent.'");
if (!window.progressbar || progressbar.value >= progressbar.max) {
clearInterval(animate);
}
},0);
});
</script>';
}
}
}
}
}
echo '<script language="javascript">document.getElementById("information").innerHTML="Chaves Geradas!"</script>';
?>
</body>
</html>
Related
The Idea
User will select examination date from dropdown list which is populated with data from the database.
After selecting the date, the system will display the list of examiners based on the selected date.
The user can now encode grades per student.
After encoding the grade, the user will click the 'save' button which the system will save to the database. (Multiple update)
This is the code where the user selects the exam date.
<?php
include '../configuration.php';
$queryselect = mysql_query("SELECT examdateno, examdate from tbl_examdate ORDER BY examdate DESC");
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>SPORT Qualifying Exam System</title>
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/component.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "encodeinterviewajax.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<header>
<img src="../images/qes_logob.png" alt="logo">
<button class="hamburger">☰</button>
<button class="cross">˟</button>
</header>
<div class="menu">
<ul>
<a href="encodeinterview.php">
<li>Encode Grades</li>
</a>
<a href="viewinterview.php">
<li>View Grades</li>
</a>
<a href="../index.php">
<li>Logout</li>
</a>
</ul>
</div>
<script>
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function () {
$(".menu").slideToggle("slow", function () {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function () {
$(".menu").slideToggle("slow", function () {
$(".cross").hide();
$(".hamburger").show();
});
});
</script>
<div id="content">
<form>
<h1>Exam Dates</>
<select name="examdate" id="examDate" onchange="showUser(this.value)">
<option>Select Exam Date</option>
<?php
while ($row = mysql_fetch_array($queryselect)) {
echo "<option value={$row['examdateno']}>{$row['examdate']}</option>\n";
}
?>
</select>
</form>
</div>
<div id="txtHint">Examinees will be listed here</div>
</body>
</html>
This is where the displaying and the update should happen.
<?php
include '../configuration.php';
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="../css/component.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css">
<link rel="stylesheet" type="text/css" href="../css/grid.css">
</head>
<body>
<?php
$q = intval($_GET['q']);
$sql = mysql_query("select s.sno, s.fname, s.lname, s.examdate, s.interviewgrade, s.gwa from student s inner join tbl_examdate e on s.examdate=e.examdate where e.examdateno=$q");
?>
<div class="as_wrapper">
<div class="as_grid_container">
<div class="as_gridder" id="as_gridder"></div> <!-- GRID LOADER -->
<form method="post" action="">
<table class="as_gridder_table">
<tr class="grid_header">
<td><div class="grid_heading">Student No.</div></td>
<td><div class="grid_heading">First Name</div></td>
<td><div class="grid_heading">Last Name</div></td>
<td><div class="grid_heading">Exam Date</div></td>
<td><div class="grid_heading">Interview Grade</div></td>
<td><div class="grid_heading">GWA</div></td>
</tr>
<?php
while ($row = mysql_fetch_array($sql)) {
?>
<tr class="<?php
$i+=1;
if ($i % 2 == 0) {
echo 'even';
} else {
echo 'odd';
}
?>">
<td><?php $sno[]=$row['sno'];echo $row['sno']; ?></td>
<td><?php $fname[]=$row['fname']; echo $row['fname']; ?></td>
<td><?php $lname[]=$row['lname'];echo $row['lname']; ?></td>
<td><?php echo $row['examdate']; ?></td>
<td><input type="text" size="3" maxlength="3" name="interview[]"></td>
<td><input type="text" size="3" maxlength="3" name="gwa[]"></td>
</tr>
<?php
}
?>
<tr>
<td colspan="6"><button id="btnUpdate">Save</button>
</tr>
</table>
</form>
<?php
if (isset($_POST['btnUpdate'])){
for($i=0;$i<sizeof($sno);$i++){
$interview = $_POST['interview'][$i];
$gwa = $_POST['gwa'][$i];
$sql1= mysql_query("UPDATE student SET gwa='$gwa', interviewgrade='$interview' where fname='$fname[$i]' AND lname='$lname[$i]' ");
header('Location: encodeinterview.php');
}
}
?>
</div>
</div>
</body>
As I mentioned in my comment I'm not sure what exactly is not working for you but I can help you with a couple of things in what I'm guessing to be your homework project.
First, always wrap all jQuery actions that affect DOM elements or add EventListeners to DOM elements in a document.ready function. This function is triggered when all the HTML of the page has been loaded to the DOM. Adding an event listener or trying to ".hide()" and element before it is loaded to the DOM will fail. There is the long way of calling the document.ready function:
$(document).ready(function(){
.... Code to manipulate the DOM goes here ...
});
and the shorthand function call that does exactly the same thing:
$(function(){
.... Code to manipulate the DOM goes here ...
});
If you need to wait until all the additional resources (e.g. images) are loaded you can use:
$(window).load(function(){
.... Your code goes here ....
});
This function is triggered when all resources are loaded. So if you're looking to get the position of an element or size of an element that contains images it's best to wait until the images are loaded. otherwise the position or size may well change once the images are loaded.
So your jQuery block needs to wrapped like this:
<script>
$(function(){
$(".cross").hide();
$(".menu").hide();
$(".hamburger").click(function () {
$(".menu").slideToggle("slow", function () {
$(".hamburger").hide();
$(".cross").show();
});
});
$(".cross").click(function () {
$(".menu").slideToggle("slow", function () {
$(".cross").hide();
$(".hamburger").show();
});
});
});
</script>
And for goodness sake if your using jQuery NEVER type 'document.getElementById'. The jQuery equivalent is $('#id'). Note the '#' means ID where the '.' means CLASS. It's much shorter and it creates the element as a jQuery object which allows you to use all of jQuery's wonderful functions on it.
If you're using jQuery anyway. You should use it for AJAX. It's much easier. Here's your same showUser function done with jQuery including error handling for the ajax call:
function showUser(str) {
if (str == "") {
$("#txtHint").html("");
return;
} else {
$.ajax({
url: "encodeinterviewajax.php?q=" + str,
type: 'GET',
success: function(data){
$('#txtHint').html(data);
},
error: function(jqXHR, textStatus, errorThrown){
console.log("Status = " + textStatus);
console.log("Error = " + errorThrown);
}
});
}
My page won't load at all, browser says its redirecting in a way that is not loading. As the title suggests I think the issue is with one of the php files I include with require_once(). Let me just show you:
thumbnail.php:
<?php
if(!function_exists("makethumbnail"))
{
//die("right before function definition");
function makethumbnail($src,$new_name,$new_width,$new_height)
{
die("inside makethumbnail");
$si = imagecreatefromjpeg($src);
$w = imagesx($si);
$h = imagesy($si);
$vi = imagecreatetruecolor($new_width,$new_height);
imagecopyresampled($vi,$si,0,0,0,0,$new_width,$new_height,$w,$h);
imagejpeg($vi,$new_name);
}
}
?>
checksession.php:
<?php
session_start();
$session_name = "forces";
$com=0;
if(!function_exists("logout"))
{
function logout()
{
$_SESSION = array();
session_destroy();
header('Location:http://cs4.sunyocc.edu/~j.d.dancks/index.php');
}
}
if(!isset($_SESSION['time']) || !isset($_SESSION['nick']))
{
$com=2;
logout();
}
else if($_SESSION['time'] < time())
{
$com=3;
logout();
}
//redirect back to main whatever ignore this line
?>
index.php:
<?php
require_once("shopsite/thumbnail.php");
require_once("shopsite/checksession.php");
die("made it past the require_once");
$con = mysql_connect('localhost','jddancks','csc255');
mysql_select_db('test',$con);
$q = mysql_query("select prod_name,image_name,type1,type2 from Product",$con) or die("its the mysql");
$row = mysql_fetch_assoc($q);
$totalRows_Recordset1 = mysql_num_rows($q);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Welcome to the shopsite</title>
<script type="text/javascript" src="shopsite/lib/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="shopsite/lib/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="shopsite/skins/ie7/skin.css" />
<script type="text/javascript">
JQuery(document).ready(function() {
JQuery('#mycarousel').jcarousel({
itemLoadCallback:itemLoadCallbackFunction,
start:1,
auto:3,
animation:"slow",
wrap:"both"
});
});
</script>
</head>
<body>
<?php
session_start();
if(isset($_SESSION['nick']))
{
echo "<p>Welcome, ".$_SESSION['nick']."</p>";
}
die("Made it past the first php");
?>
<h1>Welcome to the one-stop shop for your every need!</h1>
<div class="jcarousel-ie7">
<p>Browse Items:</p>
<div class="jcarousel-container">
<div class="jcarousel-clip">
<ul id="mycarousel" class="jcarousel-skin-ie7">
<?php
$cnt=1;
do
{
$i=$row['image_name'];
$name=preg_split("/.jpg/",$i);
$name = "shopsite/thumb/".$name[0]."-index.jpg";
if(!file_exists($name))
{
makethumbnail("shopsite/images/".$row['image_name'],$name,50,50);
}
echo " <li class=\"jcarousel-item-".$cnt."\"><img src=\"".$name."\" /></li>\n";
$cnt=$cnt+1;
if($cnt>12) die("cnt larger than 12");
}
while($row = mysql_fetch_assoc($q));
?>
</ul>
</div>
<div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
<div class="jcarousel-next"></div>
</div>
</div>
</body>
</html>
<?php mysql_free_result($row);
mysql_close($con); ?>
I want to insert images into a jquery carousel so a visitor can browse items they may want to purchase. I've never used jcarousel so I don't know if what I have works, I'm pretty sure thats not the problem. I guess its just one of those things you need a second pair of eyes for. The die statements in thumbnail.php make me believe that is the culprit, but it won't make it to the first line of the function, which is really confusing. I don't know how the php preporcessor works, other than its client-side.
I'd like to implement bigpipe in PHP using pcntl.
However, there is something wrong when I visit the web page from browser.
test.php
<html>
<head>
<script type="text/javascript">
function fill(id,content){ document.getElementById(id).innerHTML=content; }
</script>
</head>
<body>
<div id="1">loading...</div>
<div id="2">loading...</div>
<?php
$pids = array();
$pids[0] = pcntl_fork();
if($pids[0]==-1){
die("failed to fork\n");
}else if($pids[0] == 0){//child
sleep(1);
echo "<script type=\"text/javascript\">fill(\"1\",\"im txx\");</script>\n";
exit(0);
}else if($pids[0] > 0){//father
$pids[1] = pcntl_fork();
if($pids[1]==-1){
die("failed to fork\n");
}else if($pids[1] == 0){//child
echo "<script type=\"text/javascript\">fill(\"2\",\"im txx!\");</script>\n";
exit(0);
}else if($pids[1] >0){//father
while(pcntl_wait($status)!=-1);
}
}
?>
</body>
</html>
when I type command "php test.php" in shell, the output is correct:
<html>
<head>
<script type="text/javascript">
function fill(id,content){ document.getElementById(id).innerHTML=content; }
</script>
</head>
<body>
<div id="1">loading...</div>
<div id="2">loading...</div>
<script type="text/javascript">fill("2","im txx!");</script>
<script type="text/javascript">fill("1","im txx");</script>
</body>
</html>
But when I visit it by browser, the page source is unexpected:
<html>
<head>
<script type="text/javascript">
function fill(id,content){ document.getElementById(id).innerHTML=content; }
</script>
</head>
<body>
<div id="1">loading...</div>
<div id="2">loading...</div>
<script type="text/javascript">fill("2","im txx!");</script>
Why the rest of code disappeared?
You are exiting after printing:
exit(0);
this stops all execution of any code beyond this point
Remove the exit() command
basically I want php to decide which version of the site pieces to load
something along the lines of:
<?php
$sql="SELECT _1 FROM Player_Registry WHERE Player_Name = $_SESSION[user_name]";
$result_1=mysql_query($sql);
if($result_1 < 10) { ?>
<script type="text/javascript">
function setdescription_1() {
document.getElementById('title_box').innerHTML = 'Alchemist';
}
</script>
<?php
}
else {
?>
<script type="text/javascript">
function setdescription_1() {
document.getElementById('title_box').innerHTML = 'Master Alchemist';
}
</script>
<?php
}?>
issue is that they both run so even if I set the condition to true I still get the second.
The complete source which is identical to what is being viewed-as-source as far as I can tell but none of the php shows up in the site preview (it is actually there though because my other computer can view the site without seeing the php but when it views source it can see it which it shouldn't be able to):
<head>
<title>Blank</title>
<link rel="icon" type="image/png" href="Pictures/favicon.png">
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="owner" content="" />
<meta name="copyright" content="" />
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="TreeStyle.css" type="text/css" />
</head>
<body>
<div style="width:100%; height:12.5%;">
<p style="font-size: 300%;"><b>Skill Tree: Alchemist</b></p>
</div>
<div style="width:100%; height:75%;">
<?php
$sql="SELECT _1 FROM Player_Registry WHERE Player_Name = $_SESSION[user_name]";
$result_1=mysql_query($sql);
if($result_1 < 10)
{
?>
<script type="text/javascript">
function setdescription_1()
{
document.getElementById('title_box').innerHTML = 'Alchemist';
document.getElementById('desc_box').innerHTML = 'Turn surroundings into base element costs.';
}
</script>
<?php
}
else
{
?>
<script type="text/javascript">
function setdescription_1()
{
document.getElementById('title_box').innerHTML = 'Master Alchemist';
document.getElementById('desc_box').innerHTML = 'Equiped Philosopher's Stone allows bypass of element costs.';
}
</script>
<?php
}
$sql="SELECT _2 FROM Player_Registry WHERE Player_Name = $_SESSION[user_name]";
$result_2=mysql_query($sql);
if($result_2 < 10)
{
?>
<script type="text/javascript">
function setdescription_2()
{
document.getElementById('title_box').innerHTML = 'Learn Runes';
document.getElementById('desc_box').innerHTML = 'Create Runes and Cores up to Lv.<?php echo "$result_2" ?>';
}
</script>
<?php
}
else
{
?>
<script type="text/javascript">
function setdescription_2()
{
document.getElementById('title_box').innerHTML = 'Comprehension';
document.getElementById('desc_box').innerHTML = 'Create Runes and Cores up to Lv.10';
}
</script>
<?php
}
?>
<script type="text/javascript">
function cleardescription()
{
document.getElementById('title_box').innerHTML = 'Skill Name';
document.getElementById('desc_box').innerHTML = 'This is the skill description.';
}
</script>
<table>
<tr>
<td></td>
<td><img src="Alchemist.png" /></td>
<td><img src="Blank_Tile.png"/></td>
<td><a href='AddSkillPoints.php?skill=_2' onmouseover="setdescription_2()" onmouseout="cleardescription()"><img src="Learn_Runes.png"/></td>
etc..............
</table>
</div>
<div style="width:100%; height:12.5%;">
<b><p id="title_box" style="font-size: 150%;">Skill Name</p></b><br />
<p id="desc_box">This is the skill description.</p>
</div>
</div>
</body>
</html>
I do not believe you get both if your PHP is actually parsed.
If it is not parsed, you will see the code you pasted exactly as you pasted it if you look at the source of the web page
Make sure the php is parsed - if not, then that is the issue.
A script tag will generally not interfere with parsing unless you have to post processing that does not allow the tags - for example if you use some kind of framework where you are not supposed to enter php but instead some tokenised code
Here is a better example - note I moved the script to the head but did not optimise really - so the php can be more elegant if you get both values in one call and create an object array
<?PHP
$sql="SELECT _1 FROM Player_Registry WHERE Player_Name = $_SESSION[user_name]";
$result_1=mysql_query($sql);
$sql="SELECT _2 FROM Player_Registry WHERE Player_Name = $_SESSION[user_name]";
$result_2=mysql_query($sql);
%><html>
<head>
<title>Blank</title>
<link rel="icon" type="image/png" href="Pictures/favicon.png">
.
.
<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="TreeStyle.css" type="text/css" />
<script type="text/javascript">
var result1 = parseInt("<?PHP echo $result_1; ">,10);
var skillLevel = (result1>=10?'Master ':'')+'Alchemist';
var skillDesc = result1>=10?"Equipped with Philosopher´s Stone allows bypass of element costs.":"Turn surroundings into base element costs.";
var runeLevel = result2>=10?'Comprehension':'Learn Runes';
var runeDesc = 'Create Runes and Cores up to Lv.'+result2;
window.onload=function() {
setdescription_1();
}
function setdescription_1() {
document.getElementById('title_box').innerHTML = skillLevel;
document.getElementById('desc_box').innerHTML = skillDesc;
}
function setdescription_2() {
document.getElementById('title_box').innerHTML = runeLevel;
document.getElementById('desc_box').innerHTML = runeDesc;
}
function cleardescription() {
document.getElementById('title_box').innerHTML = 'Skill Name';
document.getElementById('desc_box').innerHTML = 'This is the skill description.';
}
</script>
</head>
I was trying to create a notifications system for a website with the following code :
setInterval(function() {
$.post('notifications.php', {
email: 123
}, function(data) {
});
}, 30000);
And the notifications.php :
$userid = $_SESSION[username];
$notifications = array();
$sql = "SELECT appreciation FROM ms_notifications WHERE email = '$userid' AND new = '1'";
$res = mysql_query($sql) or die(mysql_error());
if (mysql_num_rows($res)) {
while ($r = mysql_fetch_object($res)) {
$notifications[] = $r->appreciation;
}
$nb_result = mysql_num_rows($res);
}
$sql = "UPDATE ms_notifications SET new = '0' WHERE email = '$userid'";
mysql_query($sql) or die(mysql_error());
echo $nb_result;
Problem is that, as I'm new to jquery/Js, I don't know how to put the result inside of a div. For now it stays on the top of the page, above everything.
I tried that, inside the data function but not working... :
$('#test_app').html(data);
I guess it's a very stupid question but help would be really appreciated ! Thank you very much.
UPDATE : Here the HTML Code
<?php
session_start();
include ('connection/database.php');
include ('login_script.php');
include ('notifications.php');
if($logged_in){
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Home</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="ms.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/font_i/specimen_files/easytabs.js" type="text/javascript" charset="utf-8"></script>
<!-- FONT SCRIPT-->
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
$('#container').easyTabs({defaultContent:1});
});
</script>
<script type="text/javascript" charset="utf-8">
var scrollSpeed = 70; // Speed in milliseconds
var step = 1; // How many pixels to move per step
var current = 0; // The current pixel row
var imageHeight = 505; // Background image height
var headerHeight = 59; // How tall the header is.
//The pixel row where to start a new loop
var restartPosition = -(imageHeight - headerHeight);
function scrollBg(){
//Go to next pixel row.
current -= step;
//If at the end of the image, then go to the top.
if (current == restartPosition){
current = 0;
}
//Set the CSS of the header.
$('#main_logo').css("background-position","0 "+current+"px");
}
//Calls the scrolling function repeatedly
var init = setInterval("scrollBg()", scrollSpeed)
</script>
<!-- NOTIFICATIONS_SCRIPT !!!!!! -->
<script type="text/javascript" charset="utf-8">
setInterval(function() {
$.post('notifications.php', {
email: 123
}, function(data) {
});
}, 30000);
</script>
<style>
body{
font-family:SommetRoundedLight;
}
</style>
</head>
<body>
<div id="container">
<div id="header_contain">
<div id="test_app">
</div>
</div>
</div>
</body>
</html>
<?php }
else{
echo '<script language="javascript" type="text/javascript">
<!--
window.location.replace("connexion.php");
-->
</script>';
} ?>
Thanks again
Use .append() instead of .html()
Instead of
$('#test_app').html(data);
just use:
$('#test_app').html('<div>' + data + '</div>');
Seems to simple to be it. Am I missing something?