Learn VBA & Macros in 1 Week!

JavaScript - Please Help! Driving Me Mad

Full Excel VBA Course - Beginner to Expert

Please Help! Driving Me Mad	View Content

Hi all I am creating a shopping cart in HTML & JavaScript.

It's very nearly complete but I've hit a brick wall with trying to delete a single item.

Where I list the shopping cart I have a delete button by every item. Here is the code to show that:

Code:

var buttonnode3= document.createElement('input'); // Create a button for each item to delete
			buttonnode3.setAttribute('type','button');
			buttonnode3.setAttribute('name','Delete');
			buttonnode3.setAttribute("value","Delete('"+ItemName[j]+"');");
			buttonnode3.setAttribute("onclick","Delete('"+ItemName[j]+"');"); // for FireFox. This parses through the item name (DelName=item name to delete)
			buttonnode3.onclick = function() {Delete(ItemName[j]);}; // for Internet Explorer. Again, this parses through DelName
			tr.appendChild(buttonnode3);

(The value name is for testing purposes).

As you can see here, it shows fine

But when I click delete, I get an 'undefined' error

Here is the code for the Delete(); function

Code:

function Delete(DelName){ // Create function Delete "DelName" parses through item name

alert(DelName); // testing

	for (var ind=0; ind<ItemName.length; ind++) { // Loop through array
		
		if(ItemName[ind] == DelName){ // Find item to be deleted
			
			ItemName.splice(ind,1); // Delete first record of item name
			Quantity.splice(ind,1); // Delete first record of its quantity
			Sum.splice(ind,1); // Delete first record of its sum
			
			alert('You have removed ' + DelName); // Alert user
			
			document.getElementById("div1").innerHTML=""; // Clear the whole shopping cart
			document.getElementById("div2").innerHTML="";
			document.getElementById("div3").innerHTML="";
			
			ViewShoppingCart(); // Once the cart is cleared, there may still be other items so update it again
		
		}
		
	}
}

I've tried doing this var DelName = ItemName[j]; and then change the buttonnode to show DelName and it works however DelName always gets set to the last Item in the array. For example, you delete Dinosaur but it deletes Firemans hat.

Can anyone help me out of this hole?

Full Excel VBA Course - Beginner to Expert

Getting Driving Directions

Similar Tutorials

View Content

I'm sorry if this is in the wrong section...

I am not sure how to do it...

Here is the coding:
Code:

function displayTitle(name, x, y){
return name + " <a href='#' onClick='showDirectionsDialog(\""+name+"\", "+x+", "+y+")'><img src='images/direction.png' alt='Get driving directions'/></a>";
}

function showDirectionsDialog(name, x, y){
var d=dijit.byId("dialogDirections");

d.set("title", "Get directions to \""+name+"\"");

document.getElementById("txtToX").value=x;
document.getElementById("txtToY").value=y;

d.show();
}

function getDirections(){
var frmX=document.getElementById("txtFrmX").value;
var frmY=document.getElementById("txtFrmY").value;
var toX=document.getElementById("txtToX").value;
var toY=document.getElementById("txtToY").value;

var routeData = new Route;
routeData.routeStops = frmX+","+frmY+";"+toX+","+toY;
routeData.routeMode = "DRIVE";
routeData.avoidERP=0;
routeData.routeOption = "Shortest"; 
routeData.GetRoute(showDirections);
}

function showDirections(routeResults){
if (routeResults.results=="No results"){
alert("No directions found, please try other location.");
return;
}

}

Here is the coding I have now:
Code:

function getDirections() {

var routeData = new Route;
routeData.routeStops = document.getElementById('txtTheme').value;
routeData.routeMode = document.getElementById('txtOtptFlds').value;
routeData.avoidERP = document.getElementById('txtExtent').value;
routeData.routeOption = "Shortest"; 
routeData.GetRoute(showRouteData)
}

