Using microdata on elements created after during page load - html

I need to add microdata snippets to a list that is being populated by a script during the page load.
My code is written in a way that I have the basic list element in my html code, and it gets duplicated as the list is populated (this happens once when the page is loaded).
I try to add microdata to every element in the list, but when I use google's rich snippet tool it seems that it only reads the basic html snippet and not the whole list after it was populated. I do the exact same trick on a different page and there it seems to work fine (meaning i get a list of videoObjects each containing the data inserted to it) [edit: the second page was created on server side, this is why it worked on it].
Any idea how to get around problem?

As a general rule, search engines do not read content dynamically created by JavaScript. So anything your script dynamically creates will be invisible to Google. If you want them to index this content you need to create this content server side.

Related

TYPO3 Ke_Search: How do I have multiple search forms on one page without them interfering each other?

I have a search form in my header rendered as a cObject from a content element which is a ke_search searchbox and it leads to a /search page when submitting.
I also have subpages that are supposed to only look through seperately indexed pages like news and other pages.
For that I have folders in the typo-backend which contain indexer configs.
My problem is that when I set up that search box in the header the other searches are using the indexer config from the header (probably because it's the first searchbox on that page).
How do I make sure that every searchbox uses it's correct index?
As mentioned: Everythings seems to be split up nicely in the backend.
I can only imagine that somethings going wrong because the searchboxes are rendered with the same id but how can I make sure they render with diffrent ID's?
I managed to get an answer from the team behind Ke_Search.
When implementing a global searchbox that is used across every page, you should implement the searchbox as plain html and not as a content element in Typo3. You can only have one searchform as a content element per page.
Here's the documentation on how to implement the html version:
https://docs.typo3.org/p/tpwd/ke_search/main/en-us/Templating/Searchbox.html#include-searchbox-with-plain-html
Just leaving this here for anyone running into the same issue.

How to show completed html source on chrome?

I'm trying to take the full html source of the tab in
this page
I want to take the source of
this tab
But unfortunately, the html I'm getting is not completed.
I registered a gif to explain it better
That select list is showing just when I inspect the element, while If I just insect the element with the list closed, it doesn't return any list html.. is it created dinamically when the user click on it?
I've tried to expand all the codes, but unfortunately it seems the html of every list is not appearing.. It might be created just when I open the list?
Is there a way to get the lists html?
Hope I've been clear.
Not sure what you want to save, but by inspecting it sources, it seems that the website use the way of removing and appending the html source which means only you pressed the expanded button, Javascript will append it (different options) to the body, otherwise it will not shown in the element tab.
I don't think you could get all html tags in just 1 try because the website use Javascript to append the html and you can't see it in the element section in console when the element is being removed.
Example:
You can save the page if you want. Just save it with Ctrl+S and you will find the basic source in there along with the stylesheet and other scripts.

Identical HTML not rendering the same

I have a program that let's people design web pages graphically. Then hitting Publish creates an html file that is supposed to be an exact copy of what they created. The elements created by the editor are HTML elements. Publish then gathers up all the elements that have been created and for each one adds it to a string with
canvasOuterHTML += clone$[0].outerHTML;
So all the styles, text, etc., get put on the string. This string, along with some other information is written to the .html version of the page, and when this .html is loaded into a browser the browser displays the page!
But something is expanding the published page vertically. I've created the simple page below to illustrate. The first image is the page in the editor. The second image is what the html displays in the browser.
I'm completely stumped because the HTML and CSS for the two markups is exactly the same, so how can one be higher? I can't even think of a mechanism that would do that. Does anyone have any ideas? Thanks.

uniqueness of ID: single page or entire website?

Case study: I have a website with many archive pages. Every archive page contains a list of news and also a "Load more" link at the bottom of page to load more content by Ajax.
My exact question : Is the uniqueness of ID is bounded to a single page or entire website? Should I write CSS,scripts etc. with the class of "Load more" button or its ID? I know both of ID and Class work programmatically but I am asking about the logical application of ID in software programming. Thanks.
Is the uniqueness of ID is bounded to a single page or entire website?
A single page.
There is nothing wrong with having multiple pages wherein the same ID is assigned to the same element in every page that uses the same template. In fact, there is nothing wrong with taking that same ID and reassigning it to some other element instead in a specific page, or not assigning the ID within that specific page altogether.
Whilst it is true that it is unique to a given page - take care with this, since you may have a common external CSS sheet or javascript page that is inserted and utilised site wide. Therefore if you are not careful you may inadvertently apply styling or functionality to an element that is unintended - simply because it shares an id with another element on another page. Its absolutely fine to have same id's on each page (and it may be that you want to have the same styling or function applied) - but it may not be that for all instances.

How to embed a dynamic generated HTML document into HTML document?

I am writing a testing framework for my web app. The case is to test some AJAX methods. While there are some server side errors, the response of AJAX calling is a HTML document log. However, I would like to display the HTML document in the same testing page while the response received. I am afraid I cannot insert the HTML document into a div since it is not html snippet but a complete HTML document. Is there anyway to deal with the problem without server-side effort?
Besides, I have considered about iframe. However, it seems that it only could display a webpage by specifying the url.
Thanks in advance!
Edit
I tested Aaron's second solution. It surprised me that I could insert a complete HTML document into HTML document and keeps its styles.
You have two options:
Create an iframe and load the HTML document into it
Or locate the body element in the result and just add the content of that element to the div next to your test case.
The first one can cause problems with Cross Site Scripting (which you may or may not apply to your case). The second one means you have to merge the styles of the results into your test HTML document or it won't look as you want.