I am writing again on a little import script which I have to split because of the data amount.
So I have a start.php with the fancy ajax action and the dbactions.php doing all the hard work.
The script first initializes the data, checks for doubles and creates a session with ids.
Then it should go through the ids in batches.
On first call the start.php has no errors, and the first part of the script runs well, in creates the user session with an array over 12k ids.
But when I output the result of the second initialize, it gives the the error message of
Uncaught SyntaxError: Unexpected token }
See screenshot attached:
The dbactions.php itself gives no error despite the missing $do variable, and the start.php at first load also not.
The start.php looks like this:
<?php
header('Content-Type: text/html; charset=utf-8');
session_start();
$_SESSION['start_counter'] = 0;
$_SESSION['batches'] = 1;
$_SESSION['array_counter'] = 0;
$_SESSION['batchcount'] = 0;
$_SESSION['newsletter'] = 0;
?>
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>DB-actions</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="main.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
function DoSomething(what){
var request = $.ajax({
url: "dbactions.php?do=" + what,
type: "GET",
dataType: "html"
});
$('#godosomething').attr('disabled','true');
$('#doing').show();
$('#callmsg').empty();
$('body').addClass('grey');
request.done(function(msg) {
$('#doing').hide();
$("body").removeClass("grey");
$("#callmsg").html(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
</script>
<style type="text/css">
padding, margin: 0;
body { padding:20px 0;}
p { padding-bottom:3px;}
#callmsg { margin:50px 0; }
#insertmsg { margin:50px 0; }
#doing { display:none; position:absolute; bottom:48%; right:48%; border: 1px solid green; padding: 20px; background-color:green; color: white;}
.grey { background-color: grey; opacity: 0.5;}
.green { color:green; }
</style>
</head>
<body>
<h1>Start the import</h1>
<button type="button" onclick="DoSomething('initialize')" id="godosomething">Go baby</button>
<div id="callmsg"></div>
<div id="doing">I am working, please wait...</div>
</body>
</html>
I know there are several threads about it, the suggestions where, that the charset is wrong (not as excepted from ajax), but I have this on each file:
header('Content-Type: text/html; charset=utf-8');
And there was a suggestion about the ' and the " marks, I tried to change them in the output, but it did not help.
I thought also of the long output of the print_r, but disabling it didn't help.
This is the second output:
echo '<h2>Batch successfull</h2>';
$_SESSION['start_counter'] = $_SESSION['start_counter'] + $numberofqueries;
$_SESSION['batches']++;
echo "<p>Next? <button type='button' onclick" . "='DoSomething('makearray')" ."id='godosomething'>Go baby</button></p>";
echo '<p>Batch'.$_SESSION['batches'].' from '.$_SESSION['batchcount'].'</p>';
echo '<pre>';
print_r($_SESSION['users']);
echo '</pre>';
ADDITIONAL EDIT
I uncommented the whole second output until the h2 echo, and it still give me the same error.
How can this be? So the error comes not from the second output?
you are not qouting this correctly.
'DoSomething('makearray')'
should be:
"DoSomething('makearray')"
And in php:
echo "<p>Start first? <button type='button' onclick" . "='DoSomething('makearray')" ."id='godosomething'>Go baby</button></p>";
Your CSS is invalid. Try this.
<style type="text/css">
padding { margin: 0;}
body { padding:20px 0;}
p { padding-bottom:3px;}
#callmsg { margin:50px 0; }
#insertmsg { margin:50px 0; }
#doing { display:none; position:absolute; bottom:48%; right:48%; border: 1px solid green; padding: 20px; background-color:green; color: white;}
.grey { background-color: grey; opacity: 0.5;}
.green { color:green; }
</style>
You have an error on your second button.
Change this
<button type="button" onclick="DoSomething(" makearray")"="" id="godosomething">Go baby</button>
To this
<button type="button" onclick="DoSomething('makearray')" id="godosomething">Go baby</button>
Change This -
echo "<p>Next? <button type='button' onclick" . "='DoSomething('makearray')" ."id='godosomething'>Go baby</button></p>";
To-
echo "<p>Next? <button type='button' onclick=DoSomething('makearray') id='godosomething'>Go baby</button></p>";
And let me know if it clicks or not.
EDIT--
Remove any dummy spaces/content from your file.
Change <!DOCTYPE> to <!DOCTYPE html>
Related
I can't understand why my css file is not working whenever I make some changes in it. The codes that I entered before are working properly but whenever I change the code it doesn't shows up.
<?php
session_start();
?>
<?php
include "dbt_connect.php";
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Movies&Stuff</title>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous"></script>
<link rel="stylesheet" href="FontAwesome/css/fontawesome-all.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="index.css">
<style>
#footer{
width: 100%;
height: 100px;
margin-bottom: 0px;
background-color: gray;
text-align: center;
color: white;
}
#footer pre{
padding-top: 50px;
font-size: 16px;
}
#footer a{
color: white;
text-decoration: none;
}
</style>
<script type='text/javascript' src='//platform-api.sharethis.com/js/sharethis.js#property=5b0ae82b461c9500119099e0&product=sticky-share-buttons' async='async'></script>
</head>
<body>
<header id="top_header" style="margin-top: 20px">
<div class="clear">
<h1 id="logo">Movies<span id="and">&</span>Stuff</h1>
<nav id="main_nav">
<?php
if (isset($_SESSION['user_id'])) {
echo '
<i class="fa fa-bars"></i>
Movies
TV Series
About Us
Contact Us
<form action="Includes/logout.inc.php" method="POST" style="float:right; margin-right:1em; border:none;">
<button type="submit" name="submit" style="background-color:black; border:none; color: #A5A5A5FF; font-size:17px;outline-style:none;">Logout</button>
</form>';
}else{
echo '
<i class="fa fa-bars"></i>
Movies
TV Series
About Us
Contact Us
<span class="login" style="margin-right: -1em;">Login</span> | <span class="signup">Signup</span>';
}
?>
</nav></div>
This is my php file code, I added a bar in the menu using font awesome and made it to display none in my css external file, but it just shows up. I can't understand why my css file is not working on my any other php files. I'm running it on localhost. I tried restarting it but nothing found.
*{
margin:0 auto;
}
body{
font-family: sans-serif;
background-color: black;
color:#A8A8A8FF;
}
h1 h2 h3 h4 h5 h6{
font-weight: 500;
}
.clear{
clear: both;
}
#top_header{
height: 150px;
}
.menu{
display: none;
}
#logo{
float:left;
padding: 20px;
text-transform: uppercase;
color: white;
}
#and{
font-weight: normal;
}
#main_nav{
float: right;
padding: 30px;
#main_nav a{
color: #A5A5A5FF;
margin-right: 1em;
text-decoration: none;
}
.search{
display: inline-flex;
font-size: 20px;
width: 97%;
}
.searchterm{
width: 97%;
font-size: inherit;
border: 0.1em solid #6D6D6DFF;
border-radius: 0.5em 0 0 0.5em;
padding:0.2em 0.5em;
margin-left: 20px;
outline-style: none;
transition: 1s all;
}
.search-btn{
font-size: inherit;
border: 0.1em solid #6D6D6DFF;
border-radius: 0 0.5em 0.5em 0;
cursor: pointer;
outline-style: none;
width: 100px;
}
.search-btn i{
color: #6B6B6BFF;
}
.searchterm:focus{
border:0.1em solid #C6C6C6FF;
}
This is my external css code, I've added display:none for the class menu under the top header but I'm still getting nothing. This problem occurred me last time when I was making footer but it didn't worked so I did it in the internal css. please help me sort out this thing.
Cache issue.
Try changing
<link rel="stylesheet" href="index.css">
to
<link rel="stylesheet" href="index.css?v=<?php echo time(); ?>">
This will force the CSS to reload.
So I had this problem that my CSS code was working fine but when I deleted or added something it did not change on the site and I found a pretty easy solution for this that worked for me:
Just press: Ctrl + F5
This is called a "hard refresh" it worked for me on Windows, and with Chrome browser, if you use something else try this site: link
This is a little bit old question but I got the same problem now and I figured maybe I can help someone.
its probably a cache issue, just delete all browsing data's, history, cache, cookies, e.t.c and then close the browser and open again, it should fix the problem as it fixed mine.
But the best way to actually fix this problem is by calling the css file with php. i recommend calling your css stylesheet with php because, if your website is online , you can't tell all your users to delete their browsing data every time you apply a change on the website
its very simple, first you write the style tag then call the css file with php.
<style>
<?php include "style.css" ?>
</style>
The problem : My browser can't access my modified CSS file
The reason : My browser have cache this file (browser already have this file, he will not ask again for it).
Solution 1 - on development environment
Refresh the cache of your browser (on firefox and Chrome ctrl+maj+R). But you can't do that on production (you can't control the browsers of your clients)
Solution 2 - on production environment
Change the path of your file when you update them. The best way seems to add an argument like below
<link rel="stylesheet" href="index.css?v=1">
And change it on every production modification
<link rel="stylesheet" href="index.css?v=2">
You could use a variable instead making the changing easy for multiple files changes. But remember each time you modify the path of your CSS, all of your client will ask again for this resource. For example, don't use time() as value or it will cancel any caching of your website's clients (increase server charge).
It will apply the same on JS files and any other resource than can be cache by browser.
For me solved this:
Before: <link rel="stylesheet" href="/css/style.css">
After: <link rel="stylesheet" href="css/style.css"> //Removed slash before css folder.
I faced the same problem when I was making my first Php project. I used relative paths and changed the CSS file by making new file and linking that new file in index.php file. This Worked for me.
<link href="./styles.css" rel="stylesheet">
Similar to #Varinderjit Kaur's answer, I had placed my css files in a sibling directory with a relative path (e.g. ../css/styles.css). This directory was unreachable by the client browser and thus could not be displayed. Moving the css/ directory under the webroot (or html) directory instead of beside id made it resolvable by the client browser. Additionally, the link then used an absolute path instead of a relative path (e.g. <link rel="stylesheet" type="text/css" href="/css/styles.css">).
The cache was definitely the issue with me. If you use Chrome as your browser, in Chrome developer tools settings, choose Disable Cache (While DevTools is open) under the Network section.
using Ctrl + f5 will update the css easily
const raq = document.querySelector("#raquette");
const ball = document.querySelector("#ball");
const sc = document.querySelector("#score");
const go = document.querySelector("#gameover");
const ta = document.querySelector("#tryagain");
let score = 1;
let by = 0;
let rx = 0;
function bar_move (e){
console.log(e) ;
if(e.key == "ArrowRight"){
rx+=10;
raq.style.left = rx + "px";
if(raq.style.left == "600px"){
raq.style.left = "0px";
rx = 0;
}
}
else if(e.key == "ArrowLeft"){
rx-=10;
raq.style.left = rx + "px";
if(raq.style.left == "-60px"){
raq.style.left = "540px";
rx = 540;
}
}
}
document.addEventListener('keydown',bar_move)
const randomLocalisation = () => {
return Math.random()*550;
}
let bx = randomLocalisation();
function ball_move(e){
by+=10
ball.style.left = bx + "px"
ball.style.top = by + "px"
if(ball.style.top == "550px"){
clearInterval(mball)
ball.style.display = "none"
raq.style.display = "none"
sc.style.display = "none"
go.style.display = "block"
ta.style.display = "block"
}
else if(ball.style.top == "540px" && bx<(rx+60) && bx>(rx-60)){
ball.style.top = 0 + "px"
sc.textContent = score
score +=1
by = 0;
bx = randomLocalisation();
}
}
const mball = setInterval(ball_move, 100)
const trya = (e) => {
go.style.display = "none"
ta.style.display = "none"
ball.style.display = "block"
sc.style.display = "block"
raq.style.display = "block"
score = 0
by = 0
mball = setInterval(ball_move, 100)
}
ta.addEventListener('click', trya)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
</head>
<body>
<form method="POST">
username: <input type="text" name="username"><br>
password: <input type="password" name="password"><br>
<input type="Submit" name="Submit" value="Log in">
</form>
<?php
require_once "users0.php" ;
session_start() ;
if(isset($_POST['Submit'])){
$u = $_POST['username'] ;
$pw = $_POST['password'] ;
if($data[$u] == $u && $data[$u] == $pw){
header('location:../index.php') ;
exit();
}
else
echo "invalid Password/Username !" ;
}
?>
</body>
</html>
I have faced the similar problem, my solution is change the name of your css file, for example your previous css file name is index.css, change it into newindex.css, and don't forget to edit the name of your css file in your html too. I hope it will work, It worked for me.
Hi I am trying to make a autocomplete function where I use a search field and write the first letters of the name of a company. the code vill search an online database for the company and there will be a list of suggestions. for example
company1 street1 zipcode etc.
company2 astreet2 zipcode etc.
company3 street1 zipcode etc.
I will click on one of the listed companies and it vill populate field1 with company1 field2 street field3 zipcode etc. but I cant make it. I dont reallt know how to do this and Im trying to learn and understand but this is too complex for me so I hope any of you guys can hekp me - thanks in advance.
This is how my code looks like so far.
main page:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link href="layout.css" rel="stylesheet" type="text/css">
<link href="menu.css" rel="stylesheet" type="text/css">
</head>
<style>
.kundsok {
border: 1px solid #a8d4b1;
background-color: #c6f7d0;
margin: 2px 0px;
padding: 40px;
border-radius: 4px;
}
#ftg-list {
float: center;
list-style: none;
margin- top: -3px;
padding: 0;
width: 190px;
}
#ftg-list li {
padding: 10px;
background: #f0f0f0;
border-bottom: #bbb9b9 1px solid;
}
#ftg-list li:hover {
background: #ece3d2;
cursor: pointer;
}
#search-box {
padding: 10px;
border: #a8d4b1 1px solid;
border-radius: 4px;
}
</style>
<script src="jquery-3.2.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#search-box").keyup(function() {
$.ajax({
type: "POST",
url: "readkund_eniro.php",
data: 'keyword=' + $(this).val(),
beforeSend: function() {
$("#search-box").css("background", "#FFF url(LoaderIcon.gif) no-repeat 165 px ");
},
success: function(data) {
$("#suggesstion-box").show();
$("#suggesstion-box").html(data);
$("#search-box").css("background", "#FFF");
}
});
});
});
function selkund(val, val2) {
$("#search-box").val(val);
$("#foretag_name").val(val);
$("#stad").val(val2);
$("#suggesstion-box").hide();
}
</script>
<body>
<div id="sidlayout">
<div id="content">
<?php include "menukunder.php"; ?>
<div class="kundsok">
<center>
<input type="text" id="search-box" name ="search-box" placeholder="kund" >
<div id="suggesstion-box"></div>
</form>
<h1></h1>
<H3></H3>
<center>
<form action="sida3ka.php" method="post">
<fieldset>
<label title="Skriv in företagets namn" for="foretag_name">Företag:</label>
<input type="text" name="foretag_name" id="foretag_name">
<label title="Skriv in stad" for="stad">Stad:</label>
<input type="text" name="stad" id="stad">
</fieldset>
</form>
</div>
</div>
</body>
</html>
on the other page called readkund_eniro.php the code looks like this
$url = 'https://api.eniro.com/cs/search/basic?profile=Martens&key=3653823918839001013&country=se&version=1.1.3&search_word
=' . $_POST["keyword"] . '&geo_area=stockholm';
$response = file_get_contents($url);
$json = json_decode($response, true);
if(!empty($json)) {
?>
<ul id="ftg-list">
<?php
foreach($json['adverts'] as $ftg) {
?>
<li onClick="selkund('<?php
echo $ftg["companyInfo"]['companyName'];
echo $ftg["address"]['streetName'];
?>');"><?php
echo $ftg["companyInfo"]['companyName'];
?>
</li>
<?php
}
?>
</ul>
<?php
}
I the database respons will be
$ftg["companyInfo"]['companyName']
$ftg["address"]['streetName']
$ftg["address"]['postCode']
and so on. thanks again
Best regards Johan
i think there is problem in API url at readkund_eniro.php file. can you please try with as below.
$url = "https://api.eniro.com/cs/search/basic?profile=Martens&key=3653823918839001013&country=se&version=1.1.3&search_word=".$_POST['keyword']."&geo_area=stockholm";
another thing i found with your response text inside
<li onClick="selkund('<?php echo $ftg["companyInfo"]['companyName'];?>', '<?php echo $ftg["address"]['streetName'];?>');"><?php
echo $ftg["companyInfo"]['companyName']. ', '. $ftg["address"]['streetName'].', '. $ftg["address"]['postCode'] ;
?>
</li>
When I try to add a jQuery click animation to my submit button it starts the animation however, quickly resets because the form submits and refreshes the page. If the form is wrapped by a div, the animation works fine but then the form doesn't submit after the animation is complete. How can I have it submit the form after the animation has completed and keep the animation from reseting after form-submission. I'm new to PHP and jQuery and can't figure out how to do it. Here is what I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
body
{
background-color: lightgrey;
height: 100%;
width: 100%;
overflow: hidden;
}
.PSolCanvas
{
transform: translate(-50%, -40%);
z-index: 1;
position: absolute;
left: 50%;
top: 88.5%;
background-color: transparent;
min-height: 100%;
}
.PSol
{
width: 120px;
height: 120px;
margin: 0 auto;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
font: 15px arial;
color: black;
border: 1px solid lightgray;
background: #20AC20;
}
</style>
<script rel = "javascript" type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".PSol").click(function() {
$(".PSolCanvas, .TSolCanvas").animate({top: "50%"});
});
});
</script>
</head>
<body>
<?php
$username = "username";
$password = "password";
$host = "host";
$db = $username;
if(isset($_POST['PSol']))
{
$connection = mysqli_connect($host, $username, $password, $db);
$sql = "UPDATE table SET column='' WHERE id = 1";
if (mysqli_query($connection, $sql)) {
echo "Record successfully changed.";
}
else{
echo "Error: " . $sql . "<br>" . mysqli_error($connection);
}
mysqli_close($connection);
echo "<p>Disconnected from server: ".$host."</p>";
}
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method = "post" class = "PSolCanvas">
<input type = "submit" name = "PSol" class = "PSol" value = "P"/>
</form>
</body>
</html>
You will want to try doing a callback on the animation so the submit will happen when it's done. Something like:
<script type='text/javascript'>
$(document).ready(function(){
$(".PSol").click(function(e) {
// You will want to prevent the natural submission of the form
e.preventDefault();
// Notice the function attached to the `.animate()`.
// This will fire after the animation is done.
$(".PSolCanvas, .TSolCanvas").animate({top: "50%"},function(){
$('.PSolCanvas').submit();
});
});
});
</script>
EDIT: Here is an ajax version, I have made it a little complex because you may want to reuse the ajax elsewhere in your site, but you really only need the content inside the this.ajax part. The order of the script is important since this particular example calls itself (calling another page for the ajax would be better). Everything else (separating things into their own pages) is just suggestion:
/config.php
<?php
// Make some defines
define("DB_USERNAME",'username');
define("DB_PASSWORD",'password');
define("DB_HOST",'host');
define("DB_DATABASE",'database');
/functions/myfunctions.php
<?php
// Make some functions to make things cleaner/universal
function connection()
{
return mysqli_connect(DB_HOST, DB_USERNAME, DB_PASSWORD, DB_DATABASE);
}
// Make a function that you can reuse
function updateTable($val,$con)
{
return (mysqli_query($con, "UPDATE table SET column='' WHERE id = {$val}"));
}
/index.php (whatever this page is called)
<?php
// Include above assets
require_once(__DIR__.'/config.php');
require_once(__DIR__.'/functions/myfunctions.php');
// This should run only on the ajax call
if(!empty($_POST['PSol'])) {
// Get the connection
$con = connection();
// Set common text
$disc = "<p>Disconnected from server: ".DB_HOST."</p>";
// Run the update
if(updateTable(1,$con))
// If success
$response = json_encode(array('msg'=>"Record successfully changed. {$disc}"));
else
// If fail
$response = json_encode(array('msg'=>"Error: {$sql}<br>".mysqli_error($con).$disc));
// Close connection
mysqli_close($con);
// Stop further processing of page
// If you don't stop processing, you will send back the rest of the
// page below and will malform your json
die($response);
}
?><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
body
{
background-color: lightgrey;
height: 100%;
width: 100%;
overflow: hidden;
}
.PSolCanvas
{
transform: translate(-50%, -40%);
z-index: 1;
position: absolute;
left: 50%;
top: 88.5%;
background-color: transparent;
min-height: 100%;
}
.PSol
{
width: 120px;
height: 120px;
margin: 0 auto;
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
font: 15px arial;
color: black;
border: 1px solid lightgray;
background: #20AC20;
}
</style>
<script rel = "javascript" type = "text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
// This is an object to contain your ajax app
var AjaxEngine = function()
{
// Set some common containers
var url;
var useURL;
// This function will set where to point the ajax call
this.useUrl = function(url)
{
useURL = url;
return this;
}
// This is the actual jQuery ajax call
this.ajax = function(useData,func)
{
// Create jQuery ajax
$.ajax({
// Use our previously-set url
url: useURL,
// This is the data to send to our page
data: useData,
// Send the data by POST method
type: 'post',
// When the post is successful
success: function(response){
// Use an anonymous function
func(response);
}
});
}
}
$(".PSol").click(function(e) {
// Set the form
var thisForm = $('.PSolCanvas');
// Get the values from the form
var useData = thisForm.serialize();
// Stop from submission
e.preventDefault();
$(".PSolCanvas, .TSolCanvas").animate({top: "50%"},function(){
// Create instance of our ajax object
var Ajaxer = new AjaxEngine();
// Set the url (in this case we are getting the action=""
// from the form tag)
// The "useData" param is the form data
// The second param is the function we want to run when
// the ajax successful
Ajaxer.useUrl(thisForm.attr('action')).ajax(useData,
function(response) {
// Try, just incase the code produces an error and
// malforms the json response
try {
// Parse the return json_encode()
var json = JSON.parse(response);
// Send the message to the container
$('#writespot').html(json.msg);
}
catch (Exception) {
// This will catch any error, so
// make sure your console is open to review
console.log(Exception.message);
console.log(response);
}
});
});
});
});
</script>
</head>
<body>
<!-- This is where the response message will be written to -->
<div id="writespot"></div>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" class="PSolCanvas">
<input type="submit" name="PSol" value="P" class="PSol" />
<input type="hidden" name="PSol" value="P"/>
</form>
</body>
</html>
You want to submit the form after the animation has run. To do that you need to prevent the default 'submit' and then add your own using a callback function on the jQuery animate call.This will only call the .submit() after the animation has finished. Something like (Please note I haven't had a chance to check this code but it should give you the general idea:
$(document).ready(function(){
$(".PSol").click(function(e) {
e.preventDefault();
$(".PSolCanvas, .TSolCanvas").animate({top: "50%"},
function() {
$("form").submit();
}
);
});
});
Here I am using drag and drop in jQuery.
I get the set of questions and set of answers from Database in array(article->question, article->answers), where answers be drag and dropped in the questions text box. On refresh the page the dragged values are comes to the original place not in that particular text box were I dropped.
Here My coding.
<html>
<head>
<meta charset="utf-8" />
<title>jQuery UI Draggable - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<!--<link rel="stylesheet" href="/resources/demos/style.css" /> -->
<style>
/*#draggable { width: 50px; height: 20px; padding: 0.5em; } */
.drag_ans {
background: none repeat scroll 0 0 transparent;
border: 0 none;
width: 100px;
}
#draggable {
width: 50px;
height: 20px;
background: white;
}
#droppable {
float: left;
margin: 50px;
width: 500px;
height: 300px;
border: green;
}
#ques {
background: none repeat scroll 0 0 #FFFFFF;
padding: 10px;
width: 100px;
}
</style>
<script>
$(document).ready(function(){
$("#answer").click(function(){
// alert('find a score');
});
});
</script>
</head>
<body>
<div class="container_inner">
<?php
foreach($data as $article)
{
echo "<p>";
echo "<b>";echo $article->article_name;
echo"</b>";
echo "</p>";
echo "<p>";
echo $article->description;
echo "</p>";
echo $article->video; echo "<br>";
}
?>
<?php
$add=1;
foreach($question as $article)
{
?>
<!-- <div id="drop"> -->
<p>
<?php echo $article->question; ?>
<input type ="text" id="ques_<?php echo $add; ?>" name="" class="ui-widget-content" />
</p>
<!--</div> -->
<?php
$add++;
}
?>
<?php
$counter=1;
foreach($question as $article)
{
?>
<script>
$(function() {
$("#draggable_<?php echo $counter; ?>").draggable({ revert: 'invalid' });
$("#ques_<?php echo $counter; ?>").droppable({
drop: function( event, ui ) {
$(this).addClass( "ui-state-highlight" ).find( "p" ).html( "Dropped!" );
}
});
});
</script>
<div id="draggable_<?php echo $counter; ?>" class="ui-widget-content drag_ans">
<p>
<?php echo $article->answer; ?>
</div>
</p>
<?php
$counter++;
}
?>
<p> <input class="green_but" type="submit" name="NEW_SUBMIT" value="Submit" id="answer"/> </p>
</div>
</body>
</html>
Drag and Drop working fine and on refresh the page values all empty in the question text box.
How to validate question and answer in jquery as this answer should store in DB after it dropped the question text box. And when clicking submit button, if answer to the question wrong the score should reduce. EX: If user answer set correct answer 4 out of 10 then the score should 4 out of 10.
I'm not sure what we are suppose to do...you say the answer in your post....the settings need to be saved. Obviously they are not getting saved so you have two methods to do so...
1) Submit a form and save the values there
2) Save the values via ajax attached to the one of the event handlers (probably the drop one : http://api.jqueryui.com/draggable/#event-stop)
My recommendation is not to do the whole drag and drop functionality while you are still learning the basics of web development.
Hey guys i am new to PHP and is trying to self learn this language. Right now i am trying to implement something using pure PHP to display Excel documents onto browsers. I am using PHP Excel Reader to read the documents but somehow they are not showing.
Although i can do my own debugging and research if there were error messages which tells me which line was causing the error, but there were none and the problem i am facing now is that
The tables are not showing up
No error messages of any kind from apache
What i am trying to achieve:
Display Excel spreadsheets in table format on browsers using PHP Excel Reader
Check how many sheets are in the .xls document, get the sheet name and display the amount of buttons accordingly
The buttons must be able to allow the user to traverse between different sheets of one document
Right now i am able to get the codes to count the number of sheets and display its name and buttons correctly, but still not being able to display the corresponding tables.
I have tried many ways to tackle this issue based on the documentation but to no avail.
Here are my current codes:
example.php
<?php
error_reporting(E_ALL ^ E_NOTICE);
require_once 'reader.php';
$data = new Spreadsheet_Excel_Reader("test.xls");
?>
<!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>
<script type="text/javascript" src="scripts/excel.js"></script>
<style>
table.excel {
border-style:ridge;
border-width:1;
border-collapse:collapse;
font-family:sans-serif;
font-size:12px;
}
table.excel thead th, table.excel tbody th {
background:#CCCCCC;
border-style:ridge;
border-width:1;
text-align: center;
vertical-align:bottom;
}
table.excel tbody th {
text-align:center;
width:20px;
}
table.excel tbody td {
vertical-align:bottom;
}
.clearfloat {
clear: both;
}
table.excel tbody td {
padding: 0 3px;
border: 1px solid #EEEEEE;
}
table.excel tname {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
padding-right: 10px;
padding-left: 10px;
}
.sheetnames {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: #000000;
padding-right: 20px;
float: left;
padding-bottom: 20px;
}
</style>
</head>
<body onLoad="changeSheet(0)">
<form action="<?php echo $editFormAction; ?>" method="post" name="worksheet">
<?php
$i = -1;
for($s=0; $s<count($data->sheets)-1; $s++) {
$i++;
?>
<div class="sheetnames">
<input name="sheet" type="button" value="<?php echo $data->boundsheets[$i]['name'];?>" onClick="changeSheet(<?php echo $i ?>)">
</div>
<?php
}
?>
<div class="clearfloat"></div>
<div id="test"></div>
</form>
</body>
</html>
excel.js
// JavaScript Document
var xmlHttp
function changeSheet(n)
{
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="script pages/changeSheet.php"
url=url+"?q="+n
xmlHttp.onreadystatechange=stateChanged
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
{
document.getElementById("test").innerHTML=xmlHttp.responseText
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
changeSheet.php
<?php
error_reporting(E_ALL ^ E_NOTICE);
require_once 'reader.php';
$data = new Spreadsheet_Excel_Reader("test.xls");
$q = $_GET['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>Untitled Document</title>
</head>
<body>
<?php
echo $data->dump(true,false, $sheet=$q);
?>
</body>
</html>
And attached along with the codes is the library file for PHP Excel Reader which i do not believe is causing the problem.
Once again, i thank you guys for taking time to read my question. So what went wrong? What was causing the tables to not show up?
Looks like your version of Excel_Reader does not support "::dump()".
Looks like you have to iterate through the sheets, rows and columns yourself.
Try var_dump($data) to see whats in there.