function showRouteData(routeResults)
{
if (routeResults.results=="No results"){
alert("No Route found, please try other location.")
return
}
else if (routeResults.results=="Stops more than nine"){
alert("Number of stops exceed than nine");
return;
}
directions = routeResults.results.directions[0];

directionFeatures = directions.features;

var routeSymbol = new esri.symbol.SimpleLineSymbol().setColor(new dojo.Color([0,0,255,0.5])).setWidth(4);

var mergedGeometry = new esri.geometry.Polyline()

mergedGeometry.addPath(routeResults.results.routes.features[0].geometry.paths[0])
OneMap.map.graphics.clear();
OneMap.map.graphics.add(new esri.Graphic(mergedGeometry, routeSymbol)); 
//Display the total time and distance of the route
document.getElementById("results").innerHTML = "<br /> &nbsp; Total distance: " + directions.summary.totalLength + "<br /> &nbsp; Total time: " + directions.summary.totalTime;

//List the directions and create hyperlinks for each route segment
for (var i=0;i<directions.features.length;i++)
{
var feature=directions.features[i]
document.getElementById("results").innerHTML= document.getElementById("results").innerHTML + '<br><u>' + parseInt(parseInt(i)+1) + ". " + feature.attributes.text + " (" + feature.attributes.length + ", " + feature.attributes.time + ")</u>" 

}
}

I am not sure how to integrate my codings into the other codings.

There is a name of the place (lets say London) and a clickable icon by the side. When I click the icon, a dojo toolkit dialog box appear for me to enter my location (the other place, London, will be displayed in the dialog box) Click "Go" to get the directions...

I wish to have the directions also placed in a dialog box too...

Geolocation Driving Route

Similar Tutorials

View Content

Hi.
i,m trying to make a map who show me as position A and a target adress as point B.I have made it so i can choose adress a and adress b from a dropdown but i want to automaticly load my position as possition A then choose position B from a dropdownlist. How can i do this ?

Thanks

Natrox

<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Geolocation</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/default.css" rel="stylesheet" type="text/css" />

<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true&language=nb_NO"></script>
 <script type="text/javascript">
var map;
var directionDisplay;
var directionsService;
var stepDisplay;
var markerArray = [];
var initialLocation;
//var oslo = new google.maps.LatLng(59.947639, 10.884469);
var browserSupportFlag = new Boolean();
function initialize() {
directionsService = new google.maps.DirectionsService();
// Create a map and center it on Manhattan.
var oslo = new google.maps.LatLng(59.947639, 10.884469);
var myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: oslo
}
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
// Create a renderer for directions and bind it to the map.
var rendererOptions = {
map: map
}
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions)

// Instantiate an info window to hold step text.
stepDisplay = new google.maps.InfoWindow();
}
function calcRoute() {

// First, remove any existing markers from the map.
for (i = 0; i < markerArray.length; i++) {
markerArray[i].setMap(null);
}
// Now, clear the array itself.
markerArray = [];

// Retrieve the start and end locations and create
// a DirectionsRequest using DRIVING directions.
var start = document.getElementById("sart").value;
var end = document.getElementById("end").value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
// Route the directions and pass the response to a
// function to create markers for each step.
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
var warnings = document.getElementById("warnings_panel");
warnings.innerHTML = "<b>" + response.routes[0].warnings + "</b>";
directionsDisplay.setDirections(response);
showSteps(response);
}
});
}

function showSteps(directionResult) {
// For each step, place a marker, and add the text to the marker's
// info window. Also attach the marker to an array so we
// can keep track of it and remove it when calculating new
// routes.
var myRoute = directionResult.routes[0].legs[0];

for (var i = 0; i < myRoute.steps.length; i++) {
var marker = new google.maps.Marker({
position: myRoute.steps[i].start_point,
map: map
});
attachInstructionText(marker, myRoute.steps[i].instructions);
markerArray[i] = marker;
}
}

