Strange code inserted by... css? js? a module?

[creativejay]

I don't even know where to begin with this plea for help. Is this a PWire issue? Or just CSS/js? I have no idea.

I guess I'm looking for help pinpointing suspects for this strange behavior.

I have a block of markup with some API mixed in, but nothing that should result in this. My "View Source" when viewing the page is correct, but when I inspect element, I found these empty "<a>            </a>" tags that are being inserted into just the first instance of a foreach loop. If I repeat the same code in the same loop (double-output per $item), only the first is affected.

See all those <a> tags? The output should be:

 

I checked the css files that Inspect Element says are interacting with this output, but I've found nothing. I turned off my css calls in the header one by one, and my javascript calls, but I can't pinpoint the problem. My first suspect was the EmailObfuscation module but deactivating it/debug-moding it/putting it on manual/etc. had no effect. 

So if this were you, how would you go about locating the source of the problem?

I'm hoping one of you has seen this before and knows what my problem is right away. ? 

[louisstephens]

It might help out to see the actual php markup being used in your template to better help with your issue.

[creativejay]

Yes, of course! 

As I said, when I view the Page Source in my browser, it looks as it should. It's only in the Inspect Element that I see the unwanted <a> tags.

 

if($user->isSuperuser()) {
	$speakblock = '';
	$speakers = $users->find("roles=speaker, sort=created, speaker_portrait!=null, speaker_topics.event_picker=$page, limit=4");
	$s = 0;
	foreach($speakers as $speaker){
		
			$s++;
			$portrait = null;
			$portrait = $speaker->speaker_portrait->first();
			
			$simg = $portrait->size(267,358)->url;
			$simgsrc = "<img src='" . $simg . "' alt='{$speaker->pad_firstname} {$speaker->pad_lastname}' width=\"267\" height=\"358\"/>";
			
		    $topicfield = $speaker->speaker_topics->find("event_picker=$page");
    
			
			// There is now a template for schedules within each event that draws from time slots defined under the main site structure.
			// Figure out where the speaker is scheduled to speak and add that to the entry-meta area.
			
			$speakblock .= "
			<div class=\"col-md-6 col-sm-6 col-xs-12\">
				<article class=\"type-post\">
					<div class=\"col-md-6 col-sm-6 col-xs-6\">
						<div class=\"entry-cover\">
							<a href=\"schedule/speakers/\">{$simgsrc}</a>
						</div>
					</div>
					<div class=\"col-md-6 col-sm-6 col-xs-6\">
						<div class=\"entry-meta\">
							<div class=\"post-date\">
								<a href=\"#\" title=\"\"><i class=\"fa fa-calendar\" aria-hidden=\"true\"></i><span>10 Dec, 2015 </span></a>
							</div>
							<div class=\"post-admin\">
								<i class=\"fa fa-user\" aria-hidden=\"true\"></i><span>by</span><a href=\"#\" title=\"Admin\">Admin</a>
							</div>
							<div class=\"post-like\">
								<a href=\"#\" title=\"Likes\"><i class=\"fa fa-heart-o\" aria-hidden=\"true\"></i></a><span>03 Likes</span>
							</div>
						</div>
						<div class=\"entry-title\">
							<a href=\"schedule/speakers/\" title=\"Topic\">";
							foreach ($topicfield as $topic){
						        $speakblock .= "<h3>" . $topic->presentation_topic_1 . "</h3>";
						    }
    					$speakblock .= "</a>
						</div>
						<div class=\"entry-content\">
							<p>{$speaker->speaker_bio}</p>
						</div>
						<a href=\"schedule/speakers/\" class=\"learn-more\" title=\"See All Speakers\">See All Speakers</a>
					</div>
				</article>
			</div>";

		if ($s%2 == 0) {
			$speakblock .= "</div>
			<div class=\"row\"> ";
		}
	
	}
	
	if($s > 0){
			
		
	echo "<!-- Latest Speakers -->
	<div class=\"container-fluid latest-blog latest-blog-section no-padding\">
		<div class=\"section-padding\"></div>
		<div class=\"container\">
			<div class=\"section-header\">
				<h3>New Speakers Announced!</h3>
				<span>Experts and Enthusiasts of a Keto Lifestyle</span>
			</div>
			<div class=\"row\">";
	echo $speakblock;				
	echo "</div></div>
		<div class=\"section-padding\"></div>
	</div>
	<!-- Latest Speakers /- -->";
	
	}
}

 

