JavaScript - Help Displaying An Associative Array Into An Html Table

Code:

function sortArrayGo(startingArray, sortNum)
{
	var holder = startingArray;
	//holder.push(startingArray[0]);
	var sortedArray = new Array();
	var endNum = startingArray.length;
	//indexPlace=0;
	for(n = 0; n < endNum; n++)
	{
		var min = 0;
		for(m=1; m<holder.length; m++)
		{
			alreadyMin = holder[min][sortNum];
			possibleMin = holder[m][sortNum];
			if(alreadyMin > possibleMin)
			{
				min = m;
			}
		}
		thisLine = startingArray.splice(min, 1);
		for(cellCount = 0; cellCount < tablePos.length; cellCount++)
    	{
    		colNum = tablePos[cellCount];
    		dataToInsert = thisLine[colNum];
     		document.getElementById('dataTable').rows[n].cells[cellCount].innerHTML = dataToInsert;
		}
		sortedArray.push(thisLine);
	}


	return sortedArray;
}

i'm sorting a 2d array by whatever column i specify. i know from using firebug that my sorting is working, but it's getting and displaying undefined for dataToInsert and inside of my table, but sortedArray winds up sorted correctly.

Hi all,

Decided to start learning JavaScript, started 2 days ago. Anyway, I'm trying to create a simple script spits out a styled result based on a user input.

Here is my JS:

Code:

function dispTable (form) {
       var userCost2 = form.venCost2.value * 1;
      marArray = new Array ("0.05", "0.1", ".15", "0.2", "0.25", "0.3", "0.35", "0.4", "0.45", "0.5", "0.55", "0.6", "0.65", "0.7", "0.75", "0.8");
         for (var i=0; i<marArray.length; i++) {
            document.tableDiv.innerHTML = "<div>"
            document.tableDiv.innerHTML = userCost2;
            document.tableDiv.innerHTML = marArray[i];
            document.tableDiv.innerHTML = + userCost2 * marArray[i];
            document.tableDiv.innerHTML = "<\/div>";
   }
}

Here is my HTML:

Code:

<div class="container">
   <form name="lasoCalcTable">
     <span>Enter Vendor Cost</span>
       <input class="textForm" name="venCost2" id="venCost2" type="text" size="8" />
        <hr />
        <input class="butForm" name="calcTblBut" type="button" value="Calculate" onclick="dispTable()" /><br />
    </form>
   
    <div title="tableDiv" id="tableDiv">

     </div>
     
</div>

The problem is that nothing is happening when I press the calculation button.

What I would like to happen is to display a div element for each value in the array which displays the entered value from VenCost2, the current Margin %, and the result of VenCost2 * margin%. I want this to display on the same page and underneath the calculation button, preferably not having to reload the page.

I thought this was going to be relatively easy but doesn't seem so!

Thanks for your help

Hi all,

I want to display varying company information from a javascript array randomly each time the page is refreshed. My problem is that the each piece of company information must be split up into 3-4 array elements since I have set up spans in the body where the information go accordingly and as such I don't how to randomize that.