function attachInstructionText(marker, text) {
google.maps.event.addListener(marker, 'click', function() {
// Open an info window when the marker is clicked on,
// containing the text of the step.
stepDisplay.setContent(text);
stepDisplay.open(map, marker);
});
}

// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);

var infowindow = new google.maps.InfoWindow({
map: map,
position: pos,
content: 'Du er her.'
});

map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}

function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}

var options = {
map: map,
position: new google.maps.LatLng(60, 105),
content: content
};

var infowindow = new google.maps.InfoWindow(options);
map.setCenter(options.position);
}
function detectBrowser() {
var useragent = navigator.userAgent;
var mapdiv = document.getElementById("map_canvas");

if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
mapdiv.style.width = '100%';
mapdiv.style.height = '100%';
} else {
mapdiv.style.width = '600px';
mapdiv.style.height = '800px';
}
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body onload="initialize()">
<div style="text-align:center">
<select id="start">
<option value="625 8th Avenue, New York, NY, 10018">Port Authority Bus Terminal</option>
<option value="staten island ferry terminal, new york, ny">Staten Island Ferry Terminal</option>
<option value="101 E 125th Street, New York, NY">Harlem - 125th St Station</option>
</select>

<select id="end" onchange="calcRoute();">
<option value="Brubakkveien 14 1083 Oslo">Sigvartsen proffavdeling</option>
<option value="Sonja Henies plass 3, 0185 Oslo">Oslo plaza</option>
<option value="moma, New York, NY">MOMA</option>
<option value="350 5th Ave, New York, NY, 10118">Empire State Building</option>
<option value="253 West 125th Street, New York, NY">Apollo Theater</option>
<option value="1 Wall St, New York, NY">Wall St</option>
</select>
</div>
<div id="map_canvas"></div>
<div id="pos"></div>

 
<div id="warnings_panel"></div>
</body>
</html>

Redirect Driving Me Crazy Javascript

Similar Tutorials

View Content

This has been driving me crazy all day, cant seem to work out what im doing wrong.

Alerts the correct URL
Used document.write and it works
But the redirect command doesnt initiate automatically on click and im not sure why.

Someone help!!

Code:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>http</title>
<style>
<!--
 p.MsoNormal
	{mso-style-parent:"";
	margin-bottom:.0001pt;
	font-size:11.0pt;
	font-family:"Calibri","sans-serif";
	margin-left:0cm; margin-right:0cm; margin-top:0cm}
-->
</style>

<script type="text/javascript">

function buildstring(form)
{

var text = form.text.value;
var xmljson = form.choice1.value;
var init = 'localhost:1234/PPTX/tr?service=extract&action=extractAll&text=';
var op = '&op=';
var first = init + text + op + xmljson;

var complete = "http://" + first;

alert (complete);

window.location = complete;
	
}



</script>
</head>

<body>

<form method="get" id="urlbuild">

<table>

<tr>
<td>
<h2>URL Builder</h2>
</td>
</tr>

<tr>
<td>
<input type="text" size="100" name="text" value="">
</td>
</tr>
</table>

<table>
<tr>
<td>
<select type="one" name="choice1">
<option value="xml"> XML
</option>
<option value="json"> JSON
</option>
</select>
</td>


<td>
<p>Please choose XML or JSON.</p>
</td>
</tr>
</table>

<table>
<tr>
<td>
<input type="submit" onClick="buildstring(this.form)"> 

</td>
</tr>
</table>


</form>

</body>

</html>

Php In External Js File (driving Me Crazy!)

Similar Tutorials

View Content

Hi,
I read several examples, tried them all out - and nothing works! Driving me crazy - completely insane! Maybe you guys can help

My problem is simple:

file B.html includes this line:
Code:

<script type="text/javascript" src="B.js" defer="defer"></script>

file B.js is a regular JS file, yet I need to insert a PHP function in it (yeah - I know it will operate server-side before the page reaches the browser). I did something like:
Code:

(some js code)
var user_id = <?php $a=100; $b=200; $c=$a+$b; echo($c);?>;
alert("Your user ID is:" + user_id);
(some more js code)

