I'm a dummy in HTML.
In my project, I want to use ACE editor to allow the user editing and saving a file.
I succeed to load the file, and to open it with ACE editor.
The problem is how to save it.
For this part, I need your help.
Here is the code I wrote to use ACE.
<?php
if(isset($_POST["save_modification"])){
$file = "./".$_POST["file_name"];
$file_ptr=fopen($file,"w");
fwrite($file_ptr,$_POST["content"]);
fclose($file_ptr);
}?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="all" type="text/css" href="./css/style.css" />
<title>Test</title>
</head>
<body>
<div class="site">
<div class="header">
<span>Test</span>
</div>
</div>
<div class="clean"></div>
<div class="corp">
<div class="corp_ctn">
<h1>Edit a file</h1>
<div id="content" class="paragraphe">
<?php
$dir=opendir("./");
while($file=readdir($dir)){
if(!in_array($file, array(".",".."))) {
echo '<div style="float:left; margin:0 10px; text-align:center;"><a href="?f='.$file.'">';
echo $file;
echo '</a></div>';
echo '<br/>';
}
}
?>
<br clear="all"/>
<?php
if(isset($_GET["f"])) {
echo "<h1>{$_GET["f"]}</h1>";
$file = "./".$_GET["f"];
$content = file_get_contents($file);
?>
<form method="POST" action="index_select_lua_script.php">
<div id="editor" name="content" style="width:100%;height:200px;">
<?php echo $content ?>
</div>
<script src="js/ace/ace.js" type="text/javascript" charset="utf-8"></script>
<script>
var editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.getSession().setMode("ace/mode/lua");
editor.getSession().setTabSize(4);
editor.setHighlightActiveLine(true);
editor.resize();
</script>
<input type="hidden" name="file_name" value="<?php echo $_GET["f"] ?>" />
<input type="submit" name="save_modification" value="Save modification" />
</form>
<br/><br/>
<?php
}
?>
</div>
</div>
</div>
</div>
When I save my modification, using the save button, the content is empty.
Please, do you have an idea of how I can do it?
Thank you
The HTML5 Filesystem API handles tasks like this quite well now. There are a few ways of capturing the contents of the editor area, and once you've done that you can save it.
Look at something like:
http://www.codeproject.com/Articles/668351/HTML-File-API-Capability-and-Compatibility
http://blog.teamtreehouse.com/building-an-html5-text-editor-with-the-filesystem-apis
http://www.html5rocks.com/en/tutorials/file/filesystem/
Can't remember where, but you can ZIP files together using JS now as well, if you so wish.
Related
I am trying to make a search engine by comparing any search entry to my csv files. But i am not able to save my search entry into csv file. Below are my html code.
<!DOCTYPE html>
<html>
<head>
<title>Search Engine</title>
<meta name="viewreport" content="width=device-width", intial-scale=1>
<link rel="stylesheet" href="css/style.css"/>
<script type="text/javascript" src="validate.js"></script>
</head>
<body>
<div class="container">
<h1 class = "title">Search Engine</h1>
<form name="search" action="search.php" method="post">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="search" id="search">
<div class="input-group-btn">
<button class="gobtn" type="submit">Go!</button>
<i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div>
</body>
</head>
</html>
And this is my search.php code
<?php
$keys = array('search');
$csv_line = array();
foreach($keys as $key){
array_push($csv_line,'' . $_GET[$key]);
}
$fname = 'search.csv';
$csv_line = implode(',',$csv_line);
if(!file_exists($fname)){$csv_line = "\r\n" . $csv_line;}
$fcon = fopen($fname,'a');
$fcontent = $csv_line;
fwrite($fcon,$csv_line);
fclose($fcon);
?>
Whenever I tried to search something, i kept on getting errors on the line array_push($csv_line,'' . $_GET[$key]);
TQ in advance!
above the form
<?php require_once "core-admin/init-admin.php";
if( !isset($_SESSION['admin_username']) ){
$_SESSION['msg'] = 'page can not open';
header('Location:admin_login.php');
}
if(isset($_POST['submit']) ){
$press_type = $_POST['press_type'];
$press_picture = $_FILES['press_picture'];
$type_file = $_FILES['press_picture'] ['type'];
$tmp_file = $_FILES['press_picture']['tmp_name'];
$file_size = $_FILES['press_picture'] ['size'];
if(!empty(trim($press_type)) ) {
if(!empty($_FILES['press_picture']['tmp_name']) ){
if($type_file == "image/jpeg" || $type_file == "image/png" || $type_file == "image/jpg" ){
if($file_size <= 300000){
if(add_press($press_type, $press_picture)) {
$message = 'sukses men.';
echo "<SCRIPT type='text/javascript'>
alert('$message');
window.location.replace(\"add_data_press.php\");
</SCRIPT>";
}
} else { ?>
<script>
alert("failed add data");
</script>
<?php }
}else{ ?>
<script>
alert("size should be below 200kb");
</script>
<?php }
}else{ ?>
<script>
alert("image type should be .jpeg .jpg atau .png");
</script>
<?php }
}else{ ?>
<script>
alert("image can not be empty");
</script>
<?php }
}else{ ?>
<script>
alert("please complete the unfilled form");
</script>
<?php
}
?>
form
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title></title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="../view/css/bootstrap.min.css">
<link rel="stylesheet" href="../view/css/dataTables.bootstrap.min.css">
<!-- Custom styles for this template -->
<link href="../view/css/simple-sidebar.css" rel="stylesheet">
<link rel="stylesheet" href="../view/font-awesome/css/font-awesome.min.css">
</head>
<body>
<?php require_once"../view/header-admin.php";?>
<!-- /#sidebar-wrapper -->
<!-- Page Content if tdk ada ini tidak akan tampil apa apa -->
<div id="page-content-wrapper">
<div class="container-fluid">
<i class="fa fa-th text-danger" aria-hidden="" id="menu-toggle"></i>
<div class="row">
<div class="col-md-12">
<h1 class="display-4">Carolyn Tyler</h1>
<h6>handmade fine jewelry</h6>
<br>
<h5>Add data press</h5>
</div>
</div>
<div class="row justify-content-md-center">
<div class="col-lg-8">
<form action="" method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="form-control-label" for="formGroupExampleInput">Press Type</label>
<input type="text" class="form-control" id="formGroupExampleInput" placeholder="Press Type" name="press_type" required="">
</div>
<div class="form-group">
<label for="exampleFormControlFile1">press picture</label>
<input type="file" class="form-control-file" id="exampleFormControlFile1" name="press_picture">
</div>
<button type="submit" class="btn btn-primary" name="submit">Submit</button>
<br> <br>
</form>
</div>
</div>
</div>
</div>
my problem is, when i access this page. I always get the alert "please complete the unfilled form". in this case I have not done any insert yet but have alerted this page.
but if I split the file # abovethepage # alerts do not show up again. is there any way to make # abovethepage # files still on 1 page but alert does not appear again.?
if you check isset($_POST['submit']) is return false on first time page load
if(isset($_POST['submit']))
thats why your else part run first time page load without submitting form data
When you access the page for the first time, the $_POST is empty(It will only contain data if you send HTTP POST request to your script using submit button). In such case, the below else condition satisfies:
else{ ?>
<script>
alert("please complete the unfilled form");
</script>
<?php
}
This is why it always shows the alert message.
My apologize in advance for my (maybe) stupid question but my knowledge of Javascript/JQuery is almost 0
I have in index.html the following script:
index.html
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#MyDIV")
.load("buttons.php")
});
</script>
<div id="MyDIV"></div>
As you can see, the idea is load buttons.php in a div tag in index.html - That works fine -
buttons.php
<div id="buttom">
<div id="botton5"><img src="5.png" id="5"/></div>
</div>
<script>
$('#botton5').click(function(event){
$("#bottons").load('somepage.php?answer=5'); //here!
});
</script>
Thats also works fine and I receive the information from somepage.php in MyDIV in index.html
but does not work when I include a php in the URL in the line
$("#bottons").load('somepage.php?answer=5&title=<?php echo $title;?>&date=<?php echo $date;?>'); //here!
Including a PHP in load, the div does not load in index.html, can you please support me on how to add a php in the URL in load?
Thanks in advance for your support
#Luis Gerardo Runge In JavaScript you can't use PHP but logically you can take your value in hidden field and use in javascript. i have add some sample code my be it's help you
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<div id="buttom">
<div id="botton5"><img src="5.png" id="5"/></div>
</div>
<div id="bottons">
</div>
<?php
$title = 'your title';
$date = 'yourdate';
?>
<input type="hidden" id="title" name="title" value="<?php echo urlencode($title); ?>">
<input type="hidden" id="date" name="date" value="<?php echo urlencode($date); ?>">
<script>
$('#botton5').click(function(event){
alert('call');
$("#bottons").load('json.php?answer=5&title='+$('#title').val()+'&date='+$('#date').val()+''); //here!
});
</script>
FYI: You need to use urlencode and urldecode for pass parameter through the URL
I am using a raspberry pi to pulse a relay (on the below form submit) to another piece of equipment which if successfully pulsed will toggle a relay on/off. The toggled relay comes back to the pi as an input which is being monitored on the status.php page inside of the loading div. If I load the below page, it correctly displays the status.php, but after pressing the form submit button, it does not reload the status.php page. I have tried everything I can think of, please help!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Alarm Panel</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">// <![CDATA[
$(document).ready(function() {
$.ajaxSetup({ cache: false });
setInterval(function() {
$('#loading').load('/status.php');
}, 2000);
});
// ]]>
</script>
<?php
if (isset($_POST['PULSE'])) {
shell_exec('python /usr/lib/cgi-bin/pulse.py');
}
?>
</head>
<body>
<div id="currentstatus" data-role="collapsible" data-theme="b" data-content-theme="b" data-collapsed="false">
<h1>Current status</h1>
<div id="loading" align="center">
<H3>Loading Status...</H3>
</div>
</div>
<div data-role="collapsible" data-theme="b" data-content-theme="b">
<h4>Change Status</h4>
<form method="post">
<input type="submit" name="PULSE" value="PULSE" />
</form>
</div>
</body>
</html>
status.php
<?php
$status = shell_exec('python /usr/lib/cgi-bin/status.py');
?>
<h3><? echo $status; ?></h3>
<br />
<img src="/img/<? print $status; ?>.jpg" height="250"; width="250";>
have you tried manipulating submit behavior? that may fix it.
$(document).on('click', '[name="pulse"]', function(e) {
e.preventDefault();
$('#loading').load('/status.php');
});
you may also try changing your timeout function... That's a bit tricky because load is an asynchronous function.
var loadStatusTimeout;
function loadStatus() {
$('#loading').load('/status.php', function() {
loadStatusTimeout = setTimeout(loadStatus, 2000);
});
}
loadStatusTimeout = setTimeout(loadStatus, 2000);
also, you're accidentally adding semicolons into your img element:
change:
<img src="/img/<? print $status; ?>.jpg" height="250"; width="250";>
to:
<img src="/img/<? print $status; ?>.jpg" height="250" width="250">
I've been trying for two days to figure out what I am doing wrong. I really think that this code should work, but it doesn't. If I swap out the variable on line 57 it will bring up a file onClick. So logically the problem is the variable. But when I trace the variable on line 60, the variable is returning the correct value. So why won't the image load correctly? When I click on the button, simply nothing happens.
++EDIT++
I've tried a bunch of things, and the problem is absolutely with the variable $file. No matter how I test it, $file corresponds to the id number of the item on the list. But when I hit the button, it always pulls item 1. I even went back and edited the code to read:
<img id="loadingImage" src="../maps/<?php echo $name['id']?>.gif" style="visibility:hidden"/>
There is no reason on earth that I can find that this isn't working. 'id' is iterating properly. So why does it think 'id'=1 only after I hit the button?
Here's the code:
<!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">
<html lang="en">
<head>
<meta charset="utf-8">
<title>List of Parks</title>
<link href="guide.css" rel="stylesheet" type="text/css">
<style type="text/css"></style>
<script type="text/javascript" src="../jQuery/jQuery.js"></script>
<script type="text/javascript">
<!--
function showImage() {
document.getElementById('loadingImage').style.visibility = 'visible';
}
-->
</script>
</head>
<body>
<div id="container">
<div id="state"></div>
<div id="list">
<?php foreach ($datas as $name):
{
if ($name['state'] == 'PA')
{
?>
<input type="hidden" name="id" value="<?php echo $name['id']; ?>">
<h2><?php echo htmlspecialchars($name['name'], ENT_QUOTES, 'UTF-8');?></h2>
<?php htmlspecialchars($name['site'], ENT_QUOTES, 'UTF-8');?>
<?php $link = $name['site']; ?>
<ul id="link">
<li class="l1"><?php echo "<a href=$link>$link</a>" ?></li>
</ul>
<br>
<?php echo htmlspecialchars($name['description'], ENT_QUOTES, 'UTF-8');?>
<?php echo htmlspecialchars($name['street'], ENT_QUOTES, 'UTF-8');?>
<br>
<?php echo htmlspecialchars($name['city'], ENT_QUOTES, 'UTF-8');?> ,
<?php echo htmlspecialchars($name['state'], ENT_QUOTES, 'UTF-8');?>
<?php echo htmlspecialchars($name['zip'], ENT_QUOTES, 'UTF-8');?>
<?php $file = $name['id'];
$image = '../maps/'.$file.'.gif';?>
<input type="button" value="click for map" onclick="showImage();" />
<div id="trailmap">
**<img id="loadingImage" src="<?php $image ?>" style="visibility:hidden" />**
</div>
<?php echo $image?>
<hr width="100%" size="3" black />
<?php
}
}
endforeach; ?>
</div>
</div>
<div class="fixbox">
<div id="statemap"></div>
<div id="home"></div>
<div id="guide"></div>
</div>
</body>
</html>