JavaScript - Display Array

I have this simple php array. The array will dynamically pull results from the db in the future.

PHP Code:
<?php

$dataArray = array 
        ( 
            'id1'  => array 
                    
                    (     'icon' => '<img src="images/piicon.png">',
                        'app' => 'GGP',
                        'timestamp' => date('m/d/y'),
                        'location' => 'Bellevue',
                        'comments' => 'It works!',
                            ),
            'id2'  => array 
                    
                    (   'icon' => '<img src="images/piicon.png">',
                        'app' => 'Meijer',
                        'timestamp' => date('m/d/y'),
                        'location' => 'San diego',
                        'comments' => 'It works!',
                            ),
            'id3'  => array 
                    
                    (   'icon' => '<img src="images/piicon.png">',
                        'app' => 'Point Inside',
                        'timestamp' => date('m/d/y'),
                        'location' => 'Boston',
                        'comments' => 'I guess its working?  Maybe not exactly what we want yet though?!',
                            )
        );
             
echo json_encode($dataArray);    

?>

Currently if I have 100 results in my array, 100 results will be added to the table, 75 = 75 rows etc. What I am trying to plan out is a logical way to display one result from the array at a time. I am not looking for a chunk of jquery as an answer, better yet would be a plan/idea a programmer would you use to solve this.

PHP Code:
$(document).ready(function() {
    setInterval(function() {
        // get data
        $.ajax({
            url: '/ajax/data.php',
            type: "GET",
            cache: false,
            error: function(data) {
                $("div#error").html('error: '+data);
            },
            success: function(data) {
                var jsonObj = jQuery.parseJSON(data);
                jQuery.each(jsonObj, function(index, value) {
                    var newRow = $("<tr><td>"+value.icon+"</td><td>"+value.app+"</td><td>"+value.timestamp+"</td><td>"+value.location+"</td><td>"+value.comments+"</td></tr>");
                    $("#mainTable tbody").prepend(newRow);
                });
            }    
        });
    }, 5000);
}); 


thanks

I have an essoteric question about javascript and how DOM/javascript stores divs that are created and displayed in succession by absolute positioning.

I have a series of divs that are assigned absolute top and left values to
form a grid. The grid tiles are programmed to swap coordinates in pairs
when one of the pairs is clicked.
Then if I do a sampling of the divs by:
Code:

//returns the same string on every call.
//regardless of the coordinate values. which change
var GM = document.getElementById('TP');
if(GM.hasChildNodes)
  {
   var GMC = GM.getElementsByTagName('div');
   var str = '';
   for(i = 0; i < GMC.length; i++)
      {
       if(GMC[i].hasChildNodes)
         {
          for(var j = 0; j < GMC[i].childNodes.length; j++)
             {
              var gmc = GMC[i].childNodes[j];
              var gmcTxt = gmc.childNodes[0].data;
              str += gmcTxt;
             }
         }
      }
  }
alert(str);

The list does not represent the positions of the divs as they
appear in the browser, but in a sequence that is saved in another
array when the divs are created.

The same is true for document.getElementById('[id assigned each div]')
The only way to detect the sequence is to do a long drawn out loop looking
for coordinate values, and comparing them to a prestablish template set
of values, then looping back through to compare the contents of each div
and decide if they are in the right place (visually).

The problem is that some divs may have the same content.
If the same content appears to be in the right place, the coordinates can
be wrong. So I need to detect the content and decide if it is right, regard-
less of the coordinates. This has to be done by the program (of course).

So the question is: What is javascript doing when it is asked to
Code:

document.getElementByTagName('[elem]');

In this case are the divs children of the document?
(in the case of my project, children of a container div)
And why would they not be detected in the order apparent in the browser
window?

I will post the current version and return and post a reply with the
url. http://www.jekillen.com/jekillen/con..._wise_dev.html

I am working on a page where the user will select a location from a dynamically generated dropdown list.

I was able to create the php multidimensional array (tested and working) from a MySql database using the users information at login, but I'm having problems converting it to a javascript multidimensional array. I need to be able to access variables that I can pass to a number of text fields within an html form.

