Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 months ago.
Improve this question
I am editing a laravel project and I would like to add a signature feature. I have this code down below that is mobile responsive. But I couldn't figure out how to connect it to an existing
Lets say for example that server name: localhost. username: db_test. password:db123. database name:db_test
the table I want to insert it in is $booking->signature.
<?php
if(isset($_POST['signaturesubmit'])){
$signature = $_POST['signature'];
$signatureFileName = uniqid().'.png';
$signature = str_replace('data:image/png;base64,', '', $signature);
$signature = str_replace(' ', '+', $signature);
$data = base64_decode($signature);
$file = 'signatures/'.$signatureFileName;
file_put_contents($file, $data);
$msg = "<div class='alert alert-success'>Signature Uploaded</div>";
}
?>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<style>
#canvasDiv{
position: relative;
border: 2px dashed grey;
height:300px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<br>
<?php echo isset($msg)?$msg:''; ?>
<h2>Sign Here</h2>
<hr>
<div id="canvasDiv"></div>
<br>
<button type="button" class="btn btn-danger" id="reset-btn">Clear</button>
<button type="button" class="btn btn-success" id="btn-save">Save</button>
</div>
<form id="signatureform" action="" style="display:none" method="post">
<input type="hidden" id="signature" name="signature">
<input type="hidden" name="signaturesubmit" value="1">
</form>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha256-pasqAKBDmFT4eHoN2ndd6lN370kFiGUFyTiUHWhU7k8=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script>
$(document).ready(() => {
var canvasDiv = document.getElementById('canvasDiv');
var canvas = document.createElement('canvas');
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
$("#canvas").attr('height', $("#canvasDiv").outerHeight());
$("#canvas").attr('width', $("#canvasDiv").width());
if (typeof G_vmlCanvasManager != 'undefined') {
canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");
$('#canvas').mousedown(function(e) {
var offset = $(this).offset()
var mouseX = e.pageX - this.offsetLeft;
var mouseY = e.pageY - this.offsetTop;
paint = true;
addClick(e.pageX - offset.left, e.pageY - offset.top);
redraw();
});
$('#canvas').mousemove(function(e) {
if (paint) {
var offset = $(this).offset()
//addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
addClick(e.pageX - offset.left, e.pageY - offset.top, true);
console.log(e.pageX, offset.left, e.pageY, offset.top);
redraw();
}
});
$('#canvas').mouseup(function(e) {
paint = false;
});
$('#canvas').mouseleave(function(e) {
paint = false;
});
var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;
function addClick(x, y, dragging) {
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
}
$("#reset-btn").click(function() {
context.clearRect(0, 0, window.innerWidth, window.innerWidth);
clickX = [];
clickY = [];
clickDrag = [];
});
$(document).on('click', '#btn-save', function() {
var mycanvas = document.getElementById('canvas');
var img = mycanvas.toDataURL("image/png");
anchor = $("#signature");
anchor.val(img);
$("#signatureform").submit();
});
var drawing = false;
var mousePos = {
x: 0,
y: 0
};
var lastPos = mousePos;
canvas.addEventListener("touchstart", function(e) {
mousePos = getTouchPos(canvas, e);
var touch = e.touches[0];
var mouseEvent = new MouseEvent("mousedown", {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(mouseEvent);
}, false);
canvas.addEventListener("touchend", function(e) {
var mouseEvent = new MouseEvent("mouseup", {});
canvas.dispatchEvent(mouseEvent);
}, false);
canvas.addEventListener("touchmove", function(e) {
var touch = e.touches[0];
var offset = $('#canvas').offset();
var mouseEvent = new MouseEvent("mousemove", {
clientX: touch.clientX,
clientY: touch.clientY
});
canvas.dispatchEvent(mouseEvent);
}, false);
// Get the position of a touch relative to the canvas
function getTouchPos(canvasDiv, touchEvent) {
var rect = canvasDiv.getBoundingClientRect();
return {
x: touchEvent.touches[0].clientX - rect.left,
y: touchEvent.touches[0].clientY - rect.top
};
}
var elem = document.getElementById("canvas");
var defaultPrevent = function(e) {
e.preventDefault();
}
elem.addEventListener("touchstart", defaultPrevent);
elem.addEventListener("touchmove", defaultPrevent);
function redraw() {
//
lastPos = mousePos;
for (var i = 0; i < clickX.length; i++) {
context.beginPath();
if (clickDrag[i] && i) {
context.moveTo(clickX[i - 1], clickY[i - 1]);
} else {
context.moveTo(clickX[i] - 1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
context.closePath();
context.stroke();
}
}
})
</script>
</html>
You have to set the DB credentials in .env file. It's in the root of your project. If it does not exists, you can rename .env.example and make changes to it.
Based on your code (interaction with database in view is not standard in an MVC framework, atleast), I think it's better to get familiar with laravel first. There are a lot resources to learn it.
Related
how to implement alexa script in piwik subdomain?
here is the code :
<script type=“text/javascript”>
_atrk_opts = {
atrk_acct:“KeWOp1P8cT20VRss”, domain:“example.com”,dynamic: true};
(
function() {
var as = document.createElement(‘script’); as.type = ‘text/javascript’;
as.async = true;
as.src = “https://d31qbv1cthcecs.cloudfront.net/atrk.js“;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(as, s);
}
)();
</script>
<noscript>
<img src=“https://d5nxst8fruw4z.cloudfront.net/atrk.gif?account=KeWOp1P8cT20VR” style=“display:none” height=“1” width=“1" alt=“” />
you can edit layout file :
plugins/Morpheus/templates/layout.twig
add your certify code before end of head tag
<script type=“text/javascript”>
_atrk_opts = {
atrk_acct:“KeWOp1P8cT20VRss”, domain:“example.com”,dynamic: true};
(
function() {
var as = document.createElement(‘script’); as.type = ‘text/javascript’;
as.async = true;
as.src = “https://d31qbv1cthcecs.cloudfront.net/atrk.js“;
var s = document.getElementsByTagName(‘script’)[0];
s.parentNode.insertBefore(as, s);
}
)();
</script>
<noscript>
<img src=“https://d5nxst8fruw4z.cloudfront.net/atrk.gif?account=KeWOp1P8cT20VR” style=“display:none” height=“1” width=“1" alt=“” />
</noscript>
</head>
I'm developing a mobile app that allows a user to record some data about their favourite monuments. Now, when a user takes a photo of their monument the lat and long values are instantly recorded. Giving me two separate values.
The user then syncs this data with my PostGreSQL database. I want to manipulate this data on my website service.
All I want is a simple map plugin which will take each (so like a foreach loop) record relating to a user (name of monument, lat and long) and display it on a map with icon markers.
So for example, you could have a favourite monument in Cardiff and one in London. You would have two markers displayed on your account map and when you click on their a pop-up says 'Cardiff Museum' and 'London Eye'.
I've tried multiple searches on Google but to no avail.
Has anyone ever implemented something similar? I'm good with either PHP or JQuery or both solutions!
Here is the code where you can pass multiple lat-long combinations to add a marker for each user location.
Repeat this code for every marker you need in your loop to traverse locations array.
t.push('Location Name 1');
x.push(33.84659); // you can write like x.push(<?php echo $userloc[0]['lat']?>)
y.push(-84.35686);
h.push('<p><strong>Location Name 1</strong><br/>Address 1</p>');
The complete code is given below.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() { initialize(); });
function initialize() {
var map_options = {
center: new google.maps.LatLng(33.84659,-84.35686),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var google_map = new google.maps.Map(document.getElementById("map_canvas"), map_options);
var info_window = new google.maps.InfoWindow({
content: 'loading'
});
var t = [];
var x = [];
var y = [];
var h = [];
t.push('Location Name 1');
x.push(33.84659);
y.push(-84.35686);
h.push('<p><strong>Location Name 1</strong><br/>Address 1</p>');
t.push('Location Name 2');
x.push(33.846253);
y.push(-84.362125);
h.push('<p><strong>Location Name 2</strong><br/>Address 2</p>');
var i = 0;
for ( item in t ) {
var m = new google.maps.Marker({
map: google_map,
animation: google.maps.Animation.DROP,
title: t[i],
position: new google.maps.LatLng(x[i],y[i]),
html: h[i]
});
google.maps.event.addListener(m, 'click', function() {
info_window.setContent(this.html);
info_window.open(google_map, this);
});
i++;
}
}
</script>
<div id="map_canvas" style="width:400px;height:400px;">Google Map</div>
This code may help you. You can see its working demo here(http://www.gorissen.info/Pierre/maps/googleMapLocation.php?lat=-33.866603&lon=151.207108&setLatLon=Set)
<!-- Original script taken from: http://conversationswithmyself.com/googleMapDemo.html -->
<!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" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<style type="text/css">
<!--
h1 {
font-family:sans-serif;
color:blue;
text-align: center;
font-size:120%;
}
.tekst {
font-family:sans-serif;
color:blue;
font-size:100%;
}
.smalltekst {
font-family:sans-serif;
color:black;
font-size:80%;
}
-->
</style>
<style type="text/css">
v\:* {
behavior:url(#default#VML);
}
</style>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAF4PVqw0p5l92pEmE39k0MRQWxhPw7-SAnMb84NfHs4vQ3HTp4BTb-yeL6fQg7Up9d9idBGy5naXydw" type="text/javascript"></script>
<title>Google Maps Latitude, Longitude Popup</title>
</head>
<body>
<h1>Google Maps Latitude, Longitude Popup</h1>
<div style="width: 600px;" class="tekst"><b>Simply click on the map on a location and it will provide you with the latitude and longitude in the callout window.</b></div>
<div id="map" style="width: 600px; height: 400px"></div>
<div id="geo" style="width: 300px;position: absolute;left: 620px;top: 100px;" class="tekst">
<form name="setLatLon" action="googleMapLocation.php">
<b>* Coordinates:</b><br />
<table>
<tr><td>* Lat:</td><td><input type='text' name='lat' id="frmLat"></td></tr>
<tr><td>* Lon:</td><td><input type='text' name='lon' id="frmLon"></td></tr>
</table>
<input type="submit" name="setLatLon" value="Set"><br />
</form><br />
<b>* Flickr tags:</b><br />
<textarea id="geocode" cols="30" rows="2"></textarea><br />
<br />
<b>* RoboGEO tags:</b><br />
<textarea id="geocodeRoboGEO" cols="30" rows="2"></textarea><br />
* Show location on Multimap<br />
* Permanent Link<br /><br />
<script type="text/javascript">
<!--
google_ad_client = "pub-1588116269263536";
google_alternate_color = "FFFFFF";
google_ad_width = 234;
google_ad_height = 60;
google_ad_format = "234x60_as";
google_ad_type = "text";
//2006-09-30: Map
google_ad_channel ="0993881556";
google_color_border = "DDDDDD";
google_color_bg = "DDDDDD";
google_color_link = "0000FF";
google_color_text = "333333";
google_color_url = "333333";
//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>
<div style="width: 600px;" class="smalltekst">
<p><i>Address lookup has been removed because it violated the ToS of Google Maps.</i></p>
Based on code taken from this website and this website.<br />
All other errors are caused by code written by Pierre Gorissen.<br />
</div>
<script type="text/javascript">
//<![CDATA[
var baseLink = "http://www.gorissen.info/Pierre/maps/googleMapLocation.php";
var multimapBaseLink = "http://www.multimap.com/map/browse.cgi?scale=10000&icon=x";
var geocoder = new GClientGeocoder();
var setLat = 51.618017;
var setLon = 2.48291;
// argItems code taken from
// http://www.evolt.org/article/Javascript_to_Parse_URLs_in_the_Browser/17/14435/?format=print
function argItems (theArgName) {
sArgs = location.search.slice(1).split('&');
r = '';
for (var i = 0; i < sArgs.length; i++) {
if (sArgs[i].slice(0,sArgs[i].indexOf('=')) == theArgName) {
r = sArgs[i].slice(sArgs[i].indexOf('=')+1);
break;
}
}
return (r.length > 0 ? unescape(r).split(',') : '')
}
function getCoordForAddress(response) {
if (!response || response.Status.code != 200) {
alert("Sorry, we were unable to geocode that address\n\n Sorry, dat adres bestaat blijkbaar niet!");
} else {
place = response.Placemark[0];
setLat = place.Point.coordinates[1];
setLon = place.Point.coordinates[0];
setLat = setLat.toFixed(6);
setLon = setLon.toFixed(6);
document.getElementById("frmLat").value = setLat;
document.getElementById("frmLon").value = setLon;
}
placeMarker(setLat, setLon)
}
function placeMarker(setLat, setLon) {
var message = "geotagged geo:lat=" + setLat + " geo:lon=" + setLon + " ";
document.getElementById("geocode").value = message;
var messageRoboGEO = setLat + ";" + setLon + "";
document.getElementById("geocodeRoboGEO").value = messageRoboGEO;
document.getElementById("geocode").focus();
document.getElementById("geocode").select();
document.getElementById("maplink").href = baseLink + "?lat=" + setLat + "&lon=" + setLon ;
document.getElementById("multimap").href = multimapBaseLink + "&lat=" + setLat + "&lon=" + setLon ;
document.getElementById("frmLat").value = setLat;
document.getElementById("frmLon").value = setLon;
var map = new GMap(document.getElementById("map"));
map.addControl(new GSmallMapControl()); // added
map.addControl(new GMapTypeControl()); // added
map.centerAndZoom(new GPoint(setLon, setLat), 12);
var point = new GPoint(setLon, setLat);
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(map, 'click', function(overlay, point) {
if (overlay) {
map.removeOverlay(overlay);
} else if (point) {
map.recenterOrPanToLatLng(point);
var marker = new GMarker(point);
map.addOverlay(marker);
var matchll = /\(([-.\d]*), ([-.\d]*)/.exec( point );
if ( matchll ) {
var lat = parseFloat( matchll[1] );
var lon = parseFloat( matchll[2] );
lat = lat.toFixed(6);
lon = lon.toFixed(6);
var message = "geotagged geo:lat=" + lat + " geo:lon=" + lon + " ";
var messageRoboGEO = lat + ";" + lon + "";
} else {
var message = "<b>Error extracting info from</b>:" + point + "";
var messagRoboGEO = message;
}
marker.openInfoWindowHtml(message);
document.getElementById("geocode").value = message;
document.getElementById("geocodeRoboGEO").value = messageRoboGEO;
document.getElementById("geocode").focus();
document.getElementById("geocode").select();
document.getElementById("maplink").href = baseLink + "?lat=" + lat + "&lon=" + lon ;
document.getElementById("multimap").href = multimapBaseLink + "&lat=" + lat + "&lon=" + lon ;
document.getElementById("frmLat").value = lat;
document.getElementById("frmLon").value = lon;
}
});
}
function findAddress() {
myAddress = document.getElementById("address").value;
geocoder.getLocations(myAddress, getCoordForAddress);
}
if (argItems("lat") == '' || argItems("lon") == '') {
placeMarker(setLat, setLon);
} else {
var setLat = parseFloat( argItems("lat") );
var setLon = parseFloat( argItems("lon") );
setLat = setLat.toFixed(6);
setLon = setLon.toFixed(6);
placeMarker(setLat, setLon);
}
//]]>
</script>
<!-- Start twatch code -->
<script type="text/javascript"><!--
//<![CDATA[
document.write('<scr'+'ipt type="text/javascript" src="/Pierre/twatch/jslogger.php?ref='+( document["referrer"]==null?'':escape(document.referrer))+'&pg='+escape(window.location)+'&cparams=true"></scr'+'ipt>');
//]]>
//--></script>
<!-- End twatch code -->
</body>
</html>
When I'm clicking on add marker, the marker is in the top left of maps and not in the center.
I know that I'm working on V2, but I need it to work so I can get myself some time to figure V3 out.
Can someone please help me to fix this?
Already tried:
map.setCenter() on different places, but nothing works.
This is the main script:
<script
src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=<?php echo $this->params->get('map_api_key');?>"
type="text/javascript"></script>
<script type="text/javascript">
//<!--
var map;
var marker;
var markeradded=false;
var markerfixed=false;
var current_point;
var catIcon;
function initialize()
{
if (GBrowserIsCompatible())
{
map = new GMap2(document.getElementById("map_canvas"),{ size: new GSize(430, 315) });
map.setUIToDefault();
map.disableScrollWheelZoom();
geocoder = new GClientGeocoder();
map.checkResize()
}
}
window.addEvent('domready',function()
{
initialize();
//var mapSlider = new Fx.Slide('gb_maplocator', {duration: 1000});
var mapSlider = document.getElementById('gb_maplocator');
//var mapSlider = $('gb_maplocator');
<?php if( $this->data->published==0){?>
mapSlider.style.visibility = 'hidden';
mapSlider.style.height = '0px';
mapSlider.style.overflow = 'hidden';
<?php } ?>
$$('.gb_map_controls').addEvent('click',function(){
if(this.getProperty('value')==1)
{
mapSlider.style.visibility = 'visible';
mapSlider.style.height = 'auto';
}
else if(this.getProperty('value')==0)
{
mapSlider.style.visibility = 'hidden';
mapSlider.style.height = '0px';
mapSlider.style.overflow = 'hidden';
}
});
$('btnAddtomap').addEvent('click',
function(e) {
$('map_level').value=map.getZoom();
$('map_glat').value=current_point.lat();
$('map_glng').value=current_point.lng();
});
GEvent.addListener(map, "zoomend",
function(oldlevel,newlevel) {
$('map_level').value=newlevel;
});
GEvent.addListener(map, "dragend",
function() {
current_point=map.getCenter();
});
<?php
if( $this->pin->map_image )
{
?>
catIcon = new GIcon();
catIcon.image = '<?php echo JUri::root().$this->pin->map_image.".".$this->pin->extension;?>';
catIcon.shadow = '<?php echo JUri::root().$this->pin->shadow_image.".".$this->pin->extension;?>';
//catIcon.iconSize = new GSize(25.0, 32.0);
//catIcon.shadowSize = new GSize(42.0, 32.0);
catIcon.iconAnchor = new GPoint(12.0, 16.0);
catIcon.infoWindowAnchor = new GPoint(12.0, 16.0);
map.disableScrollWheelZoom();
<?php
}
if(abs($this->data->glat)==0&&abs($this->data->glng)==0)
{
$country=$mainframe->getUserState($option."countrytitle");
$region=$mainframe->getUserState($option."regiontitle");
$address= array();
if($region!= JText::_('ALL') && !empty($region)){
$address[]=$region;
}
if($country!= JText::_('ALL') && !empty($country)){
$address[]=$country;
}
array_filter ($address);
if(count($address)>0)
{
?>
showAddress('<?php echo implode(',',$address)?>');
<?php
}
else
{
?>
showAddress('<?php echo $this->params->get('map_default_address','Brisbane, Australia');?>');
<?php
}
}
else
{
if( ! $this->pin->map_image && $this->data->map_image )
{
?>
catIcon = new GIcon();
catIcon.image = '<?php echo JUri::root().$this->data->map_image.".".$this->data->extension;?>';
catIcon.shadow = '<?php echo JUri::root().$this->data->shadow_image.".".$this->data->extension;?>';
//catIcon.iconSize = new GSize(25.0, 32.0);
//catIcon.shadowSize = new GSize(42.0, 32.0);
catIcon.iconAnchor = new GPoint(12.0, 16.0);
catIcon.infoWindowAnchor = new GPoint(12.0, 16.0);
<?php }?>
current_point=new GLatLng(<?php echo $this->data->glat;?>,<?php echo $this->data->glng;?>);
map.setCenter(current_point,<?php echo $this->data->level;?>);
marker = new GMarker(current_point,{icon:catIcon,draggable:true});
GEvent.addListener(marker, "dragend",
function(latlng) {
current_point = latlng;
$('map_level').value=map.getZoom();
$('map_glat').value=latlng.lat();
$('map_glng').value=latlng.lng();
});
marker.disableDragging();
map.addOverlay(marker);
checkResize()
markeradded=true;
markerfixed=true;
$('addMarkerButton').disabled=true;
$('addMarkerButton').setHTML("<?php echo JText::_('REMOVE_MARKER');?>");
$('fixMarkerButton').setHTML("<?php echo JText::_('UNFIX_MARKER');?>");
$('map_level').value=map.getZoom();
$('map_glat').value=current_point.lat();
$('map_glng').value=current_point.lng();
<?php if($this->data->published==0){?>
mapSlider.style.visibility = 'hidden';
mapSlider.style.height = "0px";
mapSlider.style.overflow = 'hidden';
<?php }?>
<?php
}
?>
if(markeradded)
{
$('fixMarkerButton').disabled=false;
}
else
{
$('fixMarkerButton').disabled=true;
}
});
window.addEvent('unload',function(){GUnload()});
//-->
</script>
<div class="gb_madata_publish">
<label><?php echo JText::_('Activeer Google Maps');?>:</label><div class="gb_madata_publish_control"><?php echo $this->lists['status'];?></div>
</div>
<div class="gb_map_locator" id="gb_maplocator">
<a id="btnAddtomap"><?php echo JText::_('LOCATE_ADDRESS_TO_MAP');?></a>
<fieldset class="adminform"><input type="hidden" name="glat"
id="map_glat" /> <input type="hidden" name="glng" id="map_glng" /> <input
type="hidden" name="level" id="map_level" />
<div id="map_canvas" style="width: 430px; height: 315px"><script>checkResize() </script></div>
<br />
<div class="mapbuttons"><a id="addMarkerButton"><?php echo JText::_('ADD_MARKER');?></a>
<a id="fixMarkerButton"><?php echo JText::_('FIX_MARKER');?></a></div>
</fieldset>
</div>
<?php
}
?>
And this is the JavaScript file that is included:
/**
* Map controller buttons
*
*/
window.addEvent('domready', function() {
var country_id = '';
var region_id = '';
var address1 = '';
var address2 = '';
$('btnAddtomap')
.addEvent(
'click',
function(e) {
e = new Event(e);
e.stop();
if($('address1')== undefined && $('address2')== undefined) return false;
if($('country_id')!= undefined) country_id= $('country_id').value;
if($('region_id')!= undefined) region_id= $('region_id').value;
if($('address1')!= undefined) address1= $('address1').value;
if($('address2')!= undefined) address2= $('address2').value;
url = 'index.php?option=com_listbingo&format=raw&task=addons.map.admin.loadadd&cid='
+ country_id
+ '®ion_id='
+ region_id;
url += '&street=' + address2
+ '&address='
+ address1;
req = new Ajax(url, {
onComplete :showAddress,
method :'get',
evalscript :true
});
req.request();
setCenter()
});
$('addMarkerButton').addEvent(
'click',
function(e) {
e = new Event(e);
e.stop();
if (!markeradded) {
marker = new GMarker(current_point, { icon:catIcon,
draggable :true
});
$('map_level').value=map.getZoom();
$('map_glat').value=(0);
$('map_glng').value=(0);
map.addOverlay(marker);
marker.enableDragging();
}
});
});
Done, i solved it by not using hidden divs.
I am trying to save graphs on server side. i was succeeded up to save one graph. but i am unable to save more than one graph.
here i mentioned 2 graphs but nly one graph is going to save on server.
how it can be ?
my code is
<script type="text/javascript">
var totalCharts = 2;
function exportCharts(exportType)
{
for( var i = 0; i < totalCharts; i++ ) {
var num = i+1;
var id = "chart"+num+"Id";
exportchart(exportType,id);
}
}
function exportchart(exportType,id)
{
var chart = FusionCharts(id);
// Now, we proceed with exporting only if chart has finished rendering.
if (chart.hasRendered() != true)
{
alert("Please wait for the chart to finish rendering, before you can invoke exporting");
return;
}
// call exporting function
chart.exportChart( {exportFormat: exportType} );
}
</script>
<p align="center">
<input type="button" class="button" value="Export as PNG" onclick="exportCharts('PNG')" id="exportButtonPNG" />
</p>
<div >
<div id="average" style="text-align:center">Loading Chart... </div>
<div id="overall" style="text-align:center">Loading Chart... </div>
</div>
<script type="text/javascript" >
// Render the chart (See documentation for explanation of the codes below)
//echo renderChart("FusionCharts/MSColumn3D.swf", "", $strXML3, "average", 1100, 350);
var chart2 = new FusionCharts("FusionCharts/MSColumn3D.swf", "chart1Id", "600", "400", "0", "1");
chart2.setXMLUrl("average.xml");
chart2.render("average");
var chart1 = new FusionCharts("FusionCharts/MSColumn3D.swf", "chart2Id", "600", "400", "0", "1");
chart1.setXMLUrl("overall.xml");
chart1.render("overall");
</script>
<!-- Google Analytics Tracker Code Starts -->
<script type="text/javascript">
// analytics
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost
+ "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
if (typeof(_gat) == "object") {
var pageTracker = _gat._getTracker("UA-215295-3"); pageTracker._initData(); pageTracker._trackPageview();
}
</script>
How i can solve this?
You may need to chain the call to exportChart function of each chart you have.
var totalCharts = 2;
(function () {
var totalExported = 0,
exportType;
window.FC_Exported = function() {
exportchart();
};
window.exportchart = function(exportFormat) {
exportType = exportType || exportFormat || 'jpg';
totalExported++ ;
var chart = FusionCharts("chart" + totalExported + "Id");
if (totalExported > totalCharts) {
return;
}
if (chart.hasRendered() != true) {
alert("Please wait for the chart to finish rendering, before you can invoke exporting");
}
// call exporting function
chart.exportChart( {exportFormat: exportType} );
};
}());
I am not very experienced just a learner.
Now come to the question.
I have a dynamic table codes are below: works fine as intended.
<head>
<style type="text/css">
<!--
#tblitemsgrid
td {
padding: 0.5em;
}
.classy0 { background-color: #234567; color: #89abcd; }
.classy1 { background-color: #89abcd; color: #234567; }
th {
padding: 0.5em;
background:#39C;
text-align:center;
}
-->
</style>
<script type="text/javascript">
var INPUT_NAME_PREFIX = 'input'; // this is being set via script
var RADIO_NAME = 'totallyrad'; // this is being set via script
var TABLE_NAME = 'tblitemsgrid'; // this should be named in the HTML
var ROW_BASE = 1; // first number (for display)
var hasLoaded = false;
window.onload=fillInRows;
function fillInRows()
{
hasLoaded = true;
addRowToTable();
}
// CONFIG:
// myRowObject is an object for storing information about the table rows
function myRowObject(one, two, three, four, five)
{
this.one = one; // text object
this.two = two; // text object
this.three = three; // text object
this.four = four; // text object
}
/*
* insertRowToTable
* Insert and reorder
*/
function insertRowToTable()
{
if (hasLoaded) {
var tbl = document.getElementById(TABLE_NAME);
var rowToInsertAt = tbl.tBodies[0].rows.length;
for (var i=0; i<tbl.tBodies[0].rows.length; i++) {
}
addRowToTable(rowToInsertAt);
reorderRows(tbl, rowToInsertAt);
}
}
/*
* addRowToTable
function addRowToTable(num)
{
if (hasLoaded) {
var tbl = document.getElementById(TABLE_NAME);
var nextRow = tbl.tBodies[0].rows.length;
var iteration = nextRow + ROW_BASE;
if (num == null) {
num = nextRow;
} else {
iteration = num + ROW_BASE;
}
// add the row
var row = tbl.tBodies[0].insertRow(num);
// CONFIG: requires classes named classy0 and classy1
row.className = 'classy' + (iteration % 2);
// CONFIG: This whole section can be configured
// cell 0 - text - Serial Number
var cell0 = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cell0.appendChild(textNode);
// cell 1 - input text - Account name
var cell1 = row.insertCell(1);
var txtInpACC = document.createElement('input');
txtInpACC.setAttribute('type', 'text');
txtInpACC.setAttribute('name', 'accname' + iteration);
txtInpACC.setAttribute('size', '40');
txtInpACC.setAttribute('value', iteration);
cell1.appendChild(txtInpACC);
// cell 2 - input box- Dr amount
var cell2 = row.insertCell(2);
var txtInpDR = document.createElement('input');
txtInpDR.setAttribute('type', 'text');
txtInpDR.setAttribute('name', 'DrAmount' + iteration);
txtInpDR.setAttribute('size', '10');
txtInpDR.setAttribute('value', iteration); // iteration included for debug purposes
cell2.appendChild(txtInpDR);
// cell 3 - input box- Cr amount
var cell3 = row.insertCell(3);
var txtInpCR = document.createElement('input');
txtInpCR.setAttribute('type', 'text');
txtInpCR.setAttribute('name', 'CrAmount' + iteration);
txtInpCR.setAttribute('size', '10');
txtInpCR.setAttribute('value', iteration); // iteration included for debug purposes
cell3.appendChild(txtInpCR);
// cell 4 - input button - Delete
var cell4 = row.insertCell(4);
var btnEl = document.createElement('input');
btnEl.setAttribute('type', 'button');
btnEl.setAttribute('value', 'Delete');
btnEl.onclick = function () {deleteCurrentRow(this)};
cell4.appendChild(btnEl);
// Pass in the elements you want to reference later
// Store the myRow object in each row
row.myRow = new myRowObject(textNode, txtInpACC, txtInpDR, txtInpCR, btnEl);
}
}
// CONFIG: this entire function is affected by myRowObject settings
function deleteCurrentRow(obj)
{
if (hasLoaded) {
var oRows = document.getElementById('tblitemsgrid').getElementsByTagName('tr');
var iRowCount = (oRows.length - 2);
if (iRowCount <1+1) {
alert('Your table has ' + iRowCount + ' row(s). Row count can not be zero.');
return
}
var delRow = obj.parentNode.parentNode;
var tbl = delRow.parentNode.parentNode;
var rIndex = delRow.sectionRowIndex;
var rowArray = new Array(delRow);
deleteRows(rowArray);
reorderRows(tbl, rIndex);}
}
function reorderRows(tbl, startingIndex)
{
if (hasLoaded) {
if (tbl.tBodies[0].rows[startingIndex]) {
var count = startingIndex + ROW_BASE;
for (var i=startingIndex; i<tbl.tBodies[0].rows.length; i++) {
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows[i].myRow.one.data = count; // text
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows[i].myRow.two.name = INPUT_NAME_PREFIX + count; // input text
var tempVal = tbl.tBodies[0].rows[i].myRow.two.value.split(' ');
tbl.tBodies[0].rows[i].myRow.two.value = count + ' was' + tempVal[0];
// CONFIG: next line is affected by myRowObject settings
tbl.tBodies[0].rows[i].myRow.four.value = count; // input radio
// CONFIG: requires class named classy0 and classy1
tbl.tBodies[0].rows[i].className = 'classy' + (count % 2);
count++;
}
}
}
}
function deleteRows(rowObjArray)
{
if (hasLoaded) {
for (var i=0; i<rowObjArray.length; i++) {
var rIndex = rowObjArray[i].sectionRowIndex;
rowObjArray[i].parentNode.deleteRow(rIndex);
}
}
}
function openInNewWindow(frm)
{
// open a blank window
var aWindow = window.open('', 'TableAddRow2NewWindow',
'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400');
// set the target to the blank window
frm.target = 'TableAddRow2NewWindow';
// submit
frm.submit();
}
</script>
</head>
<body>
<form action="tableaddrow_nw.php" method="get">
<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Insert [I]" onclick="insertRowToTable();" />
<!--<input type="button" value="Delete [D]" onclick="deleteChecked();" />-->
<input type="button" value="Submit" onclick="openInNewWindow(this.form);" />
</p>
<table border="0" cellspacing="0" id="tblitemsgrid" width=600>
<thead>
<tr>
<th colspan="5">Sample table</th>
</tr>
<tr>
<th>E.#</th>
<th>Account name</th>
<th>Debit</th>
<th>Credit</th>
<th></th>
</tr>
</thead>
<tbody></tbody>
</table>
</form>
</body>
</html>
This is a processing page:
<head>
<title>Table Add Row - new window</title>
<script language="JavaScript">
<!--
function printToPage()
{
var pos;
var searchStr = window.location.search;
var searchArray = searchStr.substring(1,searchStr.length).split('&');
var htmlOutput = '';
for (var i=0; i<searchArray.length; i++) {
htmlOutput += searchArray[i] + '<br />';
}
return(htmlOutput);
}
//-->
</script>
</head>
<body>
<b>MREDKJ's Table Add Row</b>
<br />
Below should be the name/value pairs that were submitted:
<p>
<script language="JavaScript">
<!--
document.write(printToPage());
//-->
</script>
</p>
</body>
</html>
the above displays a result:
accname1=1
DrAmount1=1
CrAmount1=1
input2=2+was2
DrAmount2=2
CrAmount2=2
input3=3+was3
DrAmount3=3
CrAmount3=3
input4=4+was4
DrAmount4=4
CrAmount4=4
how can I pass javascript variables into PHP (which is server side and client side) in the above case ?
thanks alot in advance.
The way to pass variables from client-side to server-side is via HTTP Request. So either you redirect to a PHP page passing in the variable as GET query strings or POST data or you can also do an AJAX call of either GET or POST.
You can use jQuery and ajax to pass these informations to server easy way
And remember. PHP isn't client side language
$.ajax({
'url': 'ajax.php',
'type': 'POST',
'data': 'accname1='+accname1+'&input1='+input1+'&input2='+input2+'&input3='+input3+'&DrAmount1='+DrAmount1+'&DrAmount2='+DrAmount2+'&DrAmount3='+DrAmount3+'&CrAmount1='+CrAmount1'&CrAmount2='+CrAmount2'&CrAmount3='+CrAmount3,
'success': function(){
alert('data sent');
}
});