I have html file that load jQuery.Gantt. Inside html i put nested php that grabs necessary data from database to populate grid. The data are formate to json according to spec.
My question is how to pass array to $function() to property source?
Here is the code:
<html lang="en-au">
<head>
<title>jQuery.Gantt</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" >
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" />
<link rel="stylesheet" href="http://taitems.github.com/UX-Lab/core/css/prettify.css" />
<style type="text/css">
body {
font-family: Helvetica, Arial, sans-serif;
font-size: 13px;
padding: 0 0 50px 0;
}
.contain {
width: 800px;
margin: 0 auto;
}
h1 {
margin: 40px 0 20px 0;
}
h2 {
font-size: 1.5em;
padding-bottom: 3px;
border-bottom: 1px solid #DDD;
margin-top: 50px;
margin-bottom: 25px;
}
table th:first-child {
width: 150px;
}
</style>
</head>
<body>
<div class="contain">
<h1>
<small>Planning</small>
</h1>
<div class="gantt"></div>
</div>
<?php
include 'config.php';
mysql_query('SET CHARACTER SET utf8');
$sql_query = "SELECT Code, OrderNumber, DeliveryDate, QTY, Progress FROM production WHERE IDCustomer = 8 and Code = '5101452 SMD E PTH';";
$r=mysql_query($sql_query, $con);
$outp = "[";
while($rs=mysql_fetch_array($r))
{
if ($outp != "[") {$outp .= ",";}
$outp .= '{"name":"' . $rs["Code"] . '",';
$outp .= '"desc":"' . $rs["OrderNumber"] . '",';
$outp .= '"values": ';
$outp .= '[{"from": "' .$rs["DeliveryDate"] . '", ';
$outp .= '"to": "' .$rs["DeliveryDate"] . '",';
$outp .= '"label": "' .$rs["QTY"] . '",';
$outp .= '"customClass": "' .$rs["Progress"] .'"}]}';
}
$outp .="]";
mysql_close($con);
?>
</body>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="js/jquery.fn.gantt.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://taitems.github.com/UX-Lab/core/js/prettify.js"></script>
<script>
$(function() {
"use strict";
$(".gantt").gantt({
source: "src/mydata1.json",
navigate: "scroll",
scale: "days",
maxScale: "months",
minScale: "days",
waitText: "Please wait...",
itemsPerPage: 50,
onItemClick: function(data) {
alert("Item clicked - show some details");
},
onAddClick: function(dt, rowId) {
alert("Empty space clicked - add an item!");
},
onRender: function() {
if (window.console && typeof console.log === "function") {
console.log("chart rendered");
}
}
});
$(".gantt").popover({
selector: ".bar",
title: "I'm a popover",
content: "And I'm the content of said popover.",
trigger: "hover"
});
});
</script>
</html>
Or there is better way to do it? Actually I'd like to split HTML and PHP code but I'm not nimble with web programming.
Related
I included TomTom map to my php page, and included the TomTom code (javascript) into a separate body tag at the very bottom. I'm noticing that when I include the TomTom script within these tags, none of my buttons (href links) are working.
All of the code is on one sublime text page (map.php).
map.php:
<!--Developer code: https://developer.tomtom.com/blog/build-different/add-tomtom-maps-
website-30-seconds-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Details Page</title>
<link rel="stylesheet" type="text/css" href="https://api.tomtom.com/maps-sdk-for-
web/cdn/5.x/5.41.0/maps/maps.css">
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.41.0/maps/maps-web.min.js">.
</script>
<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.41.0/services/services-
web.min.js"></script>
<style>
#map-div {
padding: 60px 60px 60px 60px;
height: 100%;
width: 100%;
position: absolute;
}
</style>
</head>
<body>
<ol>
<?php
if (isset($_POST["submit"]));
$search = $_POST['search'];
$navigator = $_POST['navigator'];
$sql = "SELECT DISTINCT stores_name FROM stores ";
$rs_result = mysqli_query($conn, $sql);
$rowCount = mysqli_num_rows($rs_result);
if ($rowCount > 1){
echo "There are " .$rowCount. " results...";
}
else {
echo "These is " .$rowCount. " result...";
}
if ($rowCount > 0) {
while($row = mysqli_fetch_array($rs_result)){
$title = $row['stores_name'];
//$id = $row['stores_id'];
$href = ''.$title.'';
}
}
else {
echo "<tr><td>" ."No results found". "</td><td>";
}
?>
</ol>
</body>
<body>
<div id="map-div" name="map-div"></div>
<script>
const API_KEY = 'XXX';
const APPLICATION_NAME = 'My Application';
const APPLICATION_VERSION = '1.0';
tt.setProductInfo(APPLICATION_NAME, APPLICATION_VERSION);
const GOLDEN_GATE_BRIDGE = {lng: -122.47483, lat: 37.80776};
var map = tt.map({
key: API_KEY,
container: 'map-div',
center: GOLDEN_GATE_BRIDGE,
zoom: 12
});
</script>
</body>
</html>
I am new to uploadify. I recently installed on a xamp in my local c:/ where uploadify resides. I have an uploads folder in the httdocs of xampp where all my uploads go. However I would like to move my uploads to a folder on a different drive. I've tried to edit the uploadifive.php but to no avail. I would like to move from '/uploads'(C:\xampp\htdocs\uploadify) to uploads in (L:\ibi\apps\ibisamp\uploads). I am using the html-5 version.
Here is my code:
index.php
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Elavon MDM</title>
<link rel="icon" type="image/ico" href="favicon.ico">
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.uploadifive.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="uploadifive.css">
<style type="text/css">
body {
font: 13px Arial, Helvetica, Sans-serif;
}
.uploadifive-button {
float: left;
margin-right: 10px;
}
#queue {
border: 1px solid #E5E5E5;
height: 177px;
overflow: auto;
margin-bottom: 10px;
padding: 0 3px 3px;
width: 300px;
}
</style>
</head>
<body>
<!-- <h1>Data Management Upload Demo</h1> -->
<form>
<div id="queue"></div>
<input id="file_upload" name="file_upload" type="file" multiple="false">
<a style="position: relative; top: 8px;" href="javascript:$('#file_upload').uploadifive('upload')">Upload Files</a>
</form>
<script type="text/javascript">
<?php $timestamp = time();?>
$(function() {
$('#file_upload').uploadifive({
'auto' : false,
'checkScript' : 'check-exists.php',
// 'fileTypeExts' : '*.csv',
'formData' : {
'timestamp' : '<?php echo $timestamp;?>',
'token' : '<?php echo md5('unique_salt' . $timestamp);?>'
},
'queueID' : 'queue',
'uploadScript' : 'uploadifive.php',
'onUploadComplete' : function(file, data) { console.log(data); }
});
});
</script>
</body>
</html>
uploadifive.php
<?php
/*
UploadiFive
Copyright (c) 2012 Reactive Apps, Ronnie Garcia
*/
// Set the upload directory
$uploadDir = '/uploads/';
// Set the allowed file extensions
$fileTypes = array('jpg', 'jpeg', 'gif', 'csv', 'png'); // Allowed file extensions
$verifyToken = md5('unique_salt' . $_POST['timestamp']);
if (!empty($_FILES) && $_POST['token'] == $verifyToken) {
$tempFile = $_FILES['Filedata']['tmp_name'];
$uploadDir = $_SERVER['DOCUMENT_ROOT'] . $uploadDir;
$targetFile = $uploadDir . $_FILES['Filedata']['name'];
// Validate the filetype
$fileParts = pathinfo($_FILES['Filedata']['name']);
if (in_array(strtolower($fileParts['extension']), $fileTypes)) {
// Save the file
move_uploaded_file($tempFile, $targetFile);
echo 1;
} else {
// The file type wasn't allowed
echo 'Invalid file type.';
}
}
?>
checkexists.php
<?php
/*
UploadiFive
Copyright (c) 2012 Reactive Apps, Ronnie Garcia
*/
// Define a destination
$targetFolder = '/uploads'; // Relative to the root and should match the upload folder in the uploader script
if (file_exists($_SERVER['DOCUMENT_ROOT'] . $targetFolder . '/' . $_POST['filename'])) {
echo 1;
} else {
echo 0;
}
?>
Try to replace
$uploadDir = $_SERVER['DOCUMENT_ROOT'] . $uploadDir;
with
$uploadDir = "L:\ibi\apps\ibisamp\" . $uploadDir;
I created rating page, working properly in mozilla & chrome of desktop,laptops etc. but only issue in mobile views.. jquery not working properly..
When I click on rating in mobile view then its showing "Not rated" but its working fine in mozilla & chrome of desktop,laptop etc.
please suggest me changes in following code (for mobile view-checking with chrome)
My jquery code snippet:
<?php
#ob_start();
$p_id = base64_decode($_GET['p_id']);
$u_id = base64_decode($_GET['u_id']);
$servername = "localhost";
$username = "root";
$password = "";
$dbname="demo";
// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}else{
$sql = "SELECT `title` FROM `ci_table` where `p_id`='".$p_id."'";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
$row = mysqli_fetch_assoc($result);
}else{
$row=array();
}
}
?>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Rating: </title>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/star-rating.css" media="all" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/star-rating.js" type="text/javascript"></script>
<style type="text/css">
.registration{ width:600px; margin: 10px auto; background-color: #eaeaea; }
.header {background-color: #00adee; padding: 20px;}
.header img {margin: 0 auto;}
.footer {background-color: ##CCC; border-top:solid 1px #CCC; padding: 20px;}
.footer img {margin: 0 auto; width:50px}
.rate{ width:100%; margin: 10px auto; overflow: hidden;}
.rate img {margin: 0 auto; width:100%;}
.rate h2{text-align: center;}
.rate h4{text-align: center; margin: 20px auto}
.rate .sunbtn{margin: 20px 35%; width:30%; background-color: 00adee;}
.ratinggroup{margin:20px auto; width:350px}
</style>
<body>
<div class="container">
<div class="registration">
<div class="header"><img src="images/logo.png" class="img-responsive"> </div>
<div class="rate">
<div class="col-sm-12">
<div class="col-sm-12"><div class="row"><img src="images/hbg.png" class="img-responsive"></div></div>
<div class="col-sm-12">
<div class="row">
<h2><?php echo $row['title']; ?></h2>
<h4>Rate This Item</h4>
<div class="ratinggroup">
<form id="addrate" name="addrate" method="post" action="add_rating.php#no-back">
<input name="prop_id" id="prop_id" type="hidden" value="<?php echo $p_id; ?>">
<input name="user_id" id="user_id" type="hidden" value="<?php echo $u_id; ?>">
<input name="rat_val" id="rat_val" type="hidden" value="3">
<input name="rates" id="rates" type="text" class="rating rating-loading" value="3" data-size="xs" title=""></div>
<div id="err" style="color: red; text-align: center; width: 100%"></div>
<input type="submit" name="submit" id="submit_rating" value="Submit" class="btn btn-info sunbtn">
</form>
</div>
</div>
</div>
</div>
<div class="footer"> <img src="images/ftr-logo.png" class="img-responsive"></div>
</div>
</div>
</body>
<script>
$(document).on('ready', function () {
$('.kv-gly-star').rating({
containerClass: 'is-star'
});
$('.rating,.kv-gly-star').on(
'change', function () {
console.log('Rating selected: ' + $(this).val());
var rt = $(this).val();
$('#rat_val').val(rt);
});
$('form#addrate').submit(function () {
var rates = $('#rat_val').val();
if(rates==""){
$('#err').html('Please rate the item');
return false;
}
});
});
</script>
</html>
<?php $conn->close();
?>
I have a form in which users can submit issues, what I want to happen is when users hit the add button, i want what they add to be posted in the box below. So say the add something, x out the window and come back to add something else later what they added previously will still be there.
here is my fiddle
http://jsfiddle.net/grahamwalsh/rCB9V/
IssueList(html)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Issue List</title>
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/knockout-3.1.0.js"></script>
<script src="Issuelist.js"></script>
<link type="text/css" rel="stylesheet" href="Issuelistcss.css" />
</head>
<body>
<div class='issuelist'>
<form data-bind="submit:addIssue">
Add Issue: <input type="text" data-bind='value:issueToAdd, valueUpdate: "afterkeydown"' />
<button type="submit" data-bind="enable: issueToAdd().length > 0">Add</button>
</form>
<p>Your Issues:</p>
<select multiple="multiple" data-bind="options:allIssues, selectedOptions:selectedIssues"> </select>
<div>
<button data-bind="click: removeSelected, enable: selectedIssues().length > 0">Remove</button>
<button data-bind="click: sortIssues, enable: allIssues().length > 1">Sort</button>
</div>
</div>
</body>
</html>
IssueList (js)
$(document).ready(function(){
var Issuelist = function () {
this.issueToAdd = ko.observable("");
this.allIssues = ko.observableArray(["test"]);
this.selectedIssues = ko.observableArray(["test"]);
this.addIssue = function () {
if ((this.issueToAdd() != "") && (this.allIssues.indexOf(this.issueToAdd()) < 0))
this.allIssues.push(this.issueToAdd());
this.issueToAdd("");
};
this.removeSelected = function () {
this.allIssues.removeAll(this.selectedIssues());
this.selectedIssues([]);
};
this.sortIssues = function () {
this.allIssues.sort();
};
};
ko.applyBindings(new Issuelist());
});
IssueListcss
body { font-family: arial; font-size: 14px; }
.issuelist { padding: 1em; background-color: #87CEEB; border: 1px solid #CCC; max-width: 655px; }
.issuelist input { font-family: Arial; }
.issuelist b { font-weight: bold; }
.issuelist p { margin-top: 0.9em; margin-bottom: 0.9em; }
.issuelist select[multiple] { width: 100%; height: 8em; }
.issuelist h2 { margin-top: 0.4em; }
You could have the form 'post' to its self then make an ajax request for their new issue and put it inside a div. I would also hold off on so much on the javascript or have support for those without it:
getissues.php
getissues.php
<?php
/*
connect to your database code
*/
$query = "select * from issues";
$result = mysql_query($query, $connect);
while($row = mysql_fetch_array($result))
{
echo $row['issues'];
echo '<hr>';
}
?>
process.php
process.php:
<?php
/*
connect to your database
*/
$issue = strip_tags$_POST['issue'];
$query = "insert into issues (issue) values ('$issue')";
$result = mysql_query($query, $connect);
?>
main form page:
<!DOCTYPE HTML>
<html>
<head>
<title>issue page</title>
<script src="Scripts/jquery-2.1.1.js"></script>
<script src="Scripts/knockout-3.1.0.js"></script>
<script src="Issuelist.js"></script>
<link type="text/css" rel="stylesheet" href="Issuelistcss.css" />
<script type="text/javascript">
function check()
{
var request = $.ajax({
url: "getissues.php",
type: "POST",
dataType: "html"
});
request.done(function(msg) {
$("#issues").html(msg);
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});
}
function validate()
{
var issue = $("#issue");
var errcount = 0;
if (issue == "")
{
errcount++;
alert("enter something");
}
if (errcount == 0)
{
/*
make request to php script to put issue into database
*/
$.post("process.php",
{
issue:issue
},
function(data,status){
window.alert("Request done!");
check();
});
}
}
</script>
</head>
<body>
<form action="issuelist.html" method="post">
Add Issue: <input type="text" name="issue"/>
Add Issue: <input type="text" name="issue" id="issue"/>
<button onclick="validate()">submit</button>
</form>
<div id="issues" class="issues">
<!--your ajax fetched issues will appear here-->
</div>
</body>
</html>
hope this helps!
I have a page that updates and delete based on user action edit works fine, but my delete link doesnt work, when ever I click on the delete link it doesnt do anything
Plz help me with what Im doing wrong in this code if possible show me where to edit and how...
I have two pages for this first is
casher.php
<?php
require_once('../auth.php');
?>
<html>
<head>
<title>Silay Institute</title>
<link rel="stylesheet" href="../css/main.css" type="text/css" media="screen" />
<!--sa poip up-->
<link href="src/facebox.css" media="screen" rel="stylesheet" type="text/css" />
<script src="lib/jquery.js" type="text/javascript"></script>
<script src="src/facebox.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox({
loadingImage : 'src/loading.gif',
closeImage : 'src/closelabel.png'
})
})
</script>
<link rel="stylesheet" href="febe/style.css" type="text/css" media="screen" charset="utf-8">
<script src="argiepolicarpio.js" type="text/javascript" charset="utf-8"></script>
<script src="js/application.js" type="text/javascript" charset="utf-8"></script>
<style>
#mainhhh {
background: none repeat scroll 0 0 #FFFFFF;
border: 8px solid #EEEEEE;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 0 10px #4E707C;
font: 11px "Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;
margin: 5em auto;
position: relative;
text-align: left;
width: 1000px;
}
#mainhhh h1 {
background: none repeat scroll 0 0 #0092C8;
border-bottom: 1px solid #007DAB;
color: #FFFFFF;
font-size: 14px;
margin: 0;
padding: 5px 10px;
text-shadow: 0 1px 0 #007DAB;
}
</style>
</head>
<body>
<div id="mainhhh">
<h1>
<a id="addq" href="index.php" title="click to enter homepage" style="background-image:url('../images/out.png'); background-repeat:no-repeat; padding: 3px 12px 12px; margin-right: 10px;"></a>
<label for="filter">Filter</label> <input type="text" name="filter" value="" id="filter" />
<a rel="facebox" href="addcasher.php" id="addq">Add Casher</a>
</h1>
<table cellpadding="1" cellspacing="1" id="resultTable">
<thead>
<tr>
<th style="border-left: 1px solid #C1DAD7"> Name </th>
<th>ID Number</th>
<th>Work</th>
<th>Gender</th>
<th>Status</th>
<th>Birthday</th>
<th> Action </th>
</tr>
</thead>
<tbody>
<?php
include('../connect.php');
$result = mysql_query("SELECT * FROM casher");
while($row = mysql_fetch_array($result))
{
echo '<tr class="record">';
echo '<td style="border-left: 1px solid #C1DAD7">'.$row['fname'].' '.$row['mname'].' '.$row['lname'].'</td>';
echo '<td><div align="left">'.$row['idnumber'].'</div></td>';
echo '<td><div align="left">'.$row['work'].'</div></td>';
echo '<td><div align="left">'.$row['gender'].'</div></td>';
echo '<td><div align="left">'.$row['status'].'</div></td>';
echo '<td><div align="left">'.$row['bday'].'</div></td>';
echo '<td><div align="center"><a rel="facebox" href="editcprofile.php?id='.$row['id'].'" title="Click To Edit">Edit Profile</a> | delete</div></td>';
echo '</tr>';
}
?>
</tbody>
</table>
</div>
<script src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$(".delbutton").click(function(){
//Save the link in a variable called element
var element = $(this);
//Find the id of the link that was clicked
var del_id = element.attr("id");
//Built a url to send
var info = 'id=' + del_id;
if(confirm("Sure you want to delete this update? There is NO undo!"))
{
$.ajax({ type: "GET", Data:{id:del_id} url: "deletecasher.php", data: info, success: function(){
} });
$(this).parents(".record").animate({ backgroundColor: "#fbc7c7" }, "fast")
.animate({ opacity: "hide" }, "slow");
}
return false;
});
});
</script>
</body>
</html>
deletecasher.php
<?php
// This is a sample code in case you wish to check the username from a mysql db table
include('../connect.php');
if($_GET['id'] && is_int($_GET['id'])
{
$id = (int) $_GET['id'];
$sql = "delete from casher where id='$id'";
mysql_query( $sql);
}
?>
Any input with sample appreciated
Off topic: I suggest you do this to avoid an SQL injection:
if($_GET['id'] && is_int($_GET['id'])
{
$id = (int) $_GET['id'];
Try to remove href="#" on the delete button and see if it calles the delete funciton!
You are not passing id to your php file. Please use the data attribute of ajax call.Use this code for ajax.
$.ajax({
type: "GET",
Data:{id:del_id}
url: "deletecasher.php",
data: info,
success: function(){
}
});