(What I expect is the browser to see the line as: var user_id = 300; )

Doesn't work. Renaming B.js to B.php did nothing.
What am I doing wrong?

Thanks!

Regex Problem Driving Me Nuts!

Similar Tutorials

View Content

Hi all,

I have a string which contains HTML and *possibly* IMG tags. I am trying to extract part of each IMG tag which may be in the string. The string is part of a chat-box message which may or may not contain smilies.

Here is a typical line of text, without processing (note I mis-spell the bbcode "quote" so as not to fool this board):

Code:

[qoute="Krupski"]<img src="./images/smilies/smile.gif" alt=":smile:" title="smile" />  <img src="./images/smilies/thumbsup.gif" alt=":thumbsup:" title="thumbsup" />  <img src="./images/smilies/thumbsdown.gif" alt=":thumbsdown:" title="thumbsdown" />[/qoute]

Notice that each image has an "ALT" attribute which contains the smiley code of the smiley image. THAT is what I want to extract.

This is the regex I am using to grab each smiley code:

Code:

txt = txt.replace(/<img(?:.*?):(.*?):(?:.*?)\/>/gi,':$1:');

The weird thing is, the regex grabs the FIRST and LAST of the three, but not the middle one!

I'm sure the stupid mistake is sitting right in front of my face, but I'm not seeing it.

Any help will be greatly appreciated!

Thanks.

-- Roger

String Error Is Driving Me Crazy

Similar Tutorials

View Content

hi...

I'm trying to pass this string and I keep getting the "missing ; before statement error" which I know means I not escaping something or something, but I've tried it every way I can think of and still no dice... any ideas?

Code:

content='<a href onclick="javascript: document.getElementById('searchbox').style.display='inline'">here<\/a> to enter your address' +'<div id="searchbox" display="hidden"><form action="javascript:getDirections()">' +'<input type="hidden" SIZE=40 MAXLENGTH=40 name="saddr" id="saddr" value="" /><br>' +'<div>';

thanks in advance...

Gmap2 Driving Directions Drag Polyline

Similar Tutorials

View Content

Greetings,

I have a GMAP2 setup on my website that gives driving directions from Point A to Point B. I want to add functionality that allows a user to alter the directions once the polyline has already been plotted.

Working Example:

Google Driving Directions

My Driving Directions:

Green Traffic Driving Directions

What javascript do I need to tweak to get the line to be draggable?

Thanks in advance for any information and / or assistance.

Sincerely,
Travis Walters

Asynchronous Ajax Driving Me Crazy. How To Act Upon Response W/o Going Synchronous?

Similar Tutorials

View Content

long story short, I have been trying to run a loop, say, 10 times and I know the result I want will be on the first request but it sends all 10 at the same time, over writing the variable for xmlhttp. discovering in my days of attempts that its just the nature of the beast, but I would like ANY way possible to get a response on the 1st pass of the loop in any way possible. But for now, here's a riddle I can't solve, how to make this function return with the response?

Code:

function ajaxRequest(query){
	 
		var response = 'I have not checked yet.';
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.onreadystatechange=function() {
			if (xmlhttp.readyState==4 && xmlhttp.status==200) {
				response = xmlhttp.responseText.trim();
			}
		}
		xmlhttp.open("GET",query,true);
		xmlhttp.send();
		
		return response;
		
	}

It will always instantly say "I have not checked yet." when I would like the response.

I'm okay with it being a 2-5 second delay as long as it doesn't pause the browser like a synchronous request. Even a delay of some sort just before the return would probably do it. In that case, I think I can get the rest.

Thanks much in advance!

Simple Problem With Document.write() Driving Me Nuts!

Similar Tutorials

View Content

How come when the page below loads, I see the "Ahh!" but not the "HELLO??".

The "Ahh!" is generated by the document.write() in JavaScript. Anytime I use it, the other HTML in the page seems to stop loading.

