I am working on a signature capturing plugin named "jsignature" in my project.
I want to add it as one of the fields in my form as below.
But I don't want to use a click function in the form as well as a textarea in the form. Only changing the signature and submitting the data should save in the post. I want to customise this with javascript unfortunately, I am failing in trying to figure this out.
My code looks like this:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<!-- jQuery -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/jsignature#2.1.2/libs/jSignature.min.js"></script>
<!--[if lt IE 9]>
<script type="text/javascript" src="libs/flashcanvas.js"></script>
<![endif]-->
<!-- jSignature -->
<style>
#signature {
width: 100%;
height: auto;
border: 1px solid black;
}
</style>
<form method="post" action="test.php">
<!-- Signature area -->
<div id="signature"></div>
<br /> <input type='button' id='click' value='click'>
<textarea id='output' name='sig'></textarea>
<br />
<!-- Preview image -->
<img src='' id='sign_prev' style='display: none;' /> <input
type="submit" name="submit">
</form>
<!-- Script -->
<script>
$(document).ready(function() {
// Initialize jSignature
var $sigdiv = $("#signature").jSignature({
'UndoButton' : true
});
true
$('#click').click(function() {
// Get response of type image
var data = $sigdiv.jSignature('getData', 'image');
// Storing in textarea
$('#output').val(data);
// Alter image source
$('#sign_prev').attr('src', "data:" + data);
$('#sign_prev').show();
});
});
</script>
</html>
I do not know where to change the code. I want to save the data in a database after submitting the form without having any textareas and click buttons. Can someone suggest me a post, tutorial or some help?
i guess this is what you are looking for
<script>
$(document).ready(function() {
// Initialize jSignature
var $sigdiv = $("#signature").jSignature({
'UndoButton' : true
});
true
$('#signature').change(function() {
var data = $sigdiv.jSignature('getData', 'image');
// Storing in textarea
$('#output').val(data);
// Alter image source
$('#sign_prev').attr('src', "data:" + data);
$('#sign_prev').show();
});
});
</script>
Related
So basically I have this program that sets a header (id="infoHeader") at the top of the page to some text retrieved from another site. I need this however to change when a button is pressed. As you can see it currently uses a PHP script to fetch the text from a given URL but I need to fetch from a different URL when a button is pressed. So basically
Button1 press -> infoHeader = Site 1 text
Button2 press -> infoHeader = Site 2 text
Is there a way to use a button to change the innerHTML of [id="infoHeader"] so that it runs the PHP script to get the text.
It is kind of difficult for me to explain, if you need I can try and give more info.
<!DOCTYPE HTML>
<html>
<head>
<title>KSA Flight Tracker</title>
<link rel="stylesheet" type="text/css" href="KSAStyle.css"/>
</head>
<body>
<div id=page>
<div id=leftPanel>
<p id=missionsHeader>Active Missions</p>
<p><?php include("getList.php")?></P>
</div>
<div id=info>
<p id=infoHeader><?php include("getData.php"); getTitle("http://www.blade-edge.com/images/KSA/Flights/craft.asp?r=true&db=dunai"); ?></p>
</div>
</div>
</body>
You need to use JavaScript + AJAX. JavaScript is needed to change the content of the div after the page is loaded/rendered and AJAX for loading a PHP file without the need to refresh the web page.
I recommend you to use jQuery and it's ajax function.
<!DOCTYPE html>
<html>
<head>
<title>KSA Flight Tracker</title>
<link rel="stylesheet" type="text/css" href="KSAStyle.css"/>
<!-- include jQuery -->
<script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function() { // wait for the DOM to finish loading
// button1
$("#someID").click(function() { // element with id "someID" (your button)
$.ajax({
url: "getData.php", // the content of the page which you want to load
cache: false
}).done(function(dataFromServer) {
$("#infoHeader").html(dataFromServer); // set the data from the server (getData.php) as the content of the element with the id "infoHeader"
});
}):
// button2
// the same as above for the other button
});
</script>
</head>
<body>
<div id="page">
<div id="leftPanel">
<p id="missionsHeader">Active Missions</p>
<p> <?php include("getList.php"); ?> </p>
</div>
<div id="info">
<p id="infoHeader"> <?php include("getData.php"); getTitle("http://www.blade-edge.com/images/KSA/Flights/craft.asp?r=true&db=dunai"); ?> </p>
</div>
</div>
</body>
</html>
For your problem:
Change content of div - jQuery
http://api.jquery.com/jquery.ajax/
Here are some good resources for JavaScript, jQuery and AJAX:
JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript
jQuery: http://en.wikipedia.org/wiki/JQuery
jQuery: http://www.w3schools.com/jquery/
jQuery: http://www.codecademy.com/en/tracks/jquery
jQuery + AJAX: http://www.w3schools.com/jquery/jquery_ajax_intro.asp
i want to delete a record that are showing in while loop from the database but before deleting i want to display a confirmation box.The code i have written is below.it is working fine but to delete record i need to pass an id that i haave described in the code
------index.php starts
<!DOCTYPE html><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A jQuery Confirm Dialog Replacement with CSS3 | Tutorialzine Demo</title>
<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.confirm/jquery.confirm.css" />
</head>
<body>
<div id="page">
<?php
$sql = "SELECT * FROM tablename";
$result = db_query($sql);
while(db_fetch($result))
{
?>
//here we need to pass the fetched record id to script.js file,but i dont know how
<div class="item">
<div class="delete"></div> //here i have applied css i.e it displays wrong icon, when we click on that icon ,it is showing confirmation box. Everything is perfect in this.. but i wnat to pass and id.. im new to jquery
</div>
<?php
}
?>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="jquery.confirm/jquery.confirm.js"></script>
<script src="js/script.js"></script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A jQuery Confirm Dialog Replacement with CSS3 | Tutorialzine Demo</title>
<link href='http://fonts.googleapis.com/css?family=Cuprum&subset=latin' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.confirm/jquery.confirm.css" />
</head>
<body>
<div id="page">
<?php
$sql = "SELECT * FROM tablename";
$result = db_query($sql);
while(db_fetch($result))
{
?>
<div class="item">
<div class="delete"></div>
</div>
<?php
}
?>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="jquery.confirm/jquery.confirm.js"></script>
<script src="js/script.js"></script>
</body>
</html>
----index.php ends
----jquery.confirm.js file starts
(function($){
$.confirm = function(params){
if($('#confirmOverlay').length){
// A confirm is already shown on the page:
return false;
}
var buttonHTML = '';
$.each(params.buttons,function(name,obj){
// Generating the markup for the buttons:
buttonHTML += ''+name+'<span></span>';
if(!obj.action){
obj.action = function(){};
}
});
var markup = [
'<div id="confirmOverlay">',
'<div id="confirmBox">',
'<h1>',params.title,'</h1>',
'<p>',params.message,'</p>',
'<div id="confirmButtons">',
buttonHTML,
'</div></div></div>'
].join('');
$(markup).hide().appendTo('body').fadeIn();
var buttons = $('#confirmBox .button'),
i = 0;
$.each(params.buttons,function(name,obj){
buttons.eq(i++).click(function(){
// Calling the action attribute when a
// click occurs, and hiding the confirm.
obj.action();
$.confirm.hide();
return false;
});
});
}
$.confirm.hide = function(){
$('#confirmOverlay').fadeOut(function(){
$(this).remove();
});
}
})(jQuery);
----jquery.confirm.js file ends
-----script.js file starts
$(document).ready(function(){
$('.item .delete').click(function(){
var elem = $(this).closest('.item');
$.confirm({
'title' : 'Delete Confirmation',
'message' : 'You are about to delete this item. <br />It cannot be restored at a later time! Continue?',
'buttons' : {
'Yes' : {
'class' : 'blue',
'action': function(){
elem.slideUp();
//sql delete query will be written here... in where condition i need to pass the fetched record id from index.php file in where condtion
}
},
'No' : {
'class' : 'gray',
'action': function(){} // Nothing to do in this case. You can as well omit the action property.
}
}
});
});
});
-----script.js ends
You can use the html data attribute and retrieve it with .data jQuery method
In your HTML:
<div class="delete" data-id="{$id}"></div>
In your Javascript
$('.item .delete').click(function(){
var elem = $(this).closest('.item');
var id = elem.data('id'); /* this is your db id */
});
Are you sure you want to send a query from Javascript? The usual way to do this is to send a request (via jQuery) with that specific id, to a script which runs the query (server side), and returns a response.
Now, since you add the item divs, using a while, why not add an id property to the divs, which contain the id from the database, something like
<div id="item<?php echo $row['id'];?>" class="item">
<div class="delete">
</div>
This way, the $('.item .delete').click handler has access to the item's id, by parsing the target's id property, and you don't need to pass it explicitly to jQuery.
Here you can use hidden field to save value for id and then use jquery to retrieve it from hidden field..
while(db_fetch($result))
{
?>
//here we need to pass the fetched record id to script.js file,but i dont know how
<input type="hidden" id="hid_id" value="<?php echo 'fetched id';?>" />
<div class="item">
<div class="delete"></div> //here i have applied css i.e it displays wrong icon, when we click on that icon ,it is showing confirmation box. Everything is perfect in this.. but i wnat to pass and id.. im new to jquery
</div>
<?php
}
?>
And then in jquery when using confirm box you can get value by id hid_id .
The response has about 500 records and it looks ugly in auto-complete. If more than 10 suggestion then is there any change make the list look like combobox instead of very long list?
Thanks
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$('#textbox_postcode').autocomplete(
{
source: 'search-db.php',
minLength: 3
});
});
</script>
</head>
<body>
<input type="text" id="textbox_postcode" value="" />
</body>
</html>
add the following to your .css file.
.ui-autocomplete {
max-height: 100px !important;
overflow-y: scroll;
}
max-height can be whatever you would like.
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>
i am using facebox (a jquery modal plug-in) and tinymce for my textboxes. however when i open any modal windows, i cannot type anything within the tinymce input box.
any help?
<script type="text/javascript" src="resources/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</script>
<link href="resources/facebox.css" media="screen" rel="stylesheet" type="text/css"/>
<script src="resources/facebox.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function($) {
$('a[rel*=facebox]').facebox()
})
</script>
<?php
echo "<div style='display: none;' id='c".$oh_id."' rel='facebox'><div style='overflow: -moz-scrollbars-vertical; overflow-y: auto; width: 100%; height: 375px;'><h2 style='color: #3399cc;'>Comments for ".$row_clientName['clientName']."</h2>";
echo '<form method="post" action="somepage">
<textarea name="content" id="content" style="width: 300px; height: 125px;">
Comments...
</textarea><br />
<input type="submit" value="Update" name="submit" class="comment_button"/><p>
</form></div>';
?>
Call this when your modal window loads:
var mce_editor = $('<textarea cols="10" rows="110" />');
mce_editor.tinymce({ script_url: '/{your path}/tinymce/tiny_mce.js', theme: "advanced", template_replace_values: { username: "Sample User", staffid: "991234"} });
Hope this helps.