Jump to content

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


creativejay
 Share

Recommended Posts

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.

1214751919_ScreenShot2019-09-17at1_24_34PM.png.40a5add499bcd5a78f708d0b92171ef6.png

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

897671354_ScreenShot2019-09-17at3_23_28PM.png.e7b0e2bcf149f5a2d56dc073231b60aa.png

 

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. ? 

Link to comment
Share on other sites

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 /- -->";
	
	}
}

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

 

  • Like 3
Link to comment
Share on other sites

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!

  • Like 4
Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 by szabesz
typo: alternative
  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...