Hi I am trying to make a personal code playground... I am using Code Mirror to turn into looking like an IDE (I also plan to add features of an IDE later but...). My current code is basically..
HTML (index.html)
<html>
<head>
<link href="main.css" rel="stylesheet" type="text/css" />
<script src="http://codemirror.net/lib/codemirror.js"></script>
<link href="http://codemirror.net/lib/codemirror.css" rel="stylesheet" />
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
</head>
<body>
<div class="codewindow">
<form id="codePush" action="codePush.php" method="POST" target="codeResults">
<textarea id="htmlWindow"></textarea>
<textarea id="cssWindow"></textarea>
<textarea id="jsWindow"></textarea>
<input type="submit" />
</form>
<script class="code">
var htmlCodeMirror = CodeMirror(function(elt) {
htmlWindow.parentNode.replaceChild(elt, htmlWindow);
}, {value: "<!-- HTML goes here -->",
lineNumbers: true,
mode: "text"});
</script>
<script class="code">
var cssCodeMirror = CodeMirror(function(elt) {
cssWindow.parentNode.replaceChild(elt, cssWindow);
}, {value: "/* CSS goes here. */",
lineNumbers: true,
mode: "css"});
</script>
<script class="code">
var jsCodeMirror = CodeMirror(function(elt) {
jsWindow.parentNode.replaceChild(elt, jsWindow);
}, {value: "// JavaScript goes here.",
lineNumbers: true,
mode: "javascript"});
</script>
</div>
<div class="output">
<iframe id="codeResults" name="codeResults" target="codePush.php" width="100%" height="100%" frameBorder="0.5" scrolling="yes"></iframe>
</div>
</body>
PHP (codePush.php)
<!DOCTYPE html>
<html>
<head>
<style>
<?php
echo $_GET['cssWindow'];
?>
</style>
<script type="text/javascript">
<?php
echo $_GET['jsWindow'];
?>
</script>
</head>
<body>
<?php
echo $_GET['htmlWindow'];
?>
</body>
</html>
I have made sure the link to the iFrame works because when adding text to the PHP file in the body section it displays when submit is pressed.
I hope I have made it clear and would appreciate any help...
Just for reference I am a bit of a NOoB when it comes to PHP
I'm not entriely sure what you're trying to achieve with all the code you provided, but here's a simplified version that will fix the main issue of the code not processing in codePush.php:
<div class="codewindow">
<form id="codePush" action="codePush.php" method="POST" target="codeResults">
HTML:<textarea id="htmlWindow" name="htmlWindow"></textarea>
CSS:<textarea id="cssWindow" name="cssWindow"></textarea>
JS:<textarea id="jsWindow" name="jsWindow"></textarea>
<input type="submit" />
</form>
</div>
<div class="output">
<iframe id="codeResults" name="codeResults" target="codePush.php" width="100%" height="100%" frameBorder="0.5" scrolling="yes"></iframe>
</div>
CodePush.php
<!DOCTYPE html>
<html>
<head>
<style>
<?php
echo $_POST['cssWindow'];
?>
</style>
<script type="text/javascript">
<?php
echo $_POST['jsWindow'];
?>
</script>
</head>
<body>
<?php
echo $_POST['htmlWindow'];
?>
</body>
</html>
Note that CodePush.php uses 'POST' not 'GET' so that it is consistent with your form. You were also missing 'name' attributes on the textareas which is what is used in the post (not the ids).
You might want to consider adding in some checks if the fields aren't complete to avoid errors etc.
Related
Currently, I have a jquery function that I'm trying to get to display the time (the jquery I'm using is the Basic Example found here: http://jonthornton.github.io/jquery-timepicker/). When I implement Mr. Thornton's timepicker, I may click on the input field and a list of time options drops down, however there is no scroll bar/slider on the side of the drop down (as there is in his example). The time value that I select (I can use the mouse scroller to move up and down in the selection) is able to be inserted into my SQL db (via $_POST) with no problems, however, I would like to be able to use some of the other jquery examples listed on Mr. Thornton's site - but none of them (with the exception of the Basic Example - which seems to be only partially working) will work. Attached is the pertinent code. Any input would be much appreciated. Also, I tried going through this tutorial (https://www.digitalocean.com/community/tutorials/an-introduction-to-jquery) and hence I tried adding the script (note: 10/9/17 https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js) but that didn't seem to have any effect.
<?php
//DOCTYPE begins header.html
include_once("includes/header.html");
<!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>
<!--<style media="screen"></style>-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Crime Stoppers</title>
<!--added 10/9/17-->
<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>-->
<!--<script src="js/scripts.js"></script>-->
<!--Austin's Original links and scripts-->
<link rel="stylesheet" type="text/css" href="./styles/styles.css"/>
<link rel="stylesheet" href="./jquery/css/excite-bike/jquery-ui-1.10.3.custom.css"/>
<link rel="stylesheet" href="./jquery/css/excite-bike/jquery-ui-1.10.3.custom.min.css"/>
<link rel="stylesheet" href="./jquery/timepicker/jquery.timepicker.css"/>
<script type="text/javascript" src="./jquery/js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="./jquery/js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="./jquery/js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="./jquery/timepicker/jquery.timepicker.js"></script>
<script type="text/javascript">
$(function () {
$('#basicExample').timepicker();
// $('#scrollDefaultExample').timepicker({ 'scrollDefault': 'now' });
// $('#setTimeExample').timepicker();
// $('#setTimeButton').on('click', function (){
// $('#setTimeExample').timepicker('setTime', new Date());
// });
});
</script>
</head>
<body>
<div id="header" align="center"><img src="./images/document.png" alt="header"/></div>
<div align="center">
<h1>Crime Stoppers Report</h1>
<form class="formLayout" action="Violent.php" method="POST">
<fieldset class="table">
<legend>Crime</legend>
<div class="tr">
<div class="td right">Date of Call:</div>
<div class="td"><input type="text" class="datepicker" name="callDate"></div>
<div class="td right">Time of Call:</div>
<div class="td"><input type="text" id="basicExample" name="callTime"></div>
</div>
</fieldset>
</form>
</div>
The following code displays the scroll bar for me, as well as enables basic timepicker, as well as the set date example. Its not every example, but will get you on your way
<!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>Crime Stoppers</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/timepicker#1.11.12/jquery.timepicker.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/timepicker#1.11.12/jquery.timepicker.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#basicExample').timepicker();
$('#setTimeButton').on('click', function () {
$('#basicExample').timepicker('setTime', new Date());
})
});
</script>
</head>
<body>
<div id="header" align="center"><img src="./images/document.png" alt="header" /></div>
<div align="center">
<h1>Crime Stoppers Report</h1>
<form class="formLayout" action="Violent.php" method="POST">
<fieldset class="table">
<legend>Crime</legend>
<div class="tr">
<div class="td right">Date of Call:</div>
<div class="td"><input type="text" class="datepicker" name="callDate"></div>
<div class="td right">Time of Call:</div>
<div class="td"><input type="text" id="basicExample" name="callTime"></div>
</div>
</fieldset>
</form>
<button id="setTimeButton">Set current time</button>
</div>
</body>
</html>
Your problem is probably about calling the JavaScript functions before the document is fully loaded.
$(function() {
$(document).ready(function() {
// Your code here
}
});
It is always best practice to use JavaScript only when the document is ready (a.k.a. document.onload event), replaced by jQuery's $(document).ready() event.
tried to ask this question earlier but made a total mess of it. so thought i'd try it again but clearer this time.
how can you get php variables to display in loaded content using JQuery?
index.php:
<!doctype html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script>
$(document).ready(function(){
$('#clickMe').click(function(){
$('#parent').load('loaded.php #child', {},function(){
});
});
});
</script>
</head>
<?php
session_start();
$test = "this should display php string";
$_SESSION['another'] = "Session variable String";
echo ' tests to see if they work below <br>';
echo $test."<br>";
echo $_SESSION['another']."<br><br>";
?>
<button name="clickMe" id="clickMe" class="clickMe">Click me</button>
<div class="parent" name="parent" id="parent" style="background-color:yellow; height:200px; width:200px;">
</div>
<body>
</body>
</html>
loaded.php:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<div name="child" id="child" class="child">
<p1> html loads fine..</p1><br>
<?php echo $test ?><br>
<?php echo $_SESSION['another'] ?>
</div>
</body>
</html>
As stated by #Fred -ii- in the comments, you only have to fetch the session in your index.php file to do this.
If you want to get a part of another web page inside index.php :
Your index.php should contain this call :
$(document).ready(function(){
$('#clickMe').click(function(){
$('#parent').load('loaded.php'); // No need for additional parameters
});
});
You don't need to select a part of the HTML, return just what you need :
loaded.php :
<?php session_start() ?>
<p>Example text</p>
<?php echo $_SESSION['another'] ?>
So I have two iframes in page
<div id="ch">
<iframe name="users" width="220" height="510" align="left" src='messages/users.php' id="userch" ></iframe>
<iframe name="text" width="450" height="405" src='messages/text.php'></iframe>
</div>
So I have variables in first iframe and I need to sent them into second iframe. I tried to use method GET. But any method that will work is good.
so first iframe
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta content="10; url=users.php" HTTP-EQUIV=Refresh>
<meta content="utf-8" http-equiv="encoding">
<link href="../css/chat.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery-2.1.3.js"></script>
<script type="text/javascript" src="../js/ch_users.js"></script>
</head>
<body >
<div class="ess_contact">
<div>
</body>
</HTML>
2-nd iframe
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<meta content="utf-8" http-equiv="encoding">
<meta content="5; url=text.php?active=<?=$active;?>" HTTP-EQUIV=Refresh>
</head>
<body onload="scroll(0,100)" link="blue" alink="blue" vlink="blue">
<font size=3 face="Georgia">
<?php
if (isset($_GET['active']))
{
$active=$_GET['active'];
echo $active;
}
?>
</body>
</html>
and js file
jQuery.noConflict();
jQuery(document).ready(function($) {
$(document).on('click','.ess_contact', function () {
var active = this.id;
$.get( "text.php", { active: active} );
});
});
Since you are already using PHP, you can start a session using session_start() and pass all your data through session variables.
Set:
$_SESSION['myvar']="the data";
Read:
if(isset($_SESSION['myvar'])){
echo $_SESSION['myvar'];
}
Using the above, you can use GET or POST to transfer data across php pages. Unless you really have the restriction to use JQuery.
I tried transferring data between iframes, and this is how I did it.
Main.html
<html>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<h2>Iframe data test</h2><br/>
<h2>Iframe 1</h2>
<iframe src="f1.html" id="frame1"></iframe>
<br/>
<br/>
<h2>Iframe 2</h2>
<iframe src="f2.html" id="frame2"></iframe>
</body>
</html>
f1.html
<html>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<body>
<h2>Iframe 1 here</h2><br/>
<input type="text" id="mydata"/><br/>
<input type="button" id="send" value="send data"/>
</body>
<script>
$(document).ready(function(){
$("#send").click(function(){
parent.$("#frame2").contents().find("#target").html($("#mydata").val());
});
});
</script>
</html>
f2.html
<html>
<body>
<h2>Iframe 2 here</h2><br/>
<div id="target"></div>
</body>
</html>
You see the two iframes on the Main page. Type anything in the textbox and click Send data, the contents of the textbox will be set in a div found in the second iframe.
Here i used AJAX. It's nearer to your code.
Here i created a jQuery.
This is the index.php file.
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
<script src="t.js"></script>
</head>
<body>
<h1>Below is iframe</h1>
<iframe name="users" width="220" height="510" align="left" src='2.php' id="userch" ></iframe>
<iframe name="text" width="450" height="405" src='3.php' class="f3"></iframe>
</body>
</html>
Here is frame 1. Name 2.php;
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
<script src="t.js"></script>
</head>
<body>
<h2>Hello Milan from frame 2</h2>
<h2>hello</h2>
<h2>world!</h2>
</body>
</html>
Here is frame 2. Name:3.php
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
<script src="t.js"></script>
</head>
<body>
<h2>Hello Milan from frame 3</h2>
<div class="msg"></div>
<?php
if(isset($_REQUEST['active']))
{
echo $_REQUEST['active'];
}
?>
</body>
</html>
And here is a jQuery named t.js.
function ifrm(){
$(document).ready(function (){
$("h2").click(function (){
var r=$(this).text();
$.ajax({url:"3.php",data:{active:r},success: function (data) {
parent.$('.f3').contents().find('.msg').html(data);
}});
});
});
}
ifrm();
Click on any text in 2.php file and you can see what's going on in 3.php.
How to use date picker in Codeigniter?
My view part looks like this
<html>
<head>
<link href="css/CalendarControl.css" rel="stylesheet" type="text/css">
<script language="javascript" src="js/CalendarControl.js"></script>
</head>
<body>
<table>
<tr>
<td><input name="txtdatefrom" type="text" id="txtdatefrom" onClick="return showCalendarControl(this);" style="background:#fff;border:1px solid #999;color:#999; text-align:center" value="From" onKeyPress="return disableEnterKey(event)"/></td>
<td><input name="txtdateto" type="text" id="txtdateto" onClick="return showCalendarControl(this);" style="background:#fff;border:1px solid #999;color:#999; text-align:center" value="To" onKeyPress="return disableEnterKey(event)"/></td>
<td><input type="submit" value="submit" name="submit" id="submit" /></td>
</tr>
</table>
</body>
</html>
And my controller
public function calender(){
$this->load->view('news/calender1');
}
install datecker's js then call function datepicker() using jQuery on id on which you want date.
This might help you out: Using Datetime picker
Or for Codeigniter:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="development-bundle/themes/ui-lightness/jquery.ui.all.css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jQuery UI Datepicker Example 1</title>
<script type="text/javascript" src="development-bundle/jquery-1.4.2.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript">
$(function(){
$("#date").datepicker();
});
</script>
</head>
<body>
<label>Enter a date: </label><input id="date">
</body>
</html>
Download the jquery.ui for datepicker from the internet and put the file in your folder.the file is stored in assessts/js/jquery_ui.the stored location is on your wish
1. jquery-ui.css
2. jquery-ui.js
3. jquery-ui.min.js
provide the css link in head section
<link href="<?php echo base_url('assests/js/jquery_ui/jquery-ui.css');?>" rel="stylesheet">
provide the javascript in body section
<script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.js');?>"></script>
<script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.min.js');?>"></script>
your code be look like this
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<link href="<?php echo base_url('assests/js/jquery_ui/jquery-ui.css');?>" rel="stylesheet">
<script type="text/javascript">
$(function(){
$("#date").datepicker();
});
</script>
</head>
<body>
<label>Enter a date: </label><input id="date">
<script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.js');?>"></script>
<script src="<?php echo base_url('assests/js/jquery_ui/jquery-ui.min.js');?>"></script>
</body>
</html>
and finally in control load the view and javascript library
include datepicker js and see the result.
<div class="text">
<?php
$data = array(
'name' => "registration_date",
'id' => "registrationDate",
'class' => "datepicker",
'readonly' => "true",
'value' => $this->input->post('registration_date')
);
echo form_input($data);
?>
<span class="text-error"><?php
echo form_error('registration_date');
?></span></div>
I have a SlickGrid set up, it is reading data from my database with PHP, my problem is arising when i try to save the data back to my database, I am trying to use JSON to give me an array that I can then use to write back to the database, i have see this thread explaining this:
Saving changes in SlickGrid
So I have the hidden form element in my code, and am using JSON to encode the data variable, the assign it to the data hidden input on the form, this form posts to a page called save_price.php, the trouble is when I print_r, or var_dump the data variable, I get null as an output, I think it might be something to do with how I am using PHP to add the content into the data variable, either that or I am doing something really obviously wrong, hopefully you can see what the problem is, there isn't a great deal of documentation online about retrieving/saving to a db with PHP, so I'm kinda stuck banging my head against the wall on this one, here's my code:
Ok so I found the problem, just incase anyone is struggling to get this all to work, here is the working code, it gets data from a database, then sends the changed data to another page for processing, it nees a little bit of refinements, that will happen once I've got it all implemented:
<?php
include("includes/check_session.php");
require_once('includes/functions.php');
require_once('includes/config.php');
$data = '';
$i = 0;
$query = "
SELECT * FROM `prices`";
$result = mysql_query($query);
while($row = mysql_fetch_array($result, MYSQL_ASSOC)){
$data .= '
data['.$i.'] = {
id: "'.$row['id'].'",
title: "'.$row['title'].'",
duration: "'.$row['duration'].'",
percentComplete: "'.$row['percentComplete'].'",
start: "'.$row['start'].'",
finish: "'.$row['finish'].'",
effortDriven: "'.$row['effortDriven'].'"
};
';
$i++;
echo $data;
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<?php // include("includes/cms_head_scripts.php"); ?>
<link rel="stylesheet" href="css/slick.grid.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="css/examples.css" type="text/css" media="screen" charset="utf-8" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script language="javascript" src="js/jquery.json.js"></script>
</head>
<body>
<div id="content_cont">
<div id="main">
<div style="position:relative">
<div style="width:600px;">
<div id="myGrid" style="width:100%;height:500px;"></div>
</div>
</div>
pricing
</div><!-- #main -->
</div><!-- #content_cont -->
<script src="lib/firebugx.js"></script>
<script src="lib/jquery-ui-1.8.5.custom.min.js"></script>
<script src="lib/jquery.event.drag-2.0.min.js"></script>
<script src="slick.core.js"></script>
<script src="plugins/slick.cellrangeselector.js"></script>
<script src="plugins/slick.cellselectionmodel.js"></script>
<script src="slick.editors.js"></script>
<script src="slick.grid.js"></script>
<script type="text/javascript">
var grid;
var data = [];
var columns = [
{id:"title", name:"Title", field:"title", editor:TextCellEditor},
{id:"duration", name:"Duration", field:"duration", editor:TextCellEditor},
{id:"%", name:"% Complete", field:"percentComplete", editor:TextCellEditor},
{id:"start", name:"Start", field:"start", editor:TextCellEditor},
{id:"finish", name:"Finish", field:"finish", editor:TextCellEditor},
{id:"effort-driven", name:"Effort Driven", field:"effortDriven", editor:TextCellEditor}
];
var options = {
editable: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: true
};
$(function() {
<?php echo $data ?>
grid = new Slick.Grid($("#myGrid"), data, columns, options);
})
</script>
<form method="POST" action="save_price.php">
<input type="submit" value="Save">
<input type="hidden" name="data" value="">
</form>
<script type="text/javascript">
$(function() {
$("form").submit(
function() {
$("input[name='data']").val($.JSON.encode(data));
}
);
});
</script>
</body>
</html>