Everytime I'm trying to build a jQuery app in my homepage, the app starts to do things on it's own and stops responding my requests.
For instance, I'm trying to implement an image slider and when I run the page, the play/pause button doesn't work and you can see images overlapping over each other. But then when I delete all my PHP includes, it runs normally without any error.
Is this a common error and is there a way to make jQuery accept the existance of includes without loosing control?
<?php
function customPageHeader(){?>
<!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>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/jquery.slider.css" />
<script type="text/javascript" src="javascript/jquery.min.js"></script>
<script type="text/javascript" src="javascript/slider/jquery.slider.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".slider").slideshow({
width : 900,
height : 325,
transition : 'slide'
});
});
</script>
</head>
<body>
<?php }
include_once('header.php');
?>
<div class="content">
<div class="content_01">
<div class="slider2">
<div id="wrapper">
<div class="slider">
<div> <img src="assets/serie_1.jpg" alt=""/> </div>
<div> <img src="assets/serie_2.jpg" alt=""/> </div>
<div> <img src="assets/serie_3.jpg" alt=""/> </div>
<div> <img src="assets/serie_4.jpg" alt=""/> </div>
</div>
</div>
</div>
</div>
</div>
<div style="float:none; clear:both;"></div>
<?php
include_once('footer.php');
?>
</body>
</html>
In my header.php, I have:
<!doctype html>
<html>
<head>
<!-- **************** CSS CALL ************************** -->
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<!-- ************ JAVASCRIPT CALL *********************** -->
<script type="text/javascript" src="scripts/jquery-1.9.0.min.js"></script>
<script type="text/javascript" src="scripts/ablaze_hyper-block.js"></script>
<script type="text/javascript" src="scripts/ablaze_geral.js" charset="utf-8"></script>
<?php if (function_exists('customPageHeader')){
customPageHeader();
}?>
</head>
<body>
<div class="header">
<div class="h_wrapper">
<div class="logo"></div>
<div class="navigation">
<ul class="n_list">
<li class="tab_select01">TEST</li>
<li class="tab_select02">TEST</li>
<li class="tab_select03">TEST</li>
<li class="tab_select04">TEST</li>
</ul>
</div>
<div class="hb_wrapper">
<div class="hyper_block">
<div class="icon fb_icon"><img src="images/hyper_block/fb_icon.png"/></div>
<div class="icon tw_icon"><img src="images/hyper_block/tw_icon.png"/></div>
<div class="icon lg_icon"><img src="images/hyper_block/lg_icon.png"/></div>
<div class="icon nl_icon"><img src="images/hyper_block/nl_icon.png"/></div>
<div class="fb_content"> <img src="images/hyper_block/fb_content.png"/></div>
<div class="tw_content"><img src="images/hyper_block/tw_content.png"/></div>
<div class="lg_content"></div>
<div class="nl_content">
<ul>
<li>TEST</li>
<li><form id="h_nl_form" charset="utf-8" >
<table width="160" border="0" cellspacing="0" cellpadding="0" style="margin-left:3px;">
<tr>
<td><input type="text" id="h_nl_fname" class="h_nl_fname" name="name" maxlength="12" value=" Nome*" onBlur="if(this.value == ''){ this.value = ' Nome*'; this.style.color = '#f38a8a';}" onFocus="if(this.value == ' Nome*'){ this.value = ''; this.style.color = '#f2f2f2';}" style="color:#f38a8a; font-family:verdana;" /></td>
<td><input type="text" id="h_nl_lname" class="h_nl_lname" name="last_name" maxlength="12" value=" Apelido*" onBlur="if(this.value == ''){ this.value = ' Apelido*'; this.style.color = '#f38a8a';}" onFocus="if(this.value == ' Apelido*'){ this.value = ''; this.style.color = '#f2f2f2';}" style="color:#f38a8a; font-family:verdana;" /></td>
</tr>
</table>
<table width="160" border="0" cellspacing="0" cellpadding="0" style="margin-left:3px;">
<tr>
<td width="132"><input type="text" id="h_nl_email" class="h_nl_email" name="email" maxlength="40" value=" Email*" onBlur="if(this.value == ''){ this.value = ' Email*'; this.style.color = '#f38a8a';}" onFocus="if(this.value == ' Email*'){ this.value = ''; this.style.color = '#f2f2f2';}" style="color:#f38a8a; font-family:verdana;" /></td>
<td><input type="button" class="h_btn" value=">"/></td>
</tr>
</table></form><div class="h_error_display"></div>
<div class="h_success_display"></div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div style="float:none; clear:both;"></div>
</body>
</html>
In my footer.php, I have:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="scripts/ablaze_geral.js" charset="utf-8"></script>
<?php if (function_exists('customPageHeader')){
customPageHeader();
}?>
</head>
<body>
<div style="float:none; clear:both;"></div>
<div class="footer">
<div class="f_bar_top"></div>
<div class="f_wrapper">
<ul>
<li><a href="index.php" ><img src="images/logo.png"/></a><br/>
<h1 class="h_footer">CONTACTE-NOS</h1>
<br/>
<table width="220" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="35"><img src="images/contactos/f_email_icon.png"></td>
<td><h3 class="h_footer"><p>#</p></h3></td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="35"><img src="images/contactos/f_telf_icon.png"></td>
<td><h3 class="h_footer">+351 91 000 00 00</h3></td>
</tr>
</table>
<br/>
</li>
<li><br/>
<p><h1 class="h_footer">LINKS POPULARES</h1></p>
<h3 class="h_footer"><p>INÍCIO</p>
<p>SERVIÇOS</p>
<p>PORTEFÓLIO</p>
<p>QUEM SOMOS</p>
<p>CONTACTO</p></h3>
</li>
<li><br/><h1 class="h_footer">ACOMPANHE-NOS</h1>
<table width="220" border="0" cellspacing="0" cellpadding="0" style="margin-bottom:8px;">
<tr>
<td width="35" height="30"><img src="images/contactos/f_facebook.png"></td>
<td>#</td>
</tr>
<tr>
<td width="35"><img src="images/contactos/f_twiter.png"></td>
<td>#</td>
</tr>
</table><h2 class="h_footer">NEWSLETTER</h1>
<form id="nl_form" charset="utf-8" >
<table width="220" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="112"><input type="text" id="f_nl_fname" class="f_nl_fname" name="name" maxlength="12" value=" Nome*" onBlur="if(this.value == ''){ this.value = ' Nome*'; this.style.color = '#60695d';}" onFocus="if(this.value == ' Nome*'){ this.value = ''; this.style.color = '#f2f2f2';}" style="color:#60695d; font-family:verdana;" /></td>
<td><input type="text" id="f_nl_lname" class="f_nl_lname" name="last_name" maxlength="12" value=" Apelido*" onBlur="if(this.value == ''){ this.value = ' Apelido*'; this.style.color = '#60695d';}" onFocus="if(this.value == ' Apelido*'){ this.value = ''; this.style.color = '#f2f2f2';}" style="color:#60695d; font-family:verdana;" /></td>
</tr>
</table>
<table width="220" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="184"><input type="text" id="f_nl_email" class="f_nl_email" name="email" maxlength="40" value=" Email*" onBlur="if(this.value == ''){ this.value = ' Email*'; this.style.color = '#60695d';}" onFocus="if(this.value == ' Email*'){ this.value = ''; this.style.color = '#f2f2f2';}" style="color:#60695d; font-family:verdana;" /></td>
<td><input type="button" class="f_btn" value=">>"></td>
</tr>
</table>
</form>
<div class="f_error_display"></div>
<div class="f_success_display"></div>
</li>
<li class="f_last"></li>
</ul>
</div>
<div class="f_bar_bottom"><div style="float:none; clear:both;"></div></div>
</div>
</body>
</html>
SOLUTION:
Got the solution by removing all the <html>, <head>, <body> declarations from header.php and footer.php, leaving only the <div> tags.
Since this solved your issue. I am posting my comment as a solution.
Do you notice the multiple doctype, html, head, body declarations? For fragments such as custom headers and footers you should do away with these declarations because the fragments are not supposed to be full html pages.
Additional stuff:
Even after removing these root level elements make sure your HTML is valid. Not in your case but usually header includes are placed inside the html->head. So 'divs', 'tables' and other such elements would break the html if placed inside the head. To avoid similar issues be careful about what goes in the head and body sections.
SOLUTION: Got the solution by removing all the html, head, body declarations from the header.php and footer.php leaving only the div tags.
Related
So I would like to move up the big title a little bit so i leave space in the main page and css isn't helping i tried many methods like position:absolute , position:relative , position:fixed etc.. still nothing happens
html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AGENCE DE VOYAGES</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<center>
<body background="ny.jpg" size="100%" width="100%" height="100%" align="center">
<header>
<div class="main">
<div class="logo">
<img src="logo.png">
</div>
<ul>
<li class="active">Accueil</li>
<li>Services</li>
<li>Clients</li>
<li>A Propos</li>
<li>Contact</li>
</ul>
</div>
<div class="title">
<h1 color="white">AGENCE DE VOYAGES</h1>
</div>
<div class="login">
<center>
<form action="auth.php" method="post">
<fieldset style="width:500px;">
<legend align='center'><h1>Connexion</h1></legend>
<table>
<tr>
<td><b>Email: </b></td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td><b>Mot de passe: </b></td>
<td><input type="password" name="password"></td>
</tr>
</div>
</table>
</fieldset>
</form>
<div class="button">
S'AUTHENTIFIER
S'INSCRIRE
</div>
</center>
</body>
</html>
I have left you an example of what you can do to move your text with css or make it smaller, hope that will solve your problem. I only added to your <h1> tag the class title like so:
<h1 class="title" color="white">AGENCE DE VOYAGES</h1>
.title{
font-size: 20px; /*You can choose here the size of your text*/
float: left; /*Or use right instead of left its up to you*/
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>AGENCE DE VOYAGES</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<center>
<body background="ny.jpg" size="100%" width="100%" height="100%" align="center">
<header>
<div class="main">
<div class="logo">
<img src="logo.png">
</div>
<ul>
<li class="active">Accueil</li>
<li>Services</li>
<li>Clients</li>
<li>A Propos</li>
<li>Contact</li>
</ul>
</div>
<div class="title">
<h1 class="title" color="white">AGENCE DE VOYAGES</h1>
</div>
<div class="login">
<center>
<form action="auth.php" method="post">
<fieldset style="width:500px;">
<legend align='center'><h1>Connexion</h1></legend>
<table>
<tr>
<td><b>Email: </b></td>
<td><input type="email" name="email"></td>
</tr>
<tr>
<td><b>Mot de passe: </b></td>
<td><input type="password" name="password"></td>
</tr>
</div>
</table>
</fieldset>
</form>
<div class="button">
S'AUTHENTIFIER
S'INSCRIRE
</div>
</center>
</body>
</html>
So I have the main blog page "viewBlog.php", and a page where you can add entries "add_entry.html".
The information submitted in add_entry should show in viewBlog, however this is not the case as it just stays blank. I dont know why the information submitted in add_entry is not being processed and echoed on the main div for viewBlog.
add_entry.html code:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head> <title> Add Entry </title>
</head>
<body style="background-color:antiquewhite;">
<h1 style="color:red; font-family:arial"> Add an entry to Blog! </h1>
<p>
Instructions: Enter a title and body for your blog entry. In the body, you can use simple HTML formatting elements, such as <b> (bold) and <i> (italic) as well as the hyperlink "anchor" element <a>.
</p>
<form action="viewBlog.php" method="POST">
<table>
<tr>
<td>
Title:
</td>
<td>
<input type="text" name="title" size="61" maxlength="60">
</td>
</tr>
<tr>
<td valign="top">
Body:
</td>
<td>
<textarea name="body" rows="10" cols="80"></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<input type="Submit" value="Add Entry" name="">
<input type="reset" onClick="return confirm('Clear the form?');" value="Clear" name="">
</td>
</tr>
</table>
</form>
viewBlog.php code:
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Homepage</title>
<link rel="stylesheet" type="text/css" href="miniCSS.css" title="Style 1" />
</head>
<body>
<div id="wrap">
<div id="header">
<img src="banner.png" alt="banner" height="150px"/>
</div>
<div id="main">
<?php
$title = $_POST["title"];
$body = $_POST["body"];
echo "$title";
echo "$body";
?>
</div>
<div id="sidebar">
<ul>
<li>Home</li>
<li>Add Entry</li>
</ul>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
When you echo variables, don't put quotes around them, that converts them to strings (which are echoed literally as $title and $body). So instead of this
echo "$title";
echo "$body";
write it that way:
echo $title;
echo $body;
So I got an annoying problem with my code here: I have 2 pages orderstep1.php and orderstep2.php. Orderstep1 has a form where you have to fill in all user details to make a new order. Orderstep2 has a return button to go back to the first page if you've made a mistake. However when you click the button the user stays on the same page. I guess this has to do with the $_POST['submit'] variable already being set and therefore auto submitting the form when you try to get back to the first page.
Here is the code of both pages:
Orderstep1.php:
<!DOCTYPE html>
<html>
<head>
<?php
session_start();
?>
<link rel="stylesheet" type="text/css" href="Stylesheets/main_setup.css">
<link rel="stylesheet" type="text/css" href="Stylesheets/orderstepbanner.css">
<link rel="stylesheet" type="text/css" href="Stylesheets/orderstep1.css">
<script type="text/javascript" src="Scripts/ForumAltering.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(window).width();
var width = $(window).width();
var width_Main_Body = width * 0.7;
var width_Full_Page = width_Main_Body * 0.98;
var width_Scale_down = width_Full_Page * 0.75;
var height = width_Scale_down * 0.75;
$(function() {
$.post('process.php',{frameH:height},function(json){
if(json.outcome == 'success'){
}else{
alert('Javascript kan uw schermgrootte niet achterhalen. Activeer javascript in uw webbrowser!');
}
},'json');
});
</script>
</head>
<body>
<div id="Main_Body">
<h1>WaspBane</h1>
<h5>Wespenvallen van WaspBane®</h5>
<img src="Images/WaspBane_Banner.png"></img>
<div id="NAVIGATOR">
<table id="NavOptions">
<tr>
<td id="NavOption1">Home</td>
<td id="NavOption2">Bestellen</td>
<td id="NavOption3">Wespen</td>
<td id="NavOption4">Instructies</td>
<td id="NavOption5">Handleiding</td>
</tr>
</table>
</div>
<div id="FullPage">
<div id="OrderStepsBanner">
<div id="OrderSteps">
<div id="OrderStep1">
<ul id="OrderStepFirst">
<li id="OrderStepFirstTIN-A"></li><!--
--><li id="OrderStepFirstFull-A">
<p class="OrderStepText">Stap 1</p>
</li><!--
--><li id="OrderStepFirstTOUT-A"></li>
</ul>
</div>
<div id="OrderStep2">
<ul id="OrderStepSecond">
<li id="OrderStepSecondTIN"></li><!--
--><li id="OrderStepSecondFull">
<p class="OrderStepText">Stap 2</p>
</li><!--
--><li id="OrderStepSecondTOUT"></li>
</ul>
</div>
<div id="OrderStep3">
<ul id="OrderStepThird">
<li id="OrderStepThirdTIN"></li><!--
--><li id="OrderStepThirdFull">
<p class="OrderStepText">Stap 3</p>
</li><!--
--><li id="OrderStepThirdTOUT"></li>
</ul>
</div>
<div id="OrderStep4">
<ul id="OrderStepFourth">
<li id="OrderStepFourthTIN"></li><!--
--><li id="OrderStepFourthFull">
<p class="OrderStepText">Stap 4</p>
</li><!--
--><li id="OrderStepFourthTOUT"></li>
</ul>
</div>
</div>
</div>
<div id="Orderstep1Form">
<form method="post" action="form1submit.php "id="Contact">
<table id="FormData">
<tr>
<td><p>Naam:</p></td>
<td><input type="text" name="Name" id="Name" <?php if(isset($_SESSION["Name"])){echo "value='".$_SESSION["Name"]."'";};?> required/></td>
</tr>
<tr>
<td><p>Adres:</p></td>
<td><input type="text" name="Address" id="Address" <?php if(isset($_SESSION["Address"])){echo "value='".$_SESSION["Address"]."'";};?> required/></td>
</tr>
<tr>
<td><p>Woonplaats:</p></td>
<td><input type="text" name="City" id="City" <?php if(isset($_SESSION["City"])){echo "value='".$_SESSION["City"]."'";};?> required/></td>
</tr>
<tr>
<td><p>Postcode:</p></td>
<td><input type="text" name="Postal" id="Postal" <?php if(isset($_SESSION["Postal"])){echo "value='".$_SESSION["Postal"]."'";};?> required/></td>
</tr>
<tr>
<td><p>Land:</p></td>
<td>
<select name="State" id="State" required>
<option value="NL" <?php if(isset($_SESSION["State"])){if($_SESSION["State"] == "NL"){echo "selected";};};?>>Nederland</option>
<option value="BE" <?php if(isset($_SESSION["State"])){if($_SESSION["State"] == "BE"){echo "selected";};};?>>België</option>
</select>
</td>
</tr>
<tr>
<td><p>E-mail:</p></td>
<td><input type="text" name="Email" id="Email" <?php if(isset($_SESSION["Email"])){echo "value='".$_SESSION["Email"]."'";};?> required/></td>
</tr>
<tr>
<td><p>Telefoon:</p></td>
<td><input type="text" name="Phone" id="Phone"<?php if(isset($_SESSION["Phone"])){echo "value='".$_SESSION["Phone"]."'";};?> required/></td>
</tr>
<tr colspan="2" class="ContactLinks">
<td><input id="submit" type="submit" name="submit" value="Volgende"></td>
</tr>
<tr colspan="2" class="ContactLinks">
<td>
<a class="ContactText" href="mailto:Waspbane#plaagdierbeheer.nl">
<button>Informatie particulieren</button>
</a>
<br><br>
<a class="ContactText" href="mailto:Waspbane#plaagdierbeheer.nl">
<button>Informatie bedrijven en groothandel</button>
</a>
</td>
</tr>
</table>
</form>
</div>
<br>
</div>
<div id="Footer">
<table>
<tr>
<td>
<p id="FooterTrade"> Bron: <a id="FooterLink" href="http://www.waspbane.com">WaspBane.com</a></p>
</td>
<td>
<p id="FooterCopy">© WaspBane.info </p>
</td>
</tr>
</table>
</div>
<?php
date_default_timezone_set("UTC");
$date = date_create();
$Date = date_format($date,"Y");
$Random = round(mt_rand(1000,9999));
$Code = (string)$Date.(string)$Random;
if(isset($_POST["submit"])){
if(isset($_POST["Name"]) and isset($_POST["Address"]) and isset($_POST["City"]) and isset($_POST["Postal"]) and isset($_POST["State"]) and isset($_POST["Email"]) and isset($_POST["Phone"])){
$_SESSION["Name"] = $_POST["Name"];
$_SESSION["Address"] = $_POST["Address"];
$_SESSION["City"] = $_POST["City"];
$_SESSION["Postal"] = $_POST["Postal"];
$_SESSION["State"] = $_POST["State"];
$_SESSION["Email"] = $_POST["Email"];
$_SESSION["Phone"] = $_POST["Phone"];
$_SESSION["Code"] = $Code;
$Country = $_POST["State"];
$Language = strtolower($Country);
$Street = $_POST["Address"];
$Zip = $_POST["Postal"];
$City = $_POST["City"];
$UFURL = "http://locateandselect.kiala.com/search?order=12345&dspid=DEMO_DSP&country=".$Country."&language=".$Language."&street=".$Street."&zip=".$Zip."&city=".$City."&bckUrl=http://www.testformywebsites.site50.net/orderstep4.php?order=12345%26&target=_parent&gui=sleek&css=http://www.testformywebsites.site50.net/Stylesheets/kiala.css";
$FURL = str_replace(" ","+",$UFURL);
$_SESSION["URL"] = $FURL;
header("Location: orderstep2.php");
exit;
}
}
?>
</div>
</body>
</html>
Orderstep2.php:
<!DOCTYPE html>
<html>
<head>
<?php
session_start();
?>
<link rel="stylesheet" type="text/css" href="Stylesheets/main_setup.css">
<link rel="stylesheet" type="text/css" href="Stylesheets/orderstepbanner.css">
<link rel="stylesheet" type="text/css" href="Stylesheets/orderstep2.css">
<script type="text/javascript" src="Scripts/ForumAltering.js"></script>
<script>
<?php if(isset($_SESSION["Weight"]) or isset($_SESSION["Price"]) or isset($_SESSION["Shipping"])){echo "/*";};?>document.addEventListener("DOMContentLoaded",function(event){
var Weigth = document.getElementById("Weight");
var Price = document.getElementById("Price");
var Shipping = document.getElementById("Shipping");
Weight.value = "0.000";
Price.value = "0.00";
Shipping.value = "0.00";
});<?php if(isset($_SESSION["Weight"]) or isset($_SESSION["Price"]) or isset($_SESSION["Shipping"])){echo "*/";};?>
<?php if(isset($_SESSION["Weight"]) and isset($_SESSION["Price"]) and isset($_SESSION["Shipping"])){
echo "document.addEventListener('DOMContentLoaded',function(event){
var Weigth = document.getElementById('Weight');
var Price = document.getElementById('Price');
var Shipping = document.getElementById('Shipping');
Weight.value = '".$_SESSION["Weight"]."';
Price.value = '".$_SESSION["Price"]."';
Shipping.value = '".$_SESSION["Shipping"]."';
});";
};
?>
</script>
</head>
<body>
<div id="Main_Body">
<h1>WaspBane</h1>
<h5>Wespenvallen van WaspBane®</h5>
<img src="Images/WaspBane_Banner.png"></img>
<div id="NAVIGATOR">
<table id="NavOptions">
<tr>
<td id="NavOption1">Home</td>
<td id="NavOption2">Bestellen</td>
<td id="NavOption3">Wespen</td>
<td id="NavOption4">Instructies</td>
<td id="NavOption5">Handleiding</td>
</tr>
</table>
</div>
<div id="FullPage">
<div id="OrderStepsBanner">
<div id="OrderSteps">
<div id="OrderStep1">
<ul id="OrderStepFirst">
<li id="OrderStepFirstTIN-F"></li><!--
--><li id="OrderStepFirstFull-F">
<p class="OrderStepText">Stap 1</p>
</li><!--
--><li id="OrderStepFirstTOUT-F"></li>
</ul>
</div>
<div id="OrderStep2">
<ul id="OrderStepSecond">
<li id="OrderStepSecondTIN-A"></li><!--
--><li id="OrderStepSecondFull-A">
<p class="OrderStepText">Stap 2</p>
</li><!--
--><li id="OrderStepSecondTOUT-A"></li>
</ul>
</div>
<div id="OrderStep3">
<ul id="OrderStepThird">
<li id="OrderStepThirdTIN"></li><!--
--><li id="OrderStepThirdFull">
<p class="OrderStepText">Stap 3</p>
</li><!--
--><li id="OrderStepThirdTOUT"></li>
</ul>
</div>
<div id="OrderStep4">
<ul id="OrderStepFourth">
<li id="OrderStepFourthTIN"></li><!--
--><li id="OrderStepFourthFull">
<p class="OrderStepText">Stap 4</p>
</li><!--
--><li id="OrderStepFourthTOUT"></li>
</ul>
</div>
</div>
</div>
<script>
var Country = "<?php echo $_SESSION["State"];?>";
</script>
<div id="OrderStep2Form">
<form method="post" id="Order">
<table id="FormData">
<tr colspan="2">
<td><p>Selecteer welk product u wil:</p></td>
</tr>
<tr>
<td><p>Complete wespenval:</p></td>
<td><input type="number" name="TrapNumber" id="TrapNumber" min="0" value="<?php if(isset($_SESSION["TrapNumber"])){echo $_SESSION["TrapNumber"];}else{echo "0";};?>" onchange="Calculations(this.value,RefillNumber.value,Country)" required/></td>
</tr>
<tr>
<td><p>Navulling:</p></td>
<td><input type="number" name="RefillNumber" id="RefillNumber" min="0" value="<?php if(isset($_SESSION["TrapNumber"])){echo $_SESSION["TrapNumber"];}else{echo "0";};?>" onchange="Calculations(TrapNumber.value,this.value,Country)" required/></td>
</tr>
<tr>
<td><p>Totale gewicht:</p></td>
<td><output form="Order" name="Weight" id="Weight" for="TrapNumber RefillNumber" value="0"></output></td>
</tr>
<tr>
<td><p>Totale prijs:</p></td>
<td><output form="Order" name="Price" id="Price" for="TrapNumber RefillNumber" value="0"></output></td>
</tr>
<tr>
<td><p>Verzendkosten:</p></td>
<td><output form="Order" name="Shipping" id="Shipping" for="TrapNumber RefillNumber" value="0"></output></td>
</tr>
<tr>
<td><input type="submit" name="submit" id="submit" value="Volgende"/></td>
<td><button>Vorige</button></td>
</tr>
</table>
</form>
</div>
</div>
<div id="Footer">
<table>
<tr>
<td>
<p id="FooterTrade"> Bron: <a id="FooterLink" href="http://www.waspbane.com">WaspBane.com</a></p>
</td>
<td>
<p id="FooterCopy">© WaspBane.info </p>
</td>
</tr>
</table>
</div>
</div>
<?php
if(isset($_POST["submit"])){
if(isset($_POST["TrapNumber"])){
$TrapNumber = $_POST["TrapNumber"];
$_SESSION["TrapNumber"] = $_POST["TrapNumber"];
} else {
$TrapNumber = 0;
$_SESSION["TrapNumber"] = 0;
}
if(isset($_POST["RefillNumber"])){
$RefillNumber = $_POST["RefillNumber"];
$_SESSION["RefillNumber"] = $_POST["RefillNumber"];
} else {
$RefillNumber = 0;
$_SESSION["RefillNumber"] = 0;
}
$TotalWeight = (($TrapNumber * 0.75) + ($RefillNumber * 0.125));
$TotalPrice = (($TrapNumber * 37.95) + ($RefillNumber * 26.95));
$_SESSION["Weight"] = $TotalWeight;
$_SESSION["Price"] = $TotalPrice;
if($TotalWeight >= 15){
if($_SESSION["State"] == "NL"){
$_SESSION["Shipping"] = 03.95;
} elseif($_SESSION["State"] == "BE"){
$_SESSION["Shipping"] = 07.50;
} else {
$_SESSION["Shipping"] = 00.00;
}
} else {
$_SESSION["Shipping"] = 00.00;
}
$header = "Location: orderstep3.php?frameH=".$_SESSION["frameH"];
header($header);
}
?>
</body>
</html>
As you can see on orderstep2.php the last row of the table:
<td><button>Vorige</button></td>
If anyone has an idea to work this around please tell me. Because I already tried a lot of things but nothing worked so far.
EDIT:
Sorry I missed 1 thing the form action in orderstep1.php shouldn't be there. Forgot to take that one out when changing some things.
Simply post the data to orderstep2.php:
<form method="post" action="orderstep2.php "id="Contact">
There, you can use your if($_POST['submit']).
On the second page, you should go back with javascript:history.back(), so that the form data is still there.
I develop a jQuery mobile site and want to display pie chart, the data fetch form database to show in pie chart. Since the jQuery mobile link to another page using div, I make one div in index.php to display data from database, then when the data is showing up, I can view the data by click on the view link. At this part, I make jQuery load to load page piechart.php when click on the view link. The piechart.php page success called by jQuery load, but pie chart not appear, BUT if I right click on page and click view inspect element, it starts showing up normally the pie chart.
Why do I need to right click to display it??
This is index.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>SSPIC</title>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1" />
<meta name="description" content="This site was created from a template originally designed and developed by Codify Design Studio. Find more free templates at http://www.adobe.com/devnet/author_bios/chris_converse.html" />
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/formcalculations.js"></script>
<link href="styles/cakeform.css" rel="stylesheet" type="text/css" />
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="themes/my_company.min.css" />
<link rel="stylesheet" href="includes/overrides.css" />
<script type="text/javascript" src="includes/custom.js"></script>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<link href="stylesheets/app.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<link href="stylesheets/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<script src="javascripts/vendor/snap.svg.js"></script>
<script src="javascripts/pizza.js"></script>
<script type="text/javascript">
function MM_popupMsg(msg) { //v1.0
alert(msg);
}
</script>
</head>
<body onload='hideTotal()'>
<div data-role="page" id="home" data-theme="a">
<div data-role="header">
<h1>Homepage</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li class="btn_a">About Us</li>
<li class="btn_s">Services</li>
<li class="btn_l">Search</li>
<li class="btn_c">Upload</li>
<li class="btn_c">Chart</li>
</ul>
</div>
<div data-role="">
</div>
</div>
<div data-role="page" id="locations" data-title="Find a Locations">
<div data-role="header">
<h1>Search Data</h1>
back
</div>
<div data-role="content">
<p></p>
<h2>Search Data</h2>
</div>
<div data-role="footer">
<div data-role="controlgroup" data-type="horizontal">
Home
</div>
<h4>©2013 SSPIC</h4>
</div>
</div>
<div data-role="page" id="contact_us" data-title="Contact Us">
<div data-role="header">
<h1>Upload</h1>
back
</div>
<div data-role="content" class="content_container">
<p><form action="insertimage.php" method="post" enctype="multipart/form-data" name="form1">
<h2 align="center"> </h2>
<h2 align="center">Information</h2>
<table width="63%" border="1" align="center">
<tr>
<td width="40%">Upload File</td>
<td width="60%"><input name="pic" type="file" id="pic" /></td>
</tr>
<tr>
<td colspan="2"><div align="center">
<input type="submit" name="Submit" value="Submit" />
</div></td>
</tr>
</table>
<p align="center"> </p>
<p align="center"> </p>
<p align="center">
</form></p>
</div>
<div data-role="footer">
<div data-role="controlgroup" data-type="horizontal">
Home
</div>
<h4>©2013 SSPIC</h4>
</div>
</div>
<div data-role="page" id="chart" data-title="chart Us" class="chart">
<div data-role="header">
<h1>Pie Chart</h1>
back
</div>
<div id="output" data-role="content" class="content_container"></div>
<div data-role="content" class="content_container" id="k_chart">
<p>
<form action="insertimage.php" method="post" enctype="multipart/form-data" name="form1">
<h2 align="center"> </h2>
<h2 align="center">Display File</h2>
<table width="63%" border="1" align="center" class="table_chart">
<tr>
<td width="40%">Bil</td>
<td width="60%">Pusat rawatan</td>
<td width="60%">Pengasas</td>
<td width="60%">Bil pengamal</td>
<td width="60%">Total</td>
<td width="60%">Phone number</td>
<td width="60%">Peratus</td>
<td width="60%">view chart</td>
</tr>
<?php
include("connection.php");
$sel = mysql_query("select * from info");
$a = 1;
while($get_sel = mysql_fetch_array($sel))
{
?>
<tr>
<td width="40%"><?php echo $a++;?></td>
<td width="60%"><?php echo $get_sel['nama_PusatRawatan'];?></td>
<td width="40%"><?php echo $get_sel['nama_Pengasas'];?></td>
<td width="60%"><?php echo $get_sel['bilangan_Pengamal'];?></td>
<td width="40%"><?php echo $get_sel['totalPrice'];?></td>
<td width="60%"><?php echo $get_sel['phonenumber'];?></td>
<td width="60%"><?php echo $get_sel['peratus'];?></td>
<td width="60%"><div class="id"><?php echo $get_sel['id'];?></div><span class="viewBtn">View</span></td>
</tr>
<?php
}
?>
</table>
<p align="center"> </p>
<p align="center"> </p>
<p align="center">
</form></p>
</div>
<div data-role="footer">
<div data-role="controlgroup" data-type="horizontal">
Home
</div>
<h4>©2013 SSPIC</h4>
</div>
</div>
<script>
$(document).ready(function(e) {
// Pizza.init();
$('.viewBtn').on('click',function()
{
var id = $(this).closest('td').find('.id').text();
$('#k_chart').hide();
$('#output').load("piechart.php?id="+id);//load page to display pie chart
});
$(window).load(function() {
Pizza.init({
donut: false, // enable donut chart
donut_inner_ratio: 0.4, // between 0 and 1
percent_offset: 35, // relative to radius
stroke_color: '#333',
stroke_width: 0,
show_percent: true, // show or hide the percentage on the chart.
animation_speed: 500,
animation_type: 'elastic' // options: backin, backout, bounce, easein, easeinout, easeout, linear
});
});
});
</script>
</body>
</html>
This one is piechart.php
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css" />
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="themes/my_company.min.css" />
<link rel="stylesheet" href="includes/overrides.css" />
<link href="stylesheets/app.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<link href="stylesheets/pizza.css" media="screen, projector, print" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script><script src="javascripts/vendor/snap.svg.js"></script>
<script src="javascripts/pizza.js"></script>
<div data-role="content" class="content_container">
<p>
<div id="jquery-script-menu">
<div class="jquery-script-center">
<div class="jquery-script-clear"></div>
</div>
</div>
<h1 style="margin-top:150px;" align="center">Papar peratus lulus pie chart </h1>
<div class="row">
<div class="large-12 columns">
<h3>Graphs</h3>
</div>
</div>
<?php
include("connection.php");
$id_info = $_GET['id'];
$papar = mysql_query("select *from info where id = '$id_info'");
$get_papar = mysql_fetch_array($papar);
if($get_papar['peratus']>0 and $get_papar['peratus']<=50)
{
$xlulus = $get_papar['peratus'];
$lulus = 100 - $xlulus;
}
else
{
$lulus = $get_papar['peratus'];
$xlulus = 100 - $lulus;
}
?>
<div class="row">
<div class="large-4 small-4 columns">
<ul data-pie-id="svg">
<li data-value="<?php echo $xlulus;?>">Tidak memenuhi syarat</li><li data-value="<?php echo $lulus;?>">Memenuhi syarat</li>
</ul>
</div>
<div class="large-8 small-8 columns">
<div id="svg"></div>
</div>
</div>
</p>
</div>
The jQuery code is at the bottom of page index.php..
You need to correctly time your plugin initialization.
First forget about document ready and window load, they will not work correctly with jQuery Mobile application (usually they trigger before jQuery Mobile content is successfully enhanced).
Instead you should learn how to use jQuery Mobile page events, for example pageinit event exists to replace document ready.
Read more about it here.
Now regarding your main problem, your plugin must be initialized during the pageshow event. A lot of visual plugins (carousels, charts ..) require correct page height. When working with jQuery Mobile page height is correctly calculated only during pageshow event, it will be 0 in any other case.
Page event initialization order can be found here.
I'm not sure what is happening to my contact form on my page- "We Can Help." I watched the tutorial series from Dream Weaver Tutorial, and I tried to tie in reCAPTCHA and Hot Dreamweaver's add-on.
Does anyone know why the navigation and the header picture and the Adobe picture don't show?
You are using absolute addresses to your links and resources to places that only exist on your local machine. Instead use relative addresses in your html.
Example.
Instead of this html:
<img src="file:///I|/Town_Monitoring_Website/images/Logo copy.jpg" width="213" height="75" border="none" />
Do this:
<img src="images/Logo copy.jpg" width="213" height="75" border="none" />
You want to remove all of these references in your html
file:///I|/Town_Monitoring_Website/
All of your image sources and links are pointing to a local file system they need to be either absolute or relative paths. I updated the code on your page to reflect relative paths as long as the file names and images are in the correct directories this will be working code just copy and paste:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- Contact Form Designed by James Brand # dreamweavertutorial.co.uk -->
<!-- Covered under creative commons license - http://dreamweavertutorial.co.uk/permissions/contact-form-permissions.htm -->
<title>Towne Monitoring Service/FAQ's</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="contact/css/contactform.css" rel="stylesheet" type="text/css" />
<link href="css/css style sheet template.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nameError = 'Please enter a Name to proceed.';
var phoneError = 'Please enter a valid Phone Number to continue.';
var addressError = 'Please enter a valid Maling Address to continue.';
var emailError = 'Please enter a valid Email Address to continue.';
var commentError = 'Please enter your Message to continue.';
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
</script>
</head>
<body onload="MM_preloadImages('images/x.png')">
<div id="container">
<div id="header"><img src="images/Logo copy.jpg" width="213" height="75" border="none" /></div><!-- end div header -->
<div id="nav">
<ul>
<li>Home</li>
<li>Products</li>
<li>About Us</li>
<li>FAQ's</li>
<li>Did You Know?</li>
<li>We Can Help</li>
</ul>
</div><!-- end dic nav -->
<div id="content">
<table width="1000" border="0">
<tr>
<td width="50"> </td>
<td width="574"> </td>
<td width="312"> </td>
</tr>
<tr>
<td> </td>
<td><div id="for mWrap">
<div id="form">
<form action="contact.php" method="post" id="comments_form">
<div class="row">
<div class="label">Your Name</div>
<!-- end .label -->
<div class="input">
<input type="text" id="fullname" class="detail" name="fullname" value="" />
</div>
<!-- end .input -->
<div class="context">e.g. John Smith or Jane Doe</div>
<!-- end .context -->
</div>
<!-- end .row -->
<div class="row">
<div class="label">Your Email Address</div>
<!-- end .label -->
<div class="input">
<input type="text" id="email" class="detail" name="email" value="" />
</div>
<!-- end .input -->
<div class="context">We will not share your email with anyone or spam you with messages either</div>
<!-- end .context -->
</div>
<!-- end .row -->
<div class="row">
<div class="label">Your Phone Number</div>
<!-- end .label -->
<div class="input">
<input type="text" id="phone" class="detail" name="phone" value="" />
</div>
<!-- end .input -->
<div class="context">(123)-123-1234</div>
<!-- end .context -->
</div>
<!-- end .row -->
<div class="row">
<div class="label">Your Address</div>
<!-- end .label -->
<div class="input">
<input type="text" id="address" class="detail" name="address" value="" /> </div>
<!-- end .input -->
<div class="context">e.g. 123 Cherry ln. Happyville P.A. 18999</div>
<!-- end .context -->
</div>
<!-- end .row --><!-- end .row --><br />
<br />
<div class="submit">
<input type="submit" id="submit" name="submit" value="Send Message" />
</div>
<!-- end .submit -->
<input type="hidden" name="hdwfail" id="hdwfail" value="contact.php" />
</form>
</div><!-- edn #form -->
</div></td>
<td valign="top"><div id="loads"><table width="198" border="0">
<tr>
<td width="192" height="143"><h2>Download's<img src=images/Downloads/Adobe-PDF-Logo.jpg" alt="" width="100" height="100" /></h2>
<p> </p>
<p> </p>
<p> </p>
<p>Click here for Adobe Reader.</p>
</td>
</tr>
<tr>
<td><p>Information Sheet</p>
<p>(.pdf size: 182k)</p>
<p>Company Brochure</p>
<p>(.pdf size: 390k)</p>
<p>Handling Emergencies</p>
<p>(.pdf size: 143k)</p></td>
</tr>
<tr>
<td height="67"> </td>
</tr>
</table></div></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<!-- end formWrap -->
</div>
<div id="apDiv7">
<table width="1000" border="0">
<tr>
<td width="5"> </td>
<td width="588"><h3>© 2012 TOWNE MONITORING SERVICE, LP ALL RIGHTS RESERVED</h3></td>
<td width="77" align="right"><img src="images/csaa.jpg" width="74" height="40" /></td>
<td width="336"><img src="images/footer2.jpg" width="334" height="40" /></td>
</tr>
</table>
</div><!-- end div7 -->
</div>
</body>
</html>