The relevant code is (I will only give two company examples as it's a long list):

Code:

<script type="text/javascript" language='javascript'>    
     function compInfo(comp){
      var companyInfo = new Array();        
      if(comp == document.getElementById('test').innerHTML)
     {
       //insert business name here.    
       companyInfo[0] = 'Test';
       //insert business type here.
       companyInfo[1] = 'Media';
       //insert street name here.
       companyInfo[2] = 'Test Road.';
       //insert actual opening time here.
       companyInfo[3] = '5am - 10pm';
       //insert actual closing time here.
       companyInfo[4] = 'Christmas'; 
       //insert contact info here.
       companyInfo[5] = 'test'; 
       //insert web address here.      
       companyInfo[6] = '<a href="http://www.test.com" style="color: #0092DD; text-decoration: none;">test.com</a>';
       //insert image link here.
       companyInfo[7] = 'images/test.jpg';                
     }

      if(comp == document.getElementById('test1').innerHTML)
     {
      //insert business name here.    
       companyInfo [0] = 'Test1';
       //insert business type here.
       companyInfo [1] = 'Club';
       //insert street name here.
       companyInfo[2] = 'Test1 Road.';
       //insert actual opening time here.
       companyInfo[3] = '5am - 10pm';
       //insert actual closing time here.
       companyInfo[4] = 'Christmas'; 
       //insert contact info here.
       companyInfo[5] = 'test1'; 
       //insert web address here.      
       companyInfo[6] = '<a href="http://www.test1.com" style="color: #0092DD; text-decoration: none;">test1.com</a>';
       //insert image link here.
       companyInfo[7] = 'images/test1.jpg';
   }

      document.getElementById('title').innerHTML =companyInfo[0];
       document.getElementById('name').innerHTML = companyInfo[1]; 
       document.getElementById('street').innerHTML = companyInfo[2]; 
       document.getElementById('open').innerHTML = 'Open'; 
       document.getElementById('otime').innerHTML = companyInfo[3]; 
       document.getElementById('close').innerHTML = 'Closed'
       document.getElementById('ctime').innerHTML = companyInfo[4];     
       document.getElementById('contact').innerHTML = 'Contact';
       document.getElementById('cinfo').innerHTML = companyInfo[5];  
       document.getElementById('web').innerHTML = companyInfo[6];   
       document.getElementById('image').style.display =  'block';     
       document.getElementById('image').src =  companyInfo[7]; 


}
</script>
</head>
<body>
<SPAN ID='test' onclick="compInfo(document.getElementById('test').innerHTML);"><b>Test</b></SPAN>
<SPAN ID='test1' onclick="compInfo(document.getElementById('test1').innerHTML);"><b>Test1</b></SPAN>

//info shown he 
<div style='text-overflow: ellipsis;'>
                      <table cellpadding='0' cellspacing='0' border='0' style='height:178px; width:185px;'>
                      
                        <tr>                         
                           
                                             
                            <td align="left" style='height:25px;'>

                               <b><SPAN ID='title'  ></SPAN></b>
                            </td>
                        
                        </tr>
                        
                        <tr>                        
                             
                        
                            <td align="left" >
                                
                                
                                
                                  <SPAN ID='name' ></SPAN>
                                  
                                  <br />
                                  
                                  
                                  <SPAN ID='street'></SPAN>
                                  
                                  <div style='height:8px;'>

                                  
                                  </div>
                                  
                                  <SPAN ID='open'></SPAN>
                                  
                                  <br />
                                  
                                  <SPAN ID='otime'></SPAN>
                                  
                                  <br />
                                  
                                  <SPAN ID='close'></SPAN>
                                  
                                  <br />
                                  
                                  <SPAN ID='ctime'></SPAN>
                                  
                                  <br /> 
                                  
                                  <div style='height:8px;'>

                                  
                                  </div>
                                  
                                  <SPAN ID='contact'></SPAN>
                                  
                                  <br />
                                  
                                  <SPAN ID='cinfo'></SPAN>                         
                                  
                                  <SPAN ID='web'></SPAN>
                                   
                                  <img ID='image' style='display:none;'></img>  
                                
                                
                            </td>
                            
                            
                        
                        </tr>                      
                      
                    
                      
                      </table>
                  
                  
                  </div>

</body>

So essentially the process is:
1. The person clicks on the company name.
2. Relevant information from the array is shown in the div.

But what I want is that on startup, information about a random company is shown automatically. How can I achieve this?

Thanks.

Hey guys,

I'm hoping this is possible or that there is an easier way to do this.
I'm having an issue with displaying data from one array that contains information about users in a table that is controlled by a different array.
Is it possible to do this or is this use of arrays to display the data the wrong approach?

The table is located on one webpage, I simply want to extract one piece of information that I have placed in the initial array as part of the login script that contains user information (for validation for login etc) and display it in a table on the new webpage that is opened as a result of successful validation of the user details.

I'm completely stumped and after many attempts I just can't seem to get it to work.

Hi all,

I have a code that will fetch out the data from database OnMouseOver. But it is working fine if don't add table on the div which will come OnMouseOver. If i try to show the fetched data in table then the code doesn't work. Please someone help me with this.

Here is my code:

Code:

<script type="text/javascript" language="JavaScript">

var cX = 0; var cY = 0; var rX = 0; var rY = 0;
function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
else { document.onmousemove = UpdateCursorPosition; }
function AssignPosition(d) {
if(self.pageYOffset) {

rX = self.pageXOffset;
rY = self.pageYOffset;
} else if (document.documentElement && document.documentElement.scrollTop) {

rX = document.documentElement.scrollLeft;
rY = document.documentElement.scrollTop;
} else if (document.body) {

rX = document.body.scrollLeft;
rY = document.body.scrollTop;
}
if(document.all) {
cX += rX;
cY += rY;
}

d.style.left = (cX+10) + "px";
d.style.top = (cY+10) + "px";
}
function HideContent(d) {
if(d.length < 1) { return; }
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
dd.style.display = "block";
}
function ReverseContentDisplay(d) {
if(d.length < 1) { return; }
var dd = document.getElementById(d);
AssignPosition(dd);
if(dd.style.display == "none") { dd.style.display = "block"; }
else { dd.style.display = "none"; }
}
//-->
</script>

</head>

<body>
<table align="center" width="300px"/>
  <tr>
    <td>MakeID</td>
    <td>Make</td>
    <td>Veh Type</td>
  </tr>
<?php
$conn = mysql_connect ('localhost', 'root', '');
mysql_select_db ('my_db', $conn);

function create_div($width, $height, $fields, $table, $w_field, $w_value, $unique) {
$f = implode("`, `", $fields);
$sql = "SELECT `$f` FROM `$table` WHERE `$w_field` = '$w_value'";
$res = mysql_query($sql) or die(mysql_error());
$div = "<div align=center id=\"data".$unique."\" style=\"display:none; position:absolute; border-style:solid; background-color:white; padding: 10px; width:".$width."px; height:".$height."px\" />\n";

$div .= '<table width="100%" cellpadding="4" cellspacing="2">';
$div .= '<tr><th>Serial</th><th>First Name</th><th>Email</th></tr>';

 while($r = mysql_fetch_assoc($res)){
    $div .= '<tr>';
	$div .= '<td>'.$r['id'].'</td>';
	$div .= '<td>'.$r['firstname'].'</td>';
	$div .= '<td>'.$r['email'].'</td>';

 $div .= "</tr>";
$div .= "</table>";
$div .= "</div>\n";
return $div;
}

$sql = "SELECT * FROM name";
$res = mysql_query($sql) or die(mysql_error());
$i=0;
$fields = array("id", "firstname", "email");
while($r = mysql_fetch_assoc($res)){
  echo create_div("300", "200", $fields, "admin", "id", $r['id'], $i);
?>
  <tr>
    <td><?php echo $r['id']; ?></td>
    <td><a onmouseover="ShowContent('data<?php echo $i; ?>'); return true;" onmouseout="HideContent('data<?php echo $i; ?>'); return true;" href="#"><?php echo $r['name'];?></a>
    </td>
    <td><?php echo $r['desc']; ?></td>
  </tr>
<?php
$i++;
}
?>
</table>
</body>
</html>

Hi,

I'm having problems displaying images on a site. Basically I have a to change an image each time a button is pressed on a piece of hardware.

This is the code to detect a button press

Code:

	// Check Button
	tstileo = new Image();
	tstilec = new Image();
	tstileo.src = '/images/1.jpg';
	tstilec.src = '/images/2.jpg';
	
	document.getElementById('btn0').innerHTML = (getXMLValue(xmlData, 'btn0') == 'up') ? document.Image=(tstileo): document.Image=(tstilec);

So when the button is pressed/unpressed it should display tstileo and tstilec

What format should my HTML code be to display the image ?

This is whats there at the moment

Code:

<span id="btn0">?</span></p>

When running all I get is text saying Code:

 [OBJECT HTMLImageElement]

This site is being hosted on a microchip, btn0 is a press button switch on the board. The idea is to use this as a remote monitoring system. It runs Javascript XML HTML and CSS.

Any help would be greatly appreciated, I have spent hours searching for a way to do this ( simple ? ) task but haven't got any further than this.

Thanks

Jay

Hey,

I have a location lookup tool that pulls data from a Google Fusion table. User's type their address in and it drops a pin and info window at the place / result that matches their location. It works great with one location, but now I need it to display multiple results / drop multiple pins if they match the criteria

Here's the working code that drops one pin (sorry it's a lot):

Code:

 google.load('visualization', '1', {'packages':['corechart', 'table', 'geomap']});

var FusionTableID = 'tableid';
    var map = null;
    var geocoder = null;
    var infowindow = null;
    var marker = null;

function initialize() {


  geocoder = new google.maps.Geocoder();
  infowindow = new google.maps.InfoWindow({size: new google.maps.Size(150,50) });
  // create the map
  var myOptions = {
    zoom: 7,
    center: new google.maps.LatLng(41.9908, -93.4208),
    mapTypeControl: true,
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
    navigationControl: true,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }

  map = new google.maps.Map(document.getElementById("map_canvas"),
                                myOptions);

  layer = new google.maps.FusionTablesLayer({
    query: {from:FusionTableID},
    styles: [{
      polygonOptions: {
              fillColor:'#000000',
              fillOpacity: 0.01,
              strokeColor:'#000000',
              strokeOpacity: 0.01
      }
    }],
    suppressInfoWindows:true
  });
  layer.setMap(map);


  google.maps.event.addListener(layer, "click", function(e) {
    var content = "<b>"+e.row['name'].value+"</b>";
    infowindow.setContent(content);
    infowindow.setPosition(locationgeocode);
    infowindow.open(map);
  });

  document.getElementById('submit').onclick = function() {
      document.getElementById("submit").value = "Searching";
  };
}


function showAddress(address) {

  var contentString = address+"<br>Outside Area";

  geocoder.geocode( { 'address': address}, function(results, status) {
      if (status == google.maps.GeocoderStatus.OK) {
      var point = results[0].geometry.location;
      contentString += "<br>";
      // query FT for data
      var queryText ="SELECT 'County', 'Name', 'Location Name', 'Location Address', 'Location City', 'Location State', 'Location Zip', 'geocode'  FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'geometry\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.01));";
      // document.getElementById('FTQuery').innerHTML = queryText;
      queryText = encodeURIComponent(queryText);
      var query = new google.visualization.Query('http://www.google.com/fusiontables/gvizdata?tq='  + queryText);

      //set the callback function
      query.send(openInfoWindowOnMarker);

      } else {
        alert("Geocode was not successful for the following reason: " + status);
      }
  });
}

function openInfoWindowOnMarker(response) {
  if (!response) {
    alert('no response');
    return;
  }
  if (response.isError()) {
    alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
    return;
  }
  FTresponse = response;
  //for more information on the response object, see the documentation
  //http://code.google.com/apis/visualization/documentation/reference.html#QueryResponse
  numRows = response.getDataTable().getNumberOfRows();
  numCols = response.getDataTable().getNumberOfColumns();
  var content = "<b>Outside of Iowa</b><!--";
  var unionBounds = null;
//  alert(numRows);
  for (var i=0; i < numRows; i++) {
     var county = FTresponse.getDataTable().getValue(i,0);
     var precinct = FTresponse.getDataTable().getValue(i,1);
     var locationname = FTresponse.getDataTable().getValue(i,2);
     var locationaddress = FTresponse.getDataTable().getValue(i,3);
     var locationcity  = FTresponse.getDataTable().getValue(i,4);
     var locationstate = FTresponse.getDataTable().getValue(i,5);
     var locationzip = FTresponse.getDataTable().getValue(i,6);
     var locationgeocode = FTresponse.getDataTable().getValue(i,7);
//     var kml =  FTresponse.getDataTable().getValue(i,1);
     // create a geoXml3 parser for the click handlers
     content = "<b>"+locationname+"</b><br />"+locationaddress+"<br />"+locationcity+locationstate+" "+locationzip+"<br/><a href='http://maps.google.com/maps?daddr="+locationaddress+" "+locationcity+" IA "+locationzip+"' target='_blank' >Click here for Directions</a><br /></br></p><!--";
/*
     var geoXml = new geoXML3.parser({
                    map: map,
            zoom: false
                });
//   alert(kml);
     geoXml.parseKmlString("<Placemark>"+kml+"<\/Placemark>");
     geoXml.docs[0].gpolygons[0].setMap(null);
     if (!unionBounds) unionBounds = geoXml.docs[0].gpolygons[0].bounds;
     else unionBounds.union(geoXml.docs[0].gpolygons[0].bounds);
*/
   }



  // zoom to the bounds
  // map.fitBounds(unionBounds);
  setTimeout(function() {
    google.maps.event.addListener(marker, 'click', function() {
      infowindow.open(map,marker);
    });
    infowindow.setContent(content+marker.getPosition().toUrlValue(6));
    google.maps.event.trigger(marker, 'click');
    document.getElementById("submit").value = "Search";
  }, 150);
  geocoder.geocode( { 'address': locationaddress+","+locationcity+locationstate+" "+locationzip}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var point = results[0].geometry.location;
      map.setCenter(point);
      map.setZoom(12);
      if (marker && marker.setMap) marker.setMap(null);
      marker = new google.maps.Marker({
          map: map,
          position: point
      });
    };
  });
}

