Tracking down where an array is used - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Tracking down where an array is used

csdude55

6:09 pm on Oct 25, 2022 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

I've discovered a weird issue and I'm not having any luck tracking it down.

In the <head></head> of every page, I load javascript.js. Within that script, I include:

imbObj = [];

and

function jsonObj(dir, image, prepend='') {
 this.name = image;
 this.uuid = prepend + dir;
}

Later in the PHP script that I'm looking at, I have an inline JavaScript that goes:

echo <<<EOF
<script>

EOF;

// $imgArr is an associative array that's created in PHP earlier
foreach ($imgArr as $dir => $image)
 echo <<<EOF
imgObj.push(new jsonObj('$dir', '$image', 'dir_'));

EOF;

echo <<<EOF
</script>

EOF;

I don't see anywhere else that I use imgObj.

On the initial load of the page, imgObj is empty (as it should be). But after I run the push(), it has unexpected values in the beginning (spaces and line breaks added for readability):

[
 null,

 // it looks like this shows twice, regardless of how many times the push runs
 {"0":{},"length":1},
 {"0":{},"length":1},

 {"name":"20221020_164047.jpg","uuid":"43f07ec4-17a7-4874-bb84-66a0f002f48e"},
 {"name":"20221021_144704 (1).jpg","uuid":"71bba099-2616-4415-b420-0d0d16c19c30"}
]

But if I add another imgObj = []; before pushing, then those 3 unexpected lines go away. So it appears that they're being added after the initial page load, but before the first push.

I feel like adding that second line is more of a patch than fixing the problem, though. Do these lines have some sort of special meaning that I don't understand? If not, can you suggest a way to track down where they're coming from?

ronin

9:30 pm on Oct 25, 2022 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Is it possible that the inline JS echoed by your PHP runs at least once, prior to your javascript.js file loading and executing?

robzilla

9:47 pm on Oct 25, 2022 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

How do you "run the push()"?

Anyway, console.log() is your friend. Put it in the jsonObj() function, e.g. console.log(imgObj), and you'll see how often it is run and what the value of imgObj is at the time.

lucy24

9:48 pm on Oct 25, 2022 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

imbObj = [];

Please say that's a typo :)

csdude55

3:52 am on Oct 26, 2022 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

Is it possible that the inline JS echoed by your PHP runs at least once, prior to your javascript.js file loading and executing?

I mean, it shouldn't. But I can't rule it out.

The PHP script creates the $imgArr array on line 63, then includes header.php (which loads javascript.js) on line 136. Then it echoes the JavaScript's imgObj.push... on line 149. There's nothing in those 85 lines in between that does anything at all with JavaScript.

Further, I added console.log(JSON.stringify(imgObj)); to line 166 (immediately after the PHP foreach loop), and on the initial load it is definitely empty.

How do you "run the push()"?

The first time it runs is when the page loads. The PHP script creates an array based on whether there should be anything in there, and if so then that populates the JavaScript array. I haven't tested it with anything in the PHP array yet, all of my tests are when there's nothing there. But I'm absolutely sure that, at this point, the array is empty.

The second time it runs is after I upload something using "fineuploader" (which we've discussed before). That runs via jQuery:

var uploader = $('#fine-uploader-gallery').fineUploader({
 ...
})
.on('complete', function (event, id, uploadName, responseJSON) {
 imgObj.push(new jsonObj(responseJSON['uuid'], uploadName));
});

The .on('complete'... is a verbatim copy-and-paste, and I don't see anything in it that would create those unexpected lines. But this is the point where the array is no longer empty, so I guess it has to be coming from here?

But even if responseJSON['uuid'] or uploadName were empty, it wouldn't explain the "0" or "length" keys.

Anyway, console.log() is your friend. Put it in the jsonObj() function, e.g. console.log(imgObj), and you'll see how often it is run and what the value of imgObj is at the time.

True dat. I used console.log() throughout the rest of the script to get this far, but javascript.js is cached pretty heavily via Apache settings and it's a pain to get it to load something new from the server :-/ I was hoping you all could suggest some other way to track a JavaScript variable, but if not then I'll have to fight that.

Please say that's a typo :)

Hahaha, you had me for a second! But alas, no, I guess that I just typed it for the post instead of a copy-and-paste, so yeah, it's just a typo on here :'-(

Fotiman

5:30 pm on Oct 26, 2022 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

I'm not a PHP person, but is it possible that one of the keys or values in your imgArr has an escape character '\' that might be causing you to generate invalid JavaScript? Can you View Source after the page is generated and find the imgObj.push lines to see what's there?

londrum

5:41 pm on Oct 26, 2022 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

can you maybe put a temporary document.write in there, just to see where it prints out

robzilla

5:42 pm on Oct 26, 2022 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Top Contributors Of The Month

OK so as soon as the page has loaded, but you haven't used the fineuploader yet, entering imgObj into the Console returns?

javascript.js is cached pretty heavily via Apache settings and it's a pain to get it to load something new from the server

Consider adding filemtime('javascript.js') (use the exact path to the file) to the script src, e.g. <script src="/js/javascript.js?1666528056"> to break out of the browser cache after you've made any changes.

Dimitri

11:52 am on Oct 27, 2022 (gmt 0)

WebmasterWorld Senior Member

Top Contributors Of The Month

it's also possible to disable browser cache, using the DevTool (Chrome/Firefox) , there is an option to disable cache.