Incrementing javascript problem

Question

I'm extremely new to javascript so I've no idea if I'm doing this correctly.

I've got some php that is filling a javascript variable array:

<?php

$pages = get_pages(array('child_of' => $post->ID, 'sort_column' => 'menu_order'));
$data = array();
foreach($pages as $post){
  setup_postdata($post);
  $fields = get_fields(); 
  $data[] = '<p>'.$fields->company_name.'</p>';
}
wp_reset_query();

// the js array
echo 'var marker_data = ["'.implode('","', $data).'"];';
?>

This then feeds this javascript:

infowindow.setContent(marker_data[i]);

The problem is that it's not incrementing. If I change the "i" to "0" or "1" then it works. But obviously I need it to increment through.

Keep in mind they run on different levels. The JS runs after _all_ the PHP has executed. So if you expect them to work together, you'll have problems. — JohnP, Sep 23 '11 at 08:39
@SergeS It's being echoed out in the first code box, then the one line below. — Rob, Sep 23 '11 at 08:39
Could you check to see what the JS you generate looks like? Also remember JSON is basicly javascript, you could consider using `json_encode` to echo your array. — TJHeuvel, Sep 23 '11 at 08:40
@JohnP Is it possible to just increment through, changing it to 0 and 1 seems to work so just a case of incrementing. — Rob, Sep 23 '11 at 08:40
And just to everyone, I'm at my limit with this so please go easy on me. — Rob, Sep 23 '11 at 08:41
first of all - PHP part of javascript is only data - all i want to see is, where you are setting i and where you are incrementing, then it would be nice to know where you get setContent ( is this your function or framework or what ? ) — SergeS, Sep 23 '11 at 08:46
@SergeS Here's the working example http://www.mediwales.com/mapping — Rob, Sep 23 '11 at 08:49
Eh, as i see there , I cannot find the line you wrote above, nor the php script included - can you post it here ? — SergeS, Sep 23 '11 at 08:54

phihag · Accepted Answer · 2011-09-23T09:06:45.513

1

You need to increment i in JavaScript, not in php, like this:

<script type="application/javascript">
<?php
$pages =get_pages(array('child_of' => $post->ID, 'sort_column' => 'menu_order'));
$data = array();
foreach($pages as $post){
  setup_postdata($post);
  $fields = get_fields(); 
  $data[] = '<p>'.htmlspecialchars($fields->company_name).'</p>';
}
wp_reset_query();

echo 'var marker_data = ' . json_encode($data) . ';'; // Instead of implode
?>
for (var i = 0;i < marker_data.length;i++) {
    infowindow.setContent(marker_data[i]);
}
</script>

edited Sep 23 '11 at 09:06

answered Sep 23 '11 at 08:45

phihag

278,196
72
453
469

@Rob Oops, didn't see that part. I also confused `data` and `marker_data` - sorry! Fixed in this new version. If it doesn't work, try two things: 1. Give us a link to a live example page 2. Go to your browser's developer tools or JavaScript console and look for any errors. – phihag Sep 23 '11 at 09:01
From looking at the source (line 90) it's showing the right data "var marker_data = ["
MediWales<\/p>","
Teamworks Design & Marketing<\/p>"];" (not sure what the extra slash in
has come from). So just a case of looping through that. At the moment it's only showing the "teamworks" name. – Rob Sep 23 '11 at 09:06
@Rob Sorry, I may be misunderstanding something, but your example looks like it works exactly as intended: Upon clicking one of the marker, the HTML content is displayed. What is not working there? – phihag Sep 23 '11 at 09:06
@Rob Oh, I see. The inserted backslash is correct and does no harm. It looks like you're setting infowindow in an anonymous function that already gets `i`. Have you tried just `infowindow.setContent(marker_data[i]);` (without the `for` loop)? – phihag Sep 23 '11 at 09:09
@Rob Your problem seems to be entirely unrelated to map_data; `i` is not set since it's referencing the outer namespace from a callback function. – phihag Sep 23 '11 at 09:26
Sorry what does that mean? Like I said, all very new to me so don't quite understand. – Rob Sep 23 '11 at 09:27
@Rob See http://phihag.de/2011/so/for-loop.html . If you're referring to a variable outside a function, you always get the "current" value *when the function is called*. Does the [linked demo](http://phihag.de/2011/so/for-loop.html) solve your problem? – phihag Sep 23 '11 at 09:30
@Rob For details on this exact problem, have a look at http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example . – phihag Sep 23 '11 at 09:31
@Rob I added an anonymous function (`for (var i = 0; i < codesArray.length; i++) { (function(i) { // ADD THIS`. Pressing `Ctrl+U` or selecting `View -> Source Code` shows you the source code. – phihag Sep 23 '11 at 09:44
2

Got it, just fixed it from your source. I can't say thanks enough, literally 10 or so people have attempted and failed. Thank you thank you thank you!! – Rob Sep 23 '11 at 09:47

score 0 · Answer 2 · answered Sep 23 '11 at 08:45

Once your PHP runs and returns the page, have a look at the source and look at your JS. It should look something like this

var marker_data = ['<p>Comp 1</p>', '<p>Comp 2</p>', '<p>Comp 3</p>'];

This means you've built your array of strings. Now you'll need to use a javascript loop to iterate through it, something like this.

var length = marker_data.length;
for (var i = 0; i < length; i++) {
   infowindow.setContent(marker_data[i]);
}

Remember that all of this iteration should happen in your JS code and not your PHP code. They are not to be mixed like that.

Phihag has got the json working for the marker_data, it's just not doing the looping part. — Rob, Sep 23 '11 at 09:08

score 0 · Answer 3 · answered Sep 23 '11 at 09:31

Good answears given above. This is a general old school instructional way how you mix php and javascript arrays, it can also be adjusted to your needs but I also suggest you go beyond it and look for new schoold things too.

<html>
<head>
<script type="text/javascript">
var myRandoms = new Array();
<?php
$dbq="\"";
for($i=0;$i<9;$i++)
    echo 'myRandoms[',$i,']=',$dbq,rand(1,999),$dbq,';';
?>
var len=myRandoms.length;
var i;
for(i=0;i<len;i++)
    alert(myRandoms[i]);

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

Incrementing javascript problem

3 Answers3