Any thoughts?

- - - - - - -
<html>
<head>
<title>test</title>
</head>
<body>

<script type="text/javascript">
window.onload = Scream;
function Scream() {
document.write("Ahh!!");
}
</script>

<br><br><br><br>

HELLO??

</body>
</html>

Google Maps Api - Compare Driving Distances Without Displaying Locations

Similar Tutorials

View Content

I'm trying to make something a lot like a store locator where a user types in their address of origin and submits, then the script compares the driving distances between their entered address and the 4 destination locations that I will store in an array once the page loads.

It's kind of hard to describe. I have a form working to do the distance and driving directions once I know which destination will be chosen. This is what I have so far:
http://rowsdower.freehostia.com/map_test.php

That seems to be working just fine. The problem is that I just can't get anything working that will compare the distance between the origin and each of the options before choosing and displaying directions to the nearest destination. My ultimate goal is to update the list of <options> with PHP and maybe MySQL - though I really don't need this to be large-scale. Then, after the user inputs a starting address if they choose a specific location from the dropdown it will give those directions, otherwise (if the "choose closest location" option is still active) then I will run a comparison of driving distances for each option's address value and store them to an array. Once all locations are read and tested for driving distance I want to take the closest location set that option as selected, and then run the call for driving directions as usual.

I know how to pull the option values, how to set and unset the "selected" attribute, and how to check to see if distances need to be compared. I can figure out how to do just about everything I need EXCEPT for getting the google maps API to play along. I've tried so many dead-end ideas that I have just reset my map code to square one. Any ideas for a script piece to run that will return only the driving distance for a list of locations?

The onclick event listener would be something like this
Code:

Array.prototype.findIndex = function(value){
	var ctr = "";
	for (var i=0; i < this.length; i++) {
		// use === to check for Matches. ie., identical (===), ;
		if (this[i] == value) {
			return i;
		}
	}
	return ctr;
};





// ===== request the directions =====
function getDirections() {
	document.getElementById("directions").style.display="block";  //displays the directions container 
	var saddr = document.getElementById("search1").value;  //the user's origin 
	var daddr = document.getElementById("search2").value;  //the selected destination 
	if (daddr=="Closest Location") {
		var distances = [0];
		for (i=1;i<document.getElementById("search2").options.length;i++) {
			 //setting i=1 so I skip the "closest Location" option... 
			if (document.getElementById("search2").options[i].selected) {
				document.getElementById("search2").options[i].removeAttribute("selected");  // de-select each option as we go just in case... 
			}
			var destination = document.getElementById("search2").options[i].value;  // pulling up the stored address 

			 //run driving directions comparison here then set "daddr" to the address whose driving distance is least 
 			distances[i]=getDrivingDistance(saddr,destination);  /*	<----- I just made this up, I don't really know
										how to get this done but I want it to be as
										simple as this somehow...*/  
		}
		daddr = distances.findIndex(distances.min());  // Finds index of the lowest driving distance 
		document.getElementById("search2").options[daddr].setAttribute("selected","selected");  // marks closest location as selected 
		daddr = document.getElementById("search2").options[daddr];  // sets destination address to same index as least distance index 
	}
	 // at this point I have either the user-defined destination or else the closest destination, so I find the directions... 
	var locale = getLocale();
	var dirOpts = {
		locale: locale,
		getPolyline: true
	};
	if (document.getElementById("walkingDirections").checked) {dirOpts.travelMode = G_TRAVEL_MODE_WALKING;}
	if (document.getElementById("avoidHighways").checked) {dirOpts.avoidHighways = true;}
	if (mapPreserveViewport) {
		dirOpts.preserveViewport = true
	}
	gdir.load("from: "+saddr+" to: "+daddr, dirOpts);
}

I'm going cross-eyed trying to get this working. Does anyone have any ideas for a code blurb to tie this all together? I think everything else should work once I get through the distance iterations but I'm useless with the google maps API...