[netcarver]

@creativejay Have you tried turning off all your browser extensions, then closing and reloading your browser?

 In the past, I've spent hours fruitlessly trying to track down insertions into a page. I looked in my templates, modules and js. I eventually found out it was the Grammerly browser extension.

[creativejay]

3 minutes ago, netcarver said:

@creativejay Have you tried turning off all your browser extensions, then closing and reloading your browser?

 In the past, I've spent hours fruitlessly trying to track down insertions into a page. I looked in my templates, modules and js. I eventually found out it was the Grammerly browser extension.

Thanks for this! I've tried it now, and still the same problem.

I've also viewed the page in both Safari and Chrome with the same effect.

[nbcommunication]

I'm pretty sure I've seen something similar happen when nesting an <a></a> inside another <a></a> - looks "fine" in page source but the browser attempts to escape them or something and it displays differently in the inspector.

Steps I would go through is to to replace each var value with a blank string, go through each methodically, or maybe remove each <a></a> and add each one back in to identify which one is triggering it. You might find it completely unrelated to the above, but it'll get you closer to the source of the issue!

PS - Grammarly browser extension and CKEditor 4 don't mix well. Had to ask a number of clients and colleagues to disable it so they can actually save content.

 

[netcarver]

Other quick thoughts:

• If you fetch the page using curl/wget from the command line, is everything structured properly in the saved page body?
• Are your page results being cached or otherwise not being reloaded either in the browser or via one of PWs caches?

[pwired]

Not only services such as grammerly, but also internet providers inject css code in your browser, once you are on mobile or tablet.

[creativejay]

Thank you all for helping me with this! the culprit has been found. An “<a>” that should have been an “</a>” further up the page (which must have been there for months uncaught). Strange that today revealed symptoms of it for the first time! 

I feel silly, but I’m glad that’s over!

 

thanks again!

[louisstephens]

16 hours ago, creativejay said:

Thank you all for helping me with this! the culprit has been found. An “<a>” that should have been an “</a>” further up the page (which must have been there for months uncaught). Strange that today revealed symptoms of it for the first time! 

I feel silly, but I’m glad that’s over!

 

thanks again!

This.. I run into little things like this all the time. It is one reason I moved away from outputting html in code/text blocks (unless it it really small), and moved to the php alternant syntax:

<?php foreach ($services as $service) : ?>
    <div class="service">
        <h1>Sample Text</h1>
        <p><a href="<?php echo $service->url; ?>"><?php echo $service->title; ?></a></p>
    </div>
<?php endforeach; ?>

At least to me, it is much easier to find an issue since Visual Studio Code doesn't highlight the different syntax in code/text blocks (unless there is a way and I cant find it). I might start integrating twig into my templates as well. I do like the syntax, but I have not really tried it out much.

[creativejay]

20 minutes ago, louisstephens said:

This.. I run into little things like this all the time. It is one reason I moved away from outputting html in code/text blocks (unless it it really small), and moved to:

<?php foreach ($services as $service) : ?>
    <div class="service">
        <h1>Sample Text</h1>
        <p><a href="<?php echo $service->url; ?>"><?php echo $service->title; ?></a></p>
    </div>
<?php endforeach; ?>

At least to me, it is much easier to find an issue since Visual Studio Code doesn't highlight the different syntax in code/text blocks (unless there is a way and I cant find it)

Yes that’s a very good argument for switching to that method!

[szabesz]

1 hour ago, creativejay said:

Yes that’s a very good argument for switching to that method!

While I also mostly use the alternative syntax for the very same reason, it is also worth noting that (at least on the frontend) Tracy Debugger's Validator panel is quite handy. I keep using it all the time.

Edited September 18, 2019 by szabesz
typo: alternative