I basically need it to drop multiple pins if multiple queries match var queryText ="SELECT 'County', 'Name', 'Location Name', 'Location Address', 'Location City', 'Location State', 'Location Zip', 'Hours', 'geocode' FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'geometry\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.01));";

Any thoughts, fixes, or even a point in the right direction would be incredibly helpful. I'm really stuck on this one and have been trying at it for a couple of days now. Even something like getting it to print a second query that I can mark in the table as a second location would be helpful. Something like a second pin that matches:
Code:

  var queryText2 ="SELECT  'County', 'Name', 'Location Name', 'Location Address', 'Location City', 'Location State', 'Location Zip',  'Hours', 'geocode'  FROM "+FusionTableID+" WHERE ST_INTERSECTS(\'geometry\', CIRCLE(LATLNG(" + point.toUrlValue(6) + "),0.01)); AND locationname = 'Location 2'";

Thanks!!

Hey the Title basically says I need a way to read the iframe url even when you navigate to a different page it will read again and keep tracking where the URL is on. Display the URL of the iFRame all the time how would I do this is it possible?

Javascript
HTML
PHP

Is used

Hello,

I have an html script and a .php script.

The .php requests a random word from a table of words in a mysql database.

I wrote a html form to display the requested word in a text box.

Here is my html file:

