Response title
This is preview!
- Screen name: pizzipie
pizzipie's Profile
78 Posts
196 Responses
0
Followers
Activity Trend
Last 30 days
Loading Chart...
Show:
- Expanded view
- List view
- 29-Jul-2020 06:52 PM
- Forum: Getting Started
I have a select options box to choose a query. Select All, Select by State etc. I have one choice which requires further input - Search by Partial Name. Is there a way to do this by having a <form> show up inside a script or function. I would then use $("#partname").on('click'. function() { put form in here and use input.val() to get the value to Return}.Summary: One choice can use AJAX directly to get info from Database.Another choice requires further input before using AJAX to get info from Database.Thanks for help.- Well I thought I had it made yesterday when JAKE posted his answer to my post "Get values from inputs which are array elements"However I can't get the serialized data to display anywhere. My form has the id="AcctForm". None of the alert(), console.log() or document.write() show anything. In Firefox web tools, under console, the Params show the array of inputs. The Response column shows the script code. Under Network the Params show the array of inputs and Response shows the script code. Under Request payload the string from .serialize() shows. Looks like this AcctFor%5B%5D=rick&InvDate%5B%5D=2020-03-18 ......... What dumb thing have I done to cause this?Here is the code I have to try to get a display.
- <script type="text/javascript" >
// ==============================================
$("#AcctForm").on( "submit", function( event ) {
alert("inside submit function"); // doesn't show
var datastring = $("#AcctForm").serialize();
alert(datastring); // doesn't show
document.write(datastring); // doesn't show
console.log(datastring); // doesn't show
event.preventDefault();
});
// =================================================
</script>
</head>
<body>
<div id="wrapper">
<div id="form_div">
<form id="AcctForm" method="post" action=""> ..................
- I'm trying to get values from the form1 inputs in order to make an AJAX call. The $_POST global array is undefined and I'm stuck. Thanks in advance for your help. Note: <input type="text" name="AcctFor[]"R
- <script type="text/javascript" >
// ============================================== - // produce array of values to send to PHP script for processing database data.
$(document).ready(function(){
$("#form1").submit(function(e){
//e.preventDefault(); // get same undefined $_POST error if this line is un-commented
//alert('Post Info '+$_POST['OrderNo'][0]); // undefined $_POST
alert("Submit prevented"+ $("input[name=OrderNo")][0].val()); HOW TO GET VALUE???
});
});
// =================================================
</script>
</head>
<body>
<div id="wrapper">
<div id="form_div">
<form id="form1" method="post" action="">
<table id="renovationTable" align=left bgcolor='#055584'>
<tr id="row1">
<td><input type="text" name="AcctFor[]" placeholder="Enter AcctFor" required></td><tr></tr>
<td><input type="date" name="InvDate[]" placeholder="Enter InvDate" required></td><tr></tr>
<td><input type="text" name="OrderNo[]" placeholder="Enter OrderNo" required></td><tr></tr>
<td><input type="text" name="DrugNo[]" placeholder="Enter DrugNo" required></td><tr></tr>
<td><input type="text" name="Description[]" placeholder="Enter Description" required></td><tr></tr>
<td><input type="text" name="Cost[]" placeholder="Enter Cost" required></td><tr></tr>
<td><input type="number"" name="ReFills[]" placeholder="Enter ReFills"></td><tr></tr>
</tr>
</table>
<input type="button" onclick="add_row();" value="ADD ROW">
<input type="submit" name="submit_row" value="SUBMIT">
</form>
</div>
</div>
</body>
</html>
Hi,
I have a directory with several databases each containing multiple tables. I am trying to create a program where Select/Options boxes are utilized to 1. Pick one database from several options. 2. Pick one table from several options produced from the selection in 1. and 3. Send the final database and table to the Server via AJAX in order to query the database.To implement 1. I use PHP to select databases from a directory. I dynamically create a form containing the first Select/Options box. This works fine. 2. I select a database and send it to the server via AJAX this works fine. I get the Tables returned and a Select/Options box is created ONLY if I don't try and enclose the S/O box with <form> tags. Everything goes to hell if I do that. How do I pick an option from the second Select/Option box?- Here is my code:<?php
error_reporting (E_ALL ^ E_NOTICE);
ini_set("display_errors", true);
error_reporting (E_ALL ^ E_NOTICE);
include("../myPhpFunctions.inc"); // contains lf(); sp(); myprint; check_input();
// shows break space print_r on browser
$orgdir=getcwd();
$dir="/home/rick/DB-sql/";
$rows=$files=array();
// =====================================================
// change to working directory where the databases are and get the *.db files
// =====================================================
chdir($dir);
// get the available db file names
if (is_dir($dir)){
if ($dh = opendir($dir)){ // open dir and read contents
while (($file = readdir($dh)) !== false){
if(substr($file, -2)=="db") {
$files[]=$file;
}
}
}
}
closedir($dh);
// ==================== HTML =================================
?>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title> Renovation and Maintenance Log 03Jan2010</title>
<!-- ============== styles ================ -->
<link rel="stylesheet " type="text/css" href="../css/renoAZID.css" />
<!-- ============== scripts1 ================ -->
<script type="text/javascript" src="../jquery-2.1.4.js"></script>
</head>
<!-- =============== html ================== -->
<body>
<div class="header">
<h3><img src="../images/AmericanFlag2.png" alt="Company logo" height="90px" /> Renovation & Maintainance Log
<h4>Choose a Database and Table to Query</h4></h3>
<p><b>Choose a Database</b></p>
</div>
<div class="dbForm">
<form name="dbForm" id="dbForm" action="" method="post">
<!-- <select multiple="multiple" name="database[]"> to pick multiple choices-->
<select id="database" name="database" size="5">
<?php
foreach($files as $file) {
echo "<option value=".$file.">".$file."</option>".lf();
} // foreach
?>
</select>
<p><input type="submit" id="sub" name="submit" value="Choose Database" /></p>
</form>
<br />
</div>
<div class="results" id="result" >
</div>
<script type="text/javascript" >
$(document).ready(function(){
var table="";
var database="";
$('#dbForm').submit(function (e) {
database=$("#database option:selected").text();
e.preventDefault();
var request = $.ajax({
url: "getTblInfo.php",
type: "POST",
data: {"database":database},
dataType: "json"
});
request.done(getAvailableTable );
request.fail(showError);
<form name="tblForm" id="tblForm" action="" method="post"> // This doesn't work MSG: // "Sending request to XXX" flashes on the screen and disappears from view leaving // blank screen. If <form> tags not used the Select/Option box is created fine but then there // is no way to pick and Option!!!
function getAvailableTable(data) {
$("div.results").append('<p><b>Choose a Database Table</b></p>');
$("div.results").append('<select id="tblbx" name="tables" size="5">');
$.each(data, function (index, value) {
$.each(value, function (a, b) {
if (b=='sqlite_sequence') {
return false;
}
$("#tblbx").append('<option value='+b+'>'+b+'</option><br />');
});
$("div.results").append("</select>");
});
} // getAvail
<p><input type="submit" id="sub2" name="sub2" value="Choose Table" /></p>
</form>
function showError( jqXHR, textStatus ) {
console.log('An error occurred Idiot.');
alert(textStatus);
//console.log(data);
}
}); // frm.submit
/*
$('#tblForm').submit(function (e) {
table=$("#tblbx option:selected").text();
e.preventDefault();
getRenovationData(database, table );
})
*/
}) //ready
</script>
<script type="text/javascript" >
$(document).ready(function(){
function getRenovationData(dbase, tbl) {
alert("database and table chosen "+dbase+" : "+tbl);
}
});
</script>
</body>
</html>
<?php
chdir($orgdir);
?>
- This is related to my last post which I never did figure out. I am sending an AJAX request and am getting a response but not through the request.done function. What happens is that the console shows this:["Costs","rdata","show","sqlite_sequence"]Which is the correct data returned from the URL sent to AJAX. The alert("data returned"+data[0]); is never seen.
-
<script type="text/javascript" >
$("#dbForm").submit(function() {
$("#dbForm").hide();
var dbase=$("#database option:selected").text();
alert('"database":'+dbase ); // ok
var request = $.ajax({
url: "tableTest.php",
method: "post",
data: { "database":dbase},
dataType: "json"
});
request.done(function(data) {
alert("data returned"+data[0]);
});
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: " + textStatus );
});
</script>
- 05-Jan-2020 04:54 PM
- Forum: Getting Started
hi,In my program I want to add a form and list box dynamically. The select and options tags are appended without problem and the list box is created. However, when I try to append the <form> tag it does not happen. Here is the code:- <body>
<div class=.results>
<script type="text/javascript" >
function showData(data) {
$("div.results").append('<p><b>Choose a Database Table</b></p>');
// $("div.results").append("<form name='tblform' id='tblform' action='' method='post'>" )
$("div.results").append('<select id="tblbx" name="tables" size="5">');
$.each(data, function (index, value) {
$.each(value, function (a, b) {
if (b=='sqlite_sequence') {
return false;
}
$("#tblbx").append('<option value='+b+'>'+b+'</option><br />');
});
$("div.results").append("</select>");
// $("div.results").append("/<form>");
});
} // show
// WHEN $("div.results").append(various form items) IS UN-COMMENTED this does not work.
What I want to do is get the selected option and send it back to the calling page.- 05-Jan-2020 02:45 PM
- Forum: Getting Started
Hi;I have view several of the other posts relative to json errors but they seem really complicated so......Here is my test code modified to my elements but taken from the internet:- <script type="text/javascript" >
var tables = {
'tbl_name' : 'Costs',
'tbl_name' : 'rdata',
'tbl_name' : 'show',
'tbl_name' : 'sqlite_sequence'
}
// var tables= { "tbl_name":"Costs", "tbl_name":"rdata", "tbl_name":"show", "tbl_name":"sqlite_sequence" }; <== tried this - didn't work
alert(JSON.parse(tables));
</script>
The date type is object and I am trying to turn it into json format. The above gives me this error.SyntaxError: JSON.parse: unexpected character at line 1 column 2 of the JSON data testRenoDB.php:62:12I can't view what the flawed json is so don't have a clue how to fix this. I use firefox Web Developer tools on Ubuntu 18.04 to try to debug this but I don't know how to use it very well.Thanks in advance for help.R- 04-Feb-2019 01:42 PM
- Forum: Using jQuery
Trying to read ASCI color codes in order to see them on the screen. I am reading a file that is a json file to start with. My code is below. The response is in the attachment Created by Web Developer tools.Here is my php code.- <?php
// Read JSON file
$json = file_get_contents('./ASCIColors.json');
echo $json;
?>
<!DOCTYPE html>
<!-- Comments about the program -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title> Pizzi Contacts v2.1 21 Jan 2016 - contactConnect.html</title>
<script src="../../jquery/jquery-2.1.1.js"></script>
<script type="text/javascript">
$.ajax({
type: "POST",
dataType: "json",
url: "response.php", //Relative or absolute path to response.php file
//data: {}, not used - read from file
success: function(ret) {
$.each( ret[0], function( key, value ) {
alert($(".the-return").append("<style>div{background-color: "+value+"</style>)"));
});
successmessage = 'Data was succesfully captured';
$("label#successmessage").text(successmessage);
},
error: function(ret) {
successmessage = 'Error';
$("label#successmessage").text(successmessage);
},
});
</script>
</head>
<body>
<div class="the-return">
[HTML is replaced when successful.-<br>
-----------------------------------<br>
-----------------------------------<br>
-----------------------------------<br>
-----------------------------------]<br>
</div>
</body>
</html>
- 03-Jul-2017 02:53 PM
- Forum: Using jQuery
Here we go again!!
I've given up trying to run all code on one page(php). Now have tree2.html (client side), and tree2.php (server side)
Below is the tree2.html of my program.
I can't get the .on(change .. part to work as an empty tiny, tiny table is displayed before I can enter data into the <input> block. I know this has to do with the asyn running of HTML but how do you make this work?- <!DOCTYPE html>
<html>
<head><title>tree2.html Sun 02Jul2017</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<!-- ============== head scripts ================ -->
<script type="text/javascript" src="../jquery/jquery-2.1.1.js"></script>
<style>
.hov:hover {
color: red;
font-weight: bold;
}
li {
list-style-type:none;
}
</style>
</head>
<!-- ============== html ================ -->
<body>
<form action=""#"" method="POST">
Enter Base Directory to Choose Photo Directory From
<input type="text" id="dir">
<!--<input type="submit"> using .on(change, ... line 51 -->
</form>
<!-- ============== body scripts 1 of 1 ================ -->
<script type="text/javascript">
$(function(){ // ready
var dir="/home/rick/Desktop/2017Jun27-12:36_TransFile_Pictures"; // for testing works ok
$("#tbl1").hide();
// CAN'T GET THIS TO WORK REGARDLESS OF WHERE I PUT IT
// IT CALLS AJAX BEFORE YOU CAN ENTER THE DATA IN INPUT
/*
var dir="";
$("#dir").on('change', function () {
dir=$("#dir").val();
});
*/
myAjaxCall(dir);
function myAjaxCall(dir) {
var request = $.ajax( {
url: "tree2.php",
type: "POST",
data: {"dir":dir},
dataType: "json"
}); // end ajax()
request.done(showDirs);
request.fail(function( jqXHR, textStatus ) {
alert( "Request failed: line 74 myAjaxCall() " + textStatus );
});
} // end myAjaxCall()
}); // end ready()
// ========================== FUNCTION showDirs() ==================
function showDirs(data) {
var i=0;
var disp="";
var choice="";
$("#tbl1").show();
$("body").append("<h3> Pick A Directory to Process Photos</h3>");
table_str = "<table id='tbl1' class='center' id='verifyTbl' border='4' cellspacing='2' cellpadding='4' bgcolor='#fff99d' ><br/>";
$.each(data, function (index, value) {
disp="disp"+i++;
table_str += "<tr><td id='disp' class='hov'>" + value + "</td></tr>";
});
table_str += "</table><p></p><p></p>";
$("body").append(table_str + "<p></p>");
$("td#disp").click(function () {
console.log("testing");
choice=($( this ).text());
alert("You chose: " + choice);
// ajax call to getImageFiles.php goes here.
}); // end click()
} // end showDirs() ===================================================
</script>
</body>
</html>
- 01-Jul-2017 02:50 AM
- Forum: Using jQuery
My php/html code below'
After one of the <li> tags is chosen the var choice contains the text() value of that <li>.
How can I/is it possible to use AJAX to pass choice to the php code- <?php
set_include_path( '../../include' );
error_reporting (E_ALL ^ E_NOTICE);
$str=<<<LABEL
<style>
.hov:hover {
color: red;
font-weight: bold;
}
li {
list-style-type:none;
}
</style>
<script src="../jquery/jquery-2.1.4.js"></script>
<script type="text/javascript">
$(function(){
$("li.hov").click(function () {
var choice="";
console.log("testing");
choice=($( this ).text());
alert("You chose: " + choice); - ADD AJAX CODE HERE ? TO PASS choice TO PHP CODE ON THIS PAGE ?
});
});
</script>
LABEL;
chdir('/home/rick/Desktop');
echo $str;
$path=getcwd();
$items=scandir($path);
echo "<p>Contents of $path</p>";
echo '<ul>';
$i=0;
foreach($items as $item) {
if(is_file($item) || $item=="." || $item=="..") {
continue;
}
$disp='disp'.++$i;
echo "<li id=$disp class='hov' >$item</>";
}
echo '</ul>';
DO STUFF HERE WITH RESULT PASSED BACK BY AJAX ?
?>
- I clicked on My Profile -> edit and when I clicked on email it asked to send an email.
How do I change my current BAD email address??- Hi, trying to integrate HTML in PHP file. When I focus on the text displayed in the list the css works. ie: shows in red. However the $("li.disp").click(function () { ... doesn't do anything.
Any help welcomed.
R- <?php
set_include_path( '../../include' );
error_reporting (E_ALL ^ E_NOTICE);
$str=<<<LABEL
<style>
.hov:hover {
color: red;
font-weight: bold;
}
li {
list-style-type:none;
}
</style>
<script src="../jquery/jquery-2.1.4.js"></script>
<script type="text/javascript">
$("li.disp").click(function () {
consolelog("testing");
alert($("li,disp").text());
});
</script>
LABEL;
chdir('/home/rick/Desktop');
echo $str;
$path=getcwd();
$items=scandir($path);
echo "<p>Contents of $path</p>";
echo '<ul>';
foreach($items as $item) {
if(is_file($item) || $item=="." || $item=="..") {
continue;
}
echo "<li class='disp hov' >$item</>";
}
echo '</ul>';
?>
- 02-Dec-2016 02:12 PM
- Forum: Using jQuery
I'm trying to pass a variable to .click function
I have defined a var navFlag="home"- $('.nav').click(function (navFlag) {
alert("nav under construction - navFlag .. "+navFlag);
}); // nav
navFlag is returned as [object Object]
What is the proper way to do this?
Thanks for any help,
R
- 08-Aug-2016 03:36 PM
- Forum: Using jQuery
Hi,
Need explanation of where I'm going wrong. I have to process the var str to properly call $.ajax but don't know how. See Source below to see value of str.- var str=$("#imageForm").serialize()+"&recId="+recId;
var request = $.ajax({ // get data from database
url: "revise.php",
type: "POST",
data: str, // wrong way here, I think
dataType: "json"
}); // ajax
request.done (updatedData);
request.fail(function( jqXHR, textStatus ) {
alert("Bad Request!! revised.html 145 See Firebug");
});
The above causes error.
- var str=$("#imageForm").serialize()+"&recId="+recId;
$.post("revise.php",str, "json"), // this works ok
function updatedData(retData) {
$.each(retData[0], function(key, value) {
$("#"+key).val(value);
}); // each
}; // updated
//successMsgShow();
}; // update
Here is the output from firebug when $.post is called.
POST http://mydb.com/pollywood/queries2.php
200 OK
1ms
jquery-1.9.1.js (line 8526)
POST http://mydb.com/pollywood/revise.php
200 OK
32ms
jquery-1.9.1.js (line 8526)
HeadersPostResponse
Parametersapplication/x-www-form-urlencodedDo not sort
askPrice 32
dateToVendor 2016-08-02
filename img 9087
imageName Garden Bee
imageSize 8x10
itemNo 12
note
recId 1
timestamp 201608081105
vendor isaws
Source
itemNo=12×tamp=201608081105&filename=img+9087&imageName=Garden+Bee&imageSize=8x10&askPrice=32&vendor=isaws&dateToVendor=2016-08-02¬e=&recId=1- Hi,
I've been trying to create a form by appending to <div id='what'> with no success.
The form displays fine including data values but the submit does not display the alert() message. My goal is to view the data returned, change the data if desired, and send the changed data thru AJAX to update my MySql database.- function showReturn(data) { // <========= data is returned from AJAX.
$("#results").hide(); // hide previous
$("#what").show(); // show current
$("#what").append("<form method='post' id='myForm' action=''> ");
$("#what").append("<label for='DL'>DL:</label>");
$("#what").append("<input type='text' name='DL' id='DL' value="+data.DL+"><br>");
$("#what").append("<label for='DL_Expiry'>DL_Expiry:</label>");
$("#what").append("<input type='text' name='DL_Expiry' id='DL_Expiry' value="+data.DL_Expiry+"><br>");
$("#what").append("<label for='PassPort_No'>PassPort_No:</label>");
$("#what").append("<input type='text' name='PassPort_No' id='PassPort_No' value="+data.PassPort_No+"><br>");
$("#what").append("<label for='PP_Expiry'>PP_Expiry:</label>");
$("#what").append("<input type='text' name='PP_Expiry' id='PP_Expiry' value="+data.PP_Expiry+"><br>");
$("#what").append("<label for='subm'>Save:</label>");
$("#what").append("<input type='submit' name='subm' >");
$("#what").append("</form>");
$("form#myForm").submit(function(){
alert("Submitted"); // <=========== does not display
});
} // showReturn
- Hi,
In using setTimeout() to show and hide a message the message just flashes on and off. Timer is not working.
Hope someone can spot something wrong here.
UPDATE:
I commented out window.location.assign("fields.php"); and setTimeout works properly. See 5. below.-
if(update) {
$.ajax({
type: "POST",
url: "changeData.php",
data: { "col":col, "update":update},
dataType: "text",
success: showChangedData
}); // ajax
function showChangedData(data) {
successMsgShow();
} // showCh
}
else {
$('#succMsg').append("<h5><span style='color:red'>You Didn't Enter revised Data.</span></h5>");
}
});// indata
// =============== Success Message with Time Delay ===================
function successMsgShow() {
$("p").append('<h3> <span style="color:red">Data Revised Successfuly</span></h3>');
setTimeout(successMsgHide, 5000); // show message for 5 seconds- // Flashes on screen w/ no delay
window.location.assign("fields.php"); // run page again showing revised data
}
function successMsgHide() {
$("p").hide();
}
- 24-May-2016 04:50 PM
- Forum: Using jQuery
hi,
I am writing a Revise Data program for my database. I am passing the field name of data to be changed to 'changeData.php'. When this data is received by 'changeData.php' I want to use a form inside 'changeData.php' to revise the data and then to update the database.
If I call changeData.php from the command line it works fine.
(firefox mydb.com/db/changeData.php) The form appears in workable manner.
If I take the HTML code out of changeData it works fine. It will update data as fed by a variable for testing purposes.
Appreciate knowing a fix for this problem. CODE and results are below.
Thanks in advance
R
I am calling changeData.php file from fields.php with ajax as follows:
col=$(this).text();
$.ajax({
type: "GET",
url: "changeData.php",
data: { "col":col},
datatype: "text",
success: showChangedData
}); // ajax
function showChangedData(data) {
alert("this is returned data: "+data);
window.location="fields.php";
$('.retdata').toggleClass('msg');
} // showCh
}); // rowdata
This returns:
<html>
<body>
<form action="welcome.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
result ok:
Here is my php code:
$hostname='localhost';
$username='r';
$password='r';
$database='db';
$table='per';
$fields=array();
$field=$_GET['col'];
$ret='ZG64526E - FL';
$msg="Data Sucessfully Changed";
?>
<html> ] // This test HTML doesn't work. Actual HTML is much longer.
<body>
<form action="welcome.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
</body>
</html>
<?php
$cxn = mysqli_connect($hostname,$username,$password,$database)
or die("line 34 - Couldn't connect to server");
$query = "UPDATE {$table} SET {$field} = '{$ret}';";
$result = mysqli_query($cxn,$query);
if($result) {
echo "result ok:";
}
?>- 21-Jan-2016 06:47 PM
- Forum: Using jQuery
Hi, I have the 'location' object from a google map listener event. alert(location) shows something like this.
(46.05734091267766100, -114.173083371296539075)
I want to have the var 'latitude'=46.057340 and the var 'longitude'=-114.173083 . I will then use
AJAX to insert the value of these variables into my DB.
Nothing I do seems to work to split 'location' up.
R- 19-Jan-2016 06:37 PM
- Forum: Using jQuery
Yesterday I submitted a question 'Google Map Not Loading'. A disaster!! Before I can deal with the google mapping issues I have to be able to pass the data properly from the database.
The idea is to access a MySql database containing Marker information, create a 'dynamic select options list', make a choice, create an array of data from the choice and return the results as an array to a function which will create a 'google map'.
This is my re-write and I can't get the data to pass the array from 'MAPPING.JS' back to the calling program SIMPLEMAP.HTML. Code is:
MAPPING.JS:
- function
loadlist(selobj, url, nameattr) {
var dataArray=[];
$(selobj).empty();
$.getJSON(url, {}, function(data) {
$.each(data, function(i,obj) {
$(selobj).append($('<option></option>').val(obj[nameattr]).html(obj[nameattr]));
}); //each
$(selobj).change(function(){
name=$(this).val();
index=this.selectedIndex;
address=data[index]['address'];
lat=data[index]['lat'];
lng=data[index]['lng'];
dataArray.push(name);
dataArray.push(address);
dataArray.push(lat);
dataArray.push(lng);
return dataArray;
}) // latlng
}); // getJSON
} // loadlist
SIMPLEMAP.HTML
- <!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SimpleMap - With marker selection </title>
<link rel="stylesheet " type="text/css" href="css/loadList.css" />
<link rel="stylesheet " type="text/css" href="css/gps.css" />
<script src="../jquery/jquery-2.1.4.js"></script>
<script src="js/mapping.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
</head>
<body>
<!-- =============== Google Maps Function ============================== -->
<script type="text/javascript">
function mapIt() {
var a=48.3; // this is to be replaced w/retData passed from loadlist() below
var b=-116.54;
var myLatLng=new google.maps.LatLng(a, b);
var myOptions = {
zoom: 12,
center: myLatLng, //new google.maps.LatLng(42.351420812410865, -83.07237023559571),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
<!-- =============== End Google maps Function ================================ -->
<div id="loadListWrapper">
<!-- Create Select/Options List here -->
<label id="markerLbl" >Select Marker For:</label><br>
<select name='latlng' id='latlng' size='5'></select>
</div>
<div id="map_canvas" style="width: 500px; height: 500px;">
<!-- Map goes Here -->
</div>
<!-- ======= Call to Create Select/Options & Pass data to mapIt ============ -->
<script type="text/javascript">
var retData=[]; // array to pass to mapIt()
retData=loadlist($('#latlng').get(0), // mapping.js supposed to return dataArray
'getMarkers.php?getlist=latlng', 'name');
alert(retData[0]); // detailed error: TypeError: retData is undefined
//mapIt(retData lat and Lng); call to create map with Lat & Lng data
</script>
</body>
</html>
- Am feeding lat and lng variables to google map from dynamic select/options. I am seeing that the correct lat and lng are being produced but when fed to mapOptions map doesn't load.
Here is my code:
- <!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Maps API getting Lat and Long with Geocoding</title>
<link rel="stylesheet " type="text/css" href="css/loadList.css" />
<link rel="stylesheet " type="text/css" href="css/gps.css" />
<script src="../jquery/jquery-2.1.4.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script type="text/javascript" src="../jquery/getHtmlParams.js"></script>
<script type="text/javascript">
var name;
var index;
var address;
var lat;
var lng;
$(document).ready(function(){
loadlist($('#latlng').get(0), /*the 'select' object*/
'getMarkers.php?getlist=latlng', 'name');
function loadlist(selobj, url, nameattr) {
$(selobj).empty();
$.getJSON(url, {}, function(data) {
$.each(data, function(i,obj) {
$(selobj).append($('<option></option>').val(obj[nameattr]).html(obj[nameattr]));
}); //each
$("#latlng").change(function(){
name=$(this).val();
index=this .selectedIndex;
address=data[index]['address'];
lat=data[index]['lat'];
lng=data[index]['lng'];
mapIt(name, address, lat, lng); // off to load google maps
}) // latlng
}); // getJSON
} // loadlist
}); // doc ready
</script>
</head>
<body>
<div id="loadListWrapper">
<label id="markerLbl" >Select Marker For:</label><br>
<select name='latlng' id='latlng' size='5'></select>
</div> <!-- loadListWrap -->
<!-- ====================================================== -->
<script type="text/javascript">
function mapIt(a, b, c, d) { // c & d are lat an lng
var latlng=c+", "+d;
alert(latlng); // shows lat & lng
var mapOptions={
zoom:8,
center: new google.maps.LatLng(latlng),
mapTypeId: google.maps.MapTypeId.ROADMAP
}; // mapOptions
var map=new google.maps.Map($("#map").get(0), mapOptions); // doesn't load
}; // mapIt
/*
function mapIt(a, b, c, d){ // testing stuff
document.write(a+"/ ");
document.write(b+"/ ");
document.write(c+"/ ");
document.write(d);
}*/
</script>
<!-- ============================================================= -->
<div id="map" > <!-- where map goes -->
</div>
</body>
</html>
- 18-Jan-2016 11:47 AM
- Forum: Using jQuery
Hi,
Trying to learn about select/options dynamic lists. I found this nifty dynamic select program on the internet. Trouble is I can't get the value and text/html. Here is my code: The list populates fine but if I click on a selection nothing happens. Do I need a 'click' function?
Thanks for your help in advance.
R
- <!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Maps API getting Lat and Long with Geocoding</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript" src="../jquery/getHtmlParams.js"></script>
<script type="text/javascript">
$(document).ready(function(){
loadlist($('select#latlng').get(0), /*the 'select' object*/
'getMarkers.php?getlist=latlng', 'name');
alert($( "#latlng option:selected" ).html()); // says undefined
});
</script>
<script type="text/javascript">
function loadlist(selobj, url, nameattr) {
$(selobj).empty();
$.getJSON(url, {}, function(data) {
$.each(data, function(i,obj) {
$(selobj).append($('<option></option>').val(obj[nameattr]).html(obj[nameattr]));
}); //each
}); // getJSON
} // loadlist
</script>
<h3>Dynamically loaded list Sample</h3>
<label>Marker For:</label><br>
<select name='latlng' id='latlng' size='5'></select>
<script type="text/javascript">
alert($( "#latlng option:selected" ).html()) // says undefined
</script>
</body>
</html>
- 07-Jan-2016 04:10 PM
- Forum: Using jQuery
I am trying to call AJAX three maybe four times to get information from my DB. Can't get "global" var mapAddress
to return. I've tried to position the function in various locations but can't get it right. I'm sure this has to do with asynchronous functioning but still don't understand it.
Thanks for help,
R
<script type="text/javascript">
-
var recId="";
var mapAddress=""; // declaring here to create global var
// ==================================================================
// =========== lots of other code including code
// =========== that triggers $('.map').click function below =========
// ==================================================================
$('.map').click(function () {
// ======== there may be two addresses to process =========
// ======== home address and work address ==============
var phaseFlag=1; -
- // MULTIPLE CALL TO AJAX
-
// first phase query the DB to SELECT all address, city, state data ======
// phase two would be a call to SELECT home address info =================
// phase three would be a call to SELECT work address info ==============
mapAddress=myAjaxCallGeo(phaseFlag);
// =========== do stuff with mapAddress ===============
alert("ajax "+mapAddress); // mapAddress is undefined
});
</script>
<script type="text/javascript">
function myAjaxCallGeo(phaseFlag) {
var request = $.ajax({
url: "getLatLong2.php",
type: "GET",
data: {"id":choice, "phase":phaseFlag},
dataType: "json"
});
request.done(myData );
request.fail(function( jqXHR, textStatus ) {
alert("Line 279 - Bad request, see firebug");
});
function myData(address) {
var addFlag="";
if (address) {
if (address.Home_Address) {
addFlag="hm";
mapAddress=addFlag+", "+address.Home_Address+" "+address.Home_City+", "+address.Home_State;
}
else if(address.Work_Address) {
addFlag="wrk";
mapAddress=addFlag+", "+address.Work_Address+" "+address.Work_City+", "+address.Work_State;
}
}
}
}// myAjaxCall
</script>
- Hi, Getting error trying to create table. Don't know what it is or how to fix it.
Hope someone can help.
- ////////
CREATE HEADERS for Table ///////////
// pData from Ajax Call
table_str="<table class='center' border='3' cellpadding='5' bgcolor='#fff99d' >";
table_str+="<thead><tr>";
$.each(pData, function(index, value) {
if (index>0) return false; // just to get the headers
$.each(value, function(i, val) {
table_str+="<th>"+i+"</th>";
});
});
/////////// CREATE Body ////////////////
table_str+="<body>";
$.each(pData, function(index, value) {
table_str+="<tr>";
$.each(value, function(i, val) {
table_str+="<td>"+val+"</td>"; // line of data 'val' Creates the error as below
});
table_str+="</tr>"; // end row
});
table_str+="</body></table"; // end table
alert(table_str);
/* >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>
ERROR ERROR
TypeError: invalid 'in' operand obj
error source line:
typeof length === "number" && length > 0 && ( length - 1 ) in obj;
jquery-2.1.1.js (line 547, col 3)
*/
- Hi,
I don't know what is wrong here, the PHP or the call to AJAX.
error is: uncaught exception: out of memory
I suspect AJAX because the .php file populates the database properly.
Here is my code with pertinent notes in bold.
Thanks in advance for help in solving this.
R.
HTML CODE:
- <!DOCTYPE html>
<!-- Comments about the program -->
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title> GPS Information from Garman GPSmap76CSx </title>
<!-- ============== styles ================ -->
<link rel="stylesheet " type="text/css" href="css/gps.css" />
<!-- ============== scripts1 ================ -->
<script type="text/javascript" src="../jquery/jquery-1.9.1.js"></script>
<body>
<!-- =============== html ================== -->
<div class="wrapper">
<div id="forms">
<form name="gps" id="gps" action="#">
<p>To Down load a Garman GPX file directly to 'mymapping' database file.</p>
<p> <label for='gpxname'>Enter GPX File Name</label>
<input type="text" style="width:170px" class='hov' name='gpxname' id='gpxname'/><br>
</p>
</form>
</div>
</div>
<div id="rbox" >
</div>
<!-- =============== scripts2 ================ -->
<script type="text/javascript">
$('#gpxname').change(function () {
var filename=$('#gpxname').val();
myAjaxCall(filename) });
</script>
<!-- ============ Function showTable =================== -->
<script type="text/javascript">
function showTable(wptdata) { -
- alert("wpt3
"+wptdata[2]['name']); // Nothing Shows Up.
}
</script>
<script type="text/javascript">
<!-- ============ Function myAjaxCall =================== -->
function myAjaxCall(gpxfile) {
var request = $.ajax({
url: "error-downloadGpx.php",
type: "GET",
data: {"gpxfile":gpxfile},
dataType: "json",
});
//request.done(showTable); // detailed error: uncaught exception: out of memory
request.done(alert("data back "+data[0]['name'])); // nothing shows up
request.fail(function( jqXHR, textStatus ) {
alert("Request failed, see firebug."); //document.write( "Request failed: " + textStatus );
});
}// myAjaxCall
</script>
</body>
</html>
PHP Code:
- <?php
header('Content-Type: application/json'); // so JSON is returned properly
set_include_path( '../include' );
error_reporting (E_ALL ^ E_NOTICE);
$hostname='localhost';
$username='rick';
$password='rick';
$database='mymapping';
$table='wdata';
$rows=[];
$gpxfile="";
if($_GET['gpxfile']) {
$gpxfile=$_GET['mygpxfile'];
}
$cxn = mysqli_connect($hostname,$username,$password,$database)
or die ("line 28 readgpx.php - Couldn't connect to server");
$gpx =simplexml_load_file($gpxfile); //function reads xml files
//$gpx =simplexml_load_file('waypoints.gpx'); //function reads xml files
foreach($gpx->wpt as $wpt) {
$nstr=$wpt->name;
$nstr=str_replace("'","\'",$nstr); // escape ' from name
//echo $nstr."\n"; // print name
$dstr=$wpt->desc;
$dstr=str_replace("'","\'",$dstr); // escape ' from desc
$estr=$wpt->ele; // deal with no elevation data
if($estr=="") {
$estr=", ''";
}
else {
$estr=", ".$estr;
}
$sym=$wpt->sym; // deal with no symbol data
if($sym=="") {
$sym=", ''";
}
else {
$sym=", '".$sym."'";
}
// ================ build query to input data =====================
$query="INSERT INTO $table (`id`, `name`, `desc`, `lat`, `lon`, `ele`,`sym`) VALUES( NULL, ";
$query.="'".$nstr."', '".$dstr."', ".$wpt['lat'].", ".$wpt['lon'].$estr.$sym.");";
$result = mysqli_query($cxn, $query) or exit( mysqli_error( $cxn ));
$query=""; // use query over again for next record
} // foreach
$query="SELECT * FROM ".$table." ORDER BY `name` "; // collect data just input into database
//echo $query;
$res = mysqli_query($cxn, $query) or exit( mysqli_error( $cxn ));
While($row=@mysqli_fetch_assoc($res)) {
$rows[]=$row;
}
//echo "count rows ".count($rows)."\n";
//print_r($rows);
echo json_encode($rows); // return json to error-waypointsToDB.html
?>
- 01-Nov-2015 04:34 PM
- Forum: Using jQuery
Going nuts!!!
Can't seem to get the function to return values properly. I've been messing with this for hours and can't work it out, Please help. I don't seem to be able to see the forest for the trees!
Here is my code:
- <!DOCTYPE
html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Google Maps API getting Lat and Long with Geocoding</title>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="../jquery/getHtmlParams.js"></script>
<script type="text/javascript" >
var count, i, address;
var myArray = new Array(2)
var homeAdd=unescape(getUrlParametersVals()['Home_Address']);
var homeCity=unescape(getUrlParametersVals()['Home_City']);
var homeState=unescape(getUrlParametersVals()['Home_State']);
var homestr=homeAdd+", "+homeCity+", "+homeState;
var workAdd=unescape(getUrlParametersVals()['Work_Address']);
var workCity=unescape(getUrlParametersVals()['Work_City']);
var workState=unescape(getUrlParametersVals()['Work_State']);
var workstr=workAdd+", "+workCity+", "+workState;
$(document).ready(function(){
if (homestr && workstr) {
count=2;
}
else {
count=1;
}
if (count==1) {
myArray=getLatLong(homestr);
myLat=myArray[0];
mylong=myArray[1];
}
else if(count==2) {
for (i=0; i<count; i++) {
if(i==0) address=homestr;
if(i==1) address=workstr;
myArray=getLatLong(address);
alert("54: "+myArray[0]+" .. "+myArray[1]); // TypeError: myArray is undefined
//yLat=retVal[0];
//mylong=retVal[1];
//alert(myLat+": "+myLong);
}; // for
} // else
}); // ready
function getLatLong (myAddress) {
var myArray = new Array(2)
var geocoder = new google.maps.Geocoder();
geocoder.geocode({address: myAddress}, function(results) {
myLat= results[0].geometry.location.lat();
myLong=results[0].geometry.location.lng();
myArray[0]=myLat;
myArray[1]=myLong;
alert("75: "+myArray[0]+" .. "+myArray[1]); // returns correct Lat and Long
return myArray;
}); // geocoder
} // getLatLong
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
- <!DOCTYPE html>
- ////////
CREATE HEADERS for Table ///////////
- <!DOCTYPE
html>
-
- function showReturn(data) { // <========= data is returned from AJAX.
© 2013 jQuery Foundation
Sponsored by
and others.
- <?php
-
- Here is my code:<?php
- <script type="text/javascript" >
- <script type="text/javascript" >