For instance, if a user belongs to a company with multiple addresses, I need to be able to let them select the address they need to prepopulate specific text fields.

php array creation:
Code:

if ($row_locations) 
{ 
	while ($row_locations = mysql_fetch_assoc($locations))  
	{ 
		$mail[$row_locations['comp_id']]=array('mailto'=>$row_locations['mailto'], 'madd'=>$row_locations['madd'], 'madd2'=>$row_locations['madd2'], 'mcity'=>$row_locations['mcity'], 'mstate'=>$row_locations['mstate'], 'mzip'=>$row_locations['mzip'], 'billto'=>$row_locations['billto'], 'badd'=>$row_locations['badd'], 'badd2'=>$row_locations['badd2'], 'bcity'=>$row_locations['bcity'], 'bstate'=>$row_locations['bstate'], 'bzip'=>$row_locations['bzip']);
	} 
}

javascript function - this should create the array and send variables to text fields.
Code:

function updateAddress() {
var mail = $.parseJSON(<?php print json_encode(json_encode($mail)); ?>);
{
if (comp_id in mail) {
document.getElementById('mailto').value=mail.comp_id.mailto.value;
document.getElementById('madd').value=mail.comp_id.madd.value;
document.getElementById('madd2').value=mail.comp_id.madd2.value;
document.getElementById('mcity').value=mail.comp_id.mcity.value;
document.getElementById('mstate').value=mail.comp_id.mstate.value;
document.getElementById('mzip').value=mail.comp_id.mzip.value;
} else {
document.getElementById('mailto').value='';
document.getElementById('madd').value='';
document.getElementById('madd2').value='';
document.getElementById('mcity').value='';
document.getElementById('mstate').value='';
document.getElementById('mzip').value='';
}
}
}

Where is this breaking?
Thanks in advance.

I have the following array that contain the people who are on off on certain time:

Code:

var all = [
    ["1234", "Jim", "2011-10-23 00:00:00", "2011-10-25 07:00:00"],
    ["1235", "Jack", "2011-10-21 00:00:00", "2011-10-21 08:00:00"],
    ["1236", "Jane", "2011-10-11 00:00:00", "2011-10-11 00:30:00"],
    ["1237", "June", "2011-10-20 00:00:00", "2011-10-20 12:00:00"],
    ["1238", "Jill", "2011-10-14 00:00:00", "2011-10-14 11:00:00"],
    ["1239", "John", "2011-10-16 00:00:00", "2011-10-16 10:30:00"],
    ["1240", "Jacab", "2011-10-19 00:00:00", "2011-10-20 08:30:00"]
];