Code:

<html>
<body>

<script type="text/javascript">

function myfunction()
{
  var xmlhttp;
  if(window.XMLHttpRequest)
  {
    xmlhttp= newHttpRequest();
  }
  else
  {
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  
xmlhttp.onreadystatechange=function()
{
  if(xmlhttp.readyState==4)
  {
    document.myLingo.word.value=xmlhttp.responseText;
  }
}
xmlhttp.open("GET", "get_Word.php",true);
xmlhttp.send(null);
}
</script>
<form name="myLingo">

<input type="button" name="button" value="New Word" onClick="myFunction();" />
<input type="text" name="word" />

</form>

</body>
</html>

and here is my .php script:

Code:

<?php


$con=mysql_connect('localhost', 'xxxx', 'xxxx');
if (!$con)
{
  die('Could not connect: '.mysql_error());
  
}

mysql_select_db("my_lingo", $con);

$sql=mysql_query("SELECT `word` FROM `words` ORDER BY RAND()") or trigger_error('Error: ' .mysql_error());

$word=mysql_fetch_array($sql);

echo $word[0];

mysql_close($con);

?>

When I run this in Internet Explorer; I get a error that is asking for an object on line 32 which is the line that has my button in the javascript.

When i run it in firefox, I don't receive an error, but the page still does nothing.

Any suggestions?
The main function of the page is that, when I click the button, it's supposed to return me a random word from the .php script

Thanks,
jcjst21

Basically what I need to do is cause a bit of HTML to only display on a specific page. I have figured out how to do most of the work i.e. figuring out what page that the code is being displayed on, etc. However, for some reason the DOM element that I am using will not update based on the Javascript. I have searched the Internet for a solution and unfortunately I have found none.
Here is the version of the code that I am currently working on:
Code:

<html>
<head>
<script type="text/javascript">
window.onload = function DisplayButton() {
  var DesiredPage = 'Page to Display';
  //Page that I want the code to display on
  var sPath = window.location.pathname;
  var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
  //This determines and places in a variable what page that the code will be on
  if (sPage == DesiredPage) {
	document.getElementById('HiddenCode').style.display = "block";
  }
}
</script>
<p Id="HiddenCode" style="display:none">Code only to be displayed on indicated page</p>
</head>
</html>

I am somewhat new to Javascript so I feel like I might be missing something obvious here.

Thank You to anyone who can help.
Zbot

/**
The <a> is a list of menu items that when clicked.... a specific gallery-slider-images should been shown in relation to the galleryId....<div class"gallery" is hidden in CSS> I'd like to use jQuery to complete this task if at all possible, I know it's prob SIMPLE to U GURU's but being new i can't seem to .show() the selected 'gallery' w/o showing them all........... BEST REGARDS _ STH

<div id="gallery-menu">
<?php foreach ($galleries as $gallery) : ?>
<a onclick="showGallery(<?= $gallery['gallery']['id'] ?>); return false;"><?= $gallery['gallery']['name'] ?>
<?php endforeach ?>
</div>

<?php foreach ($galleries as $gallery): ?>
<div id="<?= $gallery['gallery']['id'] ?>" class="gallery">
<div class="slider" style="width; 100%; height: 100%;">
<ul>
<?php foreach ($gallery['images'] as $image): ?>
<li class="galleries-container">
<img src="<?= UCMVC_APP_BASE_URL ?>/gallery/retrieve-image/<?= $image['id'] ?>" alt="<?= $image['name'] ?>" title="<?= $image['name'] ?>" />
</li>
<?php endforeach; ?>
</ul>
</div>
</div>
<?php endforeach; ?>


// javascript //

function showGallery(galleryId) {
????!?!?!?!?!
}

Ahoy,

Lemme try to explain this as best as I can. Bullet points might help:
When someone clicks on an image here (http://gta.kwivia.co.uk/gta-iv/), the rest of the images collapse and become invisible Below the image, some links appear Also, there will be a "show other images" button which will then show the rest of the images
http://gta.kwivia.co.uk/gta-iv/

I will appreciate all solutions to this problem. If you need to know anything, simply ask me.

Years ago I created HTML that employs checkboxes and textboxes. I am now writing JS with the intention of adding flexibility and limiting redundancy. I am not sure I truly understand how to correctly interact the two though. For example, one of my scripts have arrays that contain the names of the checkboxes and textboxes, with a 'for' loop to document.write() them to references within the HTML code. This does not seem to be working for me though. Here is what I have thus far (in short):

Code:

<script language="javascript"> 
var teamNames = new Array(3);
 
teamNames[0]="South Africa";
teamNames[1]="Mexico";
teamNames[2]="Uruguay";

for (i=0; i<=31; i++) {
document.write("<p>" + teamNames[i] + "<\/p>");
}
</script>
</head>
<body>
<tr><td>Jun 11</td><td><input type="checkbox" 
name="teamNames[0]" value="teamAbbr[0]"></td>
</body>

I've left out a lot of the code (to include the teamAbbr array, but you get the points. I've tried moving the JS within the HTML body and playing with the reference syntax, but nothing so far. Any help would be great!