The above array, I wish to use javascript to insert into the FullCalendar (http://arshaw.com/fullcalendar/). I notice that the only way seems to be using the FullCalendar array style (or structure) as follows:

Code:

$('#calendar').fullCalendar({
    events: [
        {
            title  : 'event1',
            start  : '2010-01-01'
        },
        {
            title  : 'event2',
            start  : '2010-01-05',
            end    : '2010-01-07'
        },
        {
            title  : 'event3',
            start  : '2010-01-09 12:30:00',
            allDay : false // will make the time show
        }
    ]
});

So, the question is: How do I insert my array to match with the FullCalendar array? cause FullCalendar array had a different array structure from my array - and I don't think so that I can write in this way:
Code:

$('#calendar').fullCalendar({
    events:all
});

Appreciate any help provided.

I can't seem to figure out how to accomplish this. In my website, I would like the user to input text into a single or multiple textbox(es) and then have the contents of the textbox(es) stored to either a variable or an array. Then I would like to have that variable/array compared to other arrays. Basically, the user is searching for items in a database. The user can search for as many or as little items as they want. Then the item(s) will be compared to multiple arrays to find out if what the user wants is in the database.

So for example, let's say the user is searching for recipes that have all or part of these ingredients: chicken, broccoli, lemon, honey. So, there would have been a total of 4 textboxes...one for each ingredient. These ingredients are stored to an array..lets call it ingredient(). In the database of recipes, each recipe has its own array which includes the ingredients needed to make the recipe, we'll call them tag1(), tag2(), and tag3(). Now, I want the array, ingredient(), to be compared to each of the "tag" arrays to see if any of the "tag" arrays include exactly match the ingredient() tag in part or in whole. Is this possible?

Hi,
i can't find the mistake in my little script hope someone can help me.

PHP Code:
<?php

/* -------------------- read thumbfolder -------------------- */
    
    function isRdyPfD($filename){ 

        if ($filename == '.' || $filename == '..') {
        // To-Top-Dir
        return false;
    }
    
    $ext = explode(".",$filename);
    $ext = $ext[sizeof($ext) - 1];
    $allowedformats = array (
        'jpg', 
        'png',
        'jpeg',
        'gif'
    );
    
    return in_array($ext,$allowedformats);
    } 

    function getPicsfromDir($dir){ 
    /* array with names of the pictures in  $dir */

        if (is_dir($dir)) {
        if ($dh = opendir($dir)) {
                $filearray = array();
        while (($file = readdir($dh)) !== false) {
            if (isRdyPfD($file) === true) {
                $filearray[] = $file;
            }
        }
        closedir($dh);
                return $filearray;
        }
    }
    else {
        return false;
    }
    } // End Function


    $thumbs = getPicsfromDir("./images/thumbs/");
    

/* -------------------- thumbfolder  -------------------- */    
    echo "<div id='thumbslider'>\n";
    echo "<ul id='thumbs'>\n";
    for($i = 0; $i < count($thumbs); $i++){
            echo "<li><img src=\"./images/thumbs/$thumbs[$i]\" onclick=\"thumbClick($i)\"  /></li>\n";
            
    }
    echo "</ul>\n";
    echo "</div>\n";
    




/* -------------------- big size images folder -------------------- */
    $bigSizeImages = getPicsfromDir("./images/");
    //print_r($bigSizeImages);
    
    $jsValue = '';
    for ($j=0; $j < count($bigSizeImages); $j++){
                $jsValue = $jsValue . $bigSizeImages[$j];
                if ($j < (count($bigSizeImages)-1)) {
                        $jsValue = $jsValue . ",";
                }
   }
    
?> 


<script type="text/javascript">
        images = new Array(<?php echo $jsValue ?>);
        
    

    
    
    function thumbClick(pos){
            
            //alert(pos);
            alert(images[pos]);
            
    }

</script>

I can't trace the images array values?
thanks for a feedback!!!

Hi,
Here is a working code to copy 2d php array to 2d javascript array.


Code:

<html>

<head>

<?php

for($i = 0; $i < 3; $i++)
 {
   for($j = 0; $j < 2; $j++)
                   {$quest[$i][$j] = $i*10+$j;}
 }


?>



<script type="text/javascript">


var questions = new Array(3);

  for (var i = 0; i < 3; i++)
  {
   questions[i] = new Array(2);
  }

questions[0] = ["<?php echo join("\", \"", $quest[0]); ?>"];
questions[1] = ["<?php echo join("\", \"", $quest[1]); ?>"];
questions[2] = ["<?php echo join("\", \"", $quest[2]); ?>"];



document.write(questions[0][0] + "<br />");
document.write(questions[0][1] + "<br />");
document.write(questions[1][0] + "<br />");
document.write(questions[1][1] + "<br />");
document.write(questions[2][0] + "<br />");
document.write(questions[2][1] + "<br />");


</script>




</head>

</html>

Now,here's the thing.Notice these lines in the code


questions[0] = ["<?php echo join("\", \"", $quest[0]); ?>"];
questions[1] = ["<?php echo join("\", \"", $quest[1]); ?>"];
questions[2] = ["<?php echo join("\", \"", $quest[2]); ?>"];

I would like to put these lines in a loop,something like

for (var i = 0; i < 3; i++)
{
questions[i] = ["<?php echo join("\", \"", $quest[i]); ?>"];
}

But even after a lot of efforts I am unable to do so,what am I doing wrong?Thanks

Hi,
In a nutshell,can anyone tell me how to copy a 2d (two dimensional ,2 dimensional) php array to 2d javascript array?I would be obliged if anyone can provide me a method of doing that

OR
I have written a code to copy a 2d php array to a 2d javascript array.It is working but there is one problem(please see the following).Can anyone tell me what I am doing wrong here?


The 2d php array is $quest[100][6] and the 2d javascript array is questions[100][6] . I have written the javascript code inside the <?php....?> itself using echo "<script language="javascript" type="text/javascript">.......</script>;




Now ,inside the javascript,when I try to copy the 2d php array to the 2d javascript array using the following method it works

questions[0]= ["<?php echo join("\", \"", $quest[0]); ?>"];
questions[1]= ["<?php echo join("\", \"", $quest[1]); ?>"]; ... and so on


However, if I try to do the same using the following method it does not work
for (var i= 0; i <= 99; i++)
{ questions[i]= ["<?php echo join("\", \"", $quest[i]); ?>"]; }

Why is that?What mistake am I making?Any help will be deeply appreciated.Thanks



-----------------------------THE CODE------------------------------------
<?php


Access database and store result of mysq_query in $result.......
$result = mysql_query($query);


for ( $count = 0; $count <= 99; $count++)
{
$quest[$count]=mysql_fetch_array($result,MYSQL_NUM);;

}

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

var questions = new Array(100);
for (var i = 0; i <100; i++)
{ questions[i] = new Array(6); }



/*The following method of copying 2d php array to 2d javascript array is not working
for ( var i = 0; i <= 99; i++)
{ questions[i]= ["<?php echo join("\", \"", $quest[i]); ?>"]; }
*/

/*The following method ,however,is working*/
questions[0]= ["<?php echo join("\", \"", $quest[0]); ?>"];
questions[1] = ["<?php echo join("\", \"",$quest[1]); ?>"];
questions[2] = ["<?php echo join("\", \"",$quest[2]); ?>"]; ....and so on




</script>";


mysql_close($db_server);

?>

I'm having major pains trying to figure this out. I'm kind of new to Javascript, I need to open a text file from an external server, store each line in an array, then search that array for a certain word (HIGH), and if it exists then write something to the webpage, and if not, write something else. Here is what I have so far:

Code:

<html>
<head>
<title>Test</title>
<script>
<!--
function test(x) {
  if (wxd1txt.readyState === 4 && wxd1txt.status === 200) {  // Makes sure the document is ready to parse and Makes sure it's found the file.
	 var wxd1text = wxd1txt.responseText; 
     var wxd1array = wxd1txt.responseText.split("\n"); // Will separate each line into an array
	 var wxd1high = wxd1array.toString();  //Converting the String content to String
	//var highsearchreg = new RegExp("HIGH");
//var wxd1high = wxd1array[x].search(highsearchreg);
document.write(wxd1high);
	if (wxd1high.search("HIGH") >= 0){
		document.write("HIGH RISK");}
		else {
		document.write("NO RISK");}
		}
}
//-->
</script>
</head>
<body>
Hi!
<script>
<!--
var Today = new Date();
var ThisDay = Today.getDate();
var ThisMonth = Today.getMonth()+1;
var ThisYear = Today.getYear();
var Hour = Today.getHours();
var Day2 = Today.getDate()+1;
var Day3 = Today.getDate()+2;
if (navigator.appName != "Microsoft Internet Explorer") {
ThisYear = ThisYear + 1900;}
if (ThisMonth < 10) {
	ThisMonth = "0" + ThisMonth;}
if (ThisDay < 10) {
	ThisDay = "0" + ThisDay;}
if (Hour == 2 || Hour == 22 || Hour == 23 || Hour == 0 || Hour == 1) {
	var wxHourd1 = 0600}
	else if (Hour >= 3 && Hour <= 10) {
		var wxHourd1 = 1300;}
			else if (Hour >= 11 && Hour <= 13) {
				var wxHourd1 = 1630;}
					else if (Hour >= 14 && Hour <= 16) {
						var wxHourd1 = 2000;}
							else if (Hour >= 17 && Hour <= 21) {
								var wxHourd1 = 0100;}		
//var wxurld1 = "http://www.spc.noaa.gov/products/outlook/archive/"+ThisYear+"/KWNSPTSDY1_"+ThisYear+""+ThisMonth+""+ThisDay+""+wxHourd1+".txt";
var wxurld1 = "http://www.spc.noaa.gov/products/outlook/archive/2010/KWNSPTSDY1_201005101300.txt" //(High risk day for testing)
//document.write(wxurld1); //Use this to verify this section is working
if (window.XMLHttpRequest)
  {
  wxd1txt=new XMLHttpRequest();
  }
else // IE 5/6
  {
  wxd1txt=new ActiveXObject("Microsoft.XMLHTTP");
  }
wxd1txt.open("GET", wxurld1, true);
wxd1txt.onreadystatechange = test();

// -->
</script>
</body>
</html>

When added to a webpage, nothing shows up except the "Hi!" and there are no errors in the Javascript Console in Google Chrome. Is this possible with Javascript, and if so, what am I doing wrong or not doing?

Also, I have 2 URLs, one is a text file that has the HIGH text I want for an example, the other is the current file, which shouldn't have HIGH in it (unless the weather in the US turns really bad)

Hello I'm have some javascript objects with arrays that should be transferred as php array.
Its posted by ajax httpRequest.

How can I return php array, from the javascript?


JS Code:

['asd1', 'asd2', 'asd3']

via Ajax

=> PHP PHP Code:
array('asd1', 'asd2', 'asd3'); 

Hi,

i have an input value array for customer ids, i also need to make a copy of that array into another input element on submit to use for another process.

So far here is what i have come up with regarding the js


the current html is this

Code:

<!-- original input -->

<input id="cb<?php echo $i;?>" name="cid[]" value="<?php echo $commissions[$i]['id'];?>" onclick="isChecked(this.checked);" type="checkbox" />


<!-- this is new html input which  is outside the $i loop that i need a copy of cid[] stored on submit

<input type="hidden" name="ids[]" onsubmit="valueTovalue();" />


<!-- here is the js so far --> 

<script type="text/javascript">

function valueTovalue()
{

 var valin = document.adminForm.cid.value;  //cid is the array cid[]
 document.adminForm.ids.value = valin; //copy the array to the new input element array ids

}

</script>

so basically if they click 1 cid then ids will also show 1, if they click all cid then ids will show all as well.

will that work the way i have it, am i even close here..

thanks

update: what i have seems to work fine for text values or string values but not for arrays, what am i missing that it wont copy an array?




Array
(
[cid] => Array
(
[0] => 1
)

[task] => remarksonly
[remark] => hhhyyy
[boxchecked] => 1
[ids] => Array
(
[0] =>
)

)




am i getting closer lol


Code:

function valueTovalue()
{
 var valin = cid.concat;  
 document.adminForm.ids.value = valin.concat; 

return(true);

this has to be close i hope

Code:

document.adminForm.ids.value = [].concat(document.adminForm.cid);

I'm trying to set an if statement so if one element is set to display:none, another element(s) sets margin-left to a certain number of pixels.

Sort of like this (however, it's not working):

Code:

<script>
if (document.getElementById('#why-choose-content').style.display = 'none') {
document.getElementById('#always-content').style.margin-left = '335px';
}
</script>

Here is the site in question: http://bit.ly/8XfM0Q

You can get a better idea of what I mean by clicking the 'plus' icons for the three colored tabs above the main content. Or if anybody has a more elegant way to get the divs to toggle under their respective headers, I'd love to hear. Thank you.

Why isnt this working?

Code:

function display_form(obj) {
	var button_name = obj.id.split("dialog_");
	var t = document.getElementById(button_name[1] + '_form').style.visibility = 'visible';
	alert(t);
}

IE is saying:
Code:

id is 'null' or not an object

Hello im using this code to display a countdowntimer

Code:

<script type="text/javascript">
            var timecd;
            timecd = document.getElementById('<%= Text1.ClientID %>').value;
            var GAME = ' | Hells Gate |';
            var OpenTimeCOUNTER = '';
            var TargetCOUNTER = document.getElementById('COUNTER');
            var SecondsCOUNTER = timecd;
            var TargetTimeCOUNTER = new Date();
            var TimeBeginnCOUNTER = TargetTimeCOUNTER.getTime();
            var TimeEndCOUNTER = TimeBeginnCOUNTER + (SecondsCOUNTER * 1000);
            TargetTimeCOUNTER.setTime(TimeEndCOUNTER);
            var DayCOUNTER = TargetTimeCOUNTER.getDate();
            var MonthCOUNTER = TargetTimeCOUNTER.getMonth() + 1;
            var YearCOUNTER = TargetTimeCOUNTER.getYear();
            if (YearCOUNTER < 999) YearCOUNTER += 1900;
            var hCOUNTER = TargetTimeCOUNTER.getHours();
            var mCOUNTER = TargetTimeCOUNTER.getMinutes();
            var sCOUNTER = TargetTimeCOUNTER.getSeconds();
            var fdayCOUNTER = ((DayCOUNTER < 10) ? "0" : "");
            var fmonthCOUNTER = ((MonthCOUNTER < 10) ? ".0" : ".");
            var fhCOUNTER = ((hCOUNTER < 10) ? "0" : "");
            var fmCOUNTER = ((mCOUNTER < 10) ? ":0" : ":");
            var fsCOUNTER = ((sCOUNTER < 10) ? ":0" : ":");
            var EndDateCOUNTER = fdayCOUNTER + DayCOUNTER + fmonthCOUNTER + MonthCOUNTER + "." + YearCOUNTER;
            var EndTimeCOUNTER = fhCOUNTER + hCOUNTER + fmCOUNTER + mCOUNTER + fsCOUNTER + sCOUNTER;
            var counterthing = window.setTimeout("CountDownCOUNTER()", 1000);

            function CountDownCOUNTER() {
                var CurrentDateCOUNTER = new Date();
                var CurrentTimeCOUNTER = CurrentDateCOUNTER.getTime();
                OpenTimeCOUNTER = Math.floor((TargetTimeCOUNTER - CurrentTimeCOUNTER) / 1000);
                var sCOUNTER = OpenTimeCOUNTER % 60;
                var mCOUNTER = ((OpenTimeCOUNTER - sCOUNTER) / 60) % 60;
                var hCOUNTER = ((OpenTimeCOUNTER - sCOUNTER - mCOUNTER * 60) / (60 * 60));
                var fhCOUNTER = ((hCOUNTER < 10) ? "0" : "");
                var fmCOUNTER = ((mCOUNTER < 10) ? ":0" : ":");
                var fsCOUNTER = ((sCOUNTER < 10) ? ":0" : ":");
                var TimeCOUNTER = fhCOUNTER + hCOUNTER + fmCOUNTER + mCOUNTER + fsCOUNTER + sCOUNTER;
                var OutputStringCOUNTER = TimeCOUNTER;

                if (OpenTimeCOUNTER <= 0) {
                    OutputStringCOUNTER = '<a href="Default.aspx">Refresh<\/a>';
                    window.clearTimeout(counterthing);
                }
                TargetCOUNTER.innerHTML = OutputStringCOUNTER;
                document.title = (OutputStringCOUNTER.substring(0, 2) == "<a") ? "!!!READY!!!" : OutputStringCOUNTER + GAME;
                counterthing = window.setTimeout("CountDownCOUNTER()", 1000);
            }
</script>

When im debuging the project it shows ok without any problems:

But when i host the website on the server i Get a NaN:NaN:NaN

Don't know what is hapening... any help would be great

Thanks Ricardo

hi,

i am currently doing a program that will display the image continuously. the image name will be like pic1.jpg , pic2.jpg , pig3.jpg untill pic10.jpg

this is my code so far :

<html>
<head>
<script type="text/JavaScript">
var fileName;

function display()
{
fileName = new Array();
for( i=0; i<5; i++)
{
fileName[i] = new Image();
fileName[i].src = "screenshot_" + i + ".jpeg";
}
}
display();

</script>
</head>
<body>
</body>
</html>


but when i run it, it give me infinity loop, can anyone tell me what is the problem of that ? thanks in advance for the reply