Building a site which shows users profiles. When changing from one profile to another, the profile description is getting stuck with the previous users profile data.
For example
Visit users profile 1
Users profile description reads User profile 1 description
Visit users profile 2
Users profile description reads User profile 1 description User profile 2 description
My code is all being run in the render function of my component so should be rerendering when state updates.
render(){
return(
<h4>Profile 1<h4>
<p dangerouslySetInnerHTML={{__html: this.props.profile.description}} />
)
}
Turns out this.props.profile.description was HTML wrapped in <p> tags. This was causing p tags to be nested within p tags which causes issues as described in this post - Nesting <p> won't work while nesting <div> will?
Rule of thumb is never use dangerouslySetInnerHTML on a <p> tag.
Took me a long time to get to the root cause of this and thought it was worth passing it on.
Related
I have a component menu which contains a few anchor tags. Each tag brings the user to that respective page section. I am trying to share the same anchor tag among the other components.
For example, I have two more HTML components called homepage.component.html and details.component.html. For each I call the menu.component.html by its selector. Both homepage and details html components have an id for the section I wanna scroll to. Here's how it looks like:
menu.component.html
Go to content
for both homepage.component.html and details.component.html
<div class="home-content" id="content"> Here comes more code </div>
It should work just like in a non-dynamic html project, however, when the anchor tag is clicked, the url redirects to '' (which is the first/default page) and then it shows the content for the first page, instead of the current componenet I am on.
I have tried creating a function where I get the current url and using the router.navigate, I pass the parameters indicating the fragment:
menu.component.ts
currentRoute: string
scrollToItem(){
this.currentRoute = this.router.url
this.router.navigate([this.currentRoute], {fragment: 'content'})
}
menu.component.html
<a (click)="scrollToItem()">Go to content</a>
However, this function adds the id #content to the url each time the anchor tag is clicked, redirecting the user to my 404 page.
I wanted to know if there is a way to use an anchor tag on the menu.componenet.html, while all the items that have "content" as their ids in different components are going to be displayed. Hopefully I made my question clear. If there is still questions about how the error occurs I can create and shate a stackblitz project. Thanks in advance :)
I have a mermaid websequence diagram snippet in jekyll blog
```mermaid
sequenceDiagram
actor User
participant ABC
User->>ABC: Hello <-- i want this to be a hyperlink to a section on the same page
i tried this, but doesn't work
```mermaid
sequenceDiagram
actor User
participant ABC
User->>ABC: <a href=#somelink>Hello</a>
it shows the entire text as is, without converting the text Hello to a link.
There is an open issue on GitHub for this. So this feature seems not available for now. https://github.com/mermaid-js/mermaid/issues/1279
I have a page called feed.html containing the following:
<html><body>
<div id="Post01"><p>From: User1<br>
Posting: Hello!<br>
Comments
</p></div>
<div id="Post02"><p>From: User1<br>
Posting: Have a great day!<br>
Comments
</p></div>
<div id="Post03"><p>From: User2<br>
Posting: Don't worry, be happy!<br>
Comments
</p></div>
</body></html>
I have another page called commentsfeed.html:
<html><body>
<div id="Comment01"><p>From: User2<br>
#Post01: Hi, how are you?<br>
</p></div>
<div id="Comment02"><p>From: User1<br>
#Post01: Spectacular!<br>
</p></div>
<div id="Comment03"><p>From: User2<br>
#Post02: You too!<br>
</p></div>
</body></html>
I have a third page called 'listcomments.html.' When someone clicks 'Comments' on a post in feed.html I want the div id passed to the listcomments.html page, I then want the listcomments.html page to embed the entry with the matching div id from feed.html and all the comments containing the matching div id in the commentsfeed.html file.
Here is what I have so far for the listcomments.html file:
<html><body>
<---receive PostID through URL---->
<p>Posting:
<br> <----embed post from feed.html that matches PostID---->
</p>
<p>Comments:
<br> <-----embed comments from commentsfeed.html containing the matching PostID---->
<p>
</body></html>
I've googled around and looked at a bunch of different methods but can't seem to find something to do exactly what I'm trying to do. Willing to employ javascript or php if needed. Whatever the simplest way to do it is.
Any help anyone can provide to get this working is much appreciated. If there's anything that I've described that is unclear let me know. Thank you.
Here would be an example of working output from listcomments.html?Post01:
Posting:
From: User1
Posting: Hello!
Comments:
From: User2
Hi, how are you!
From: User1
Spectacular!
Using jQuery is probably the easiest solution here. It allows you to fetch data into a div just with a single line of code.
Assuming that you have a page at http://www.yoursite.com/123456
You can get the ID of the page with this code (taken from here)
var url = window.location.pathname;
var id = url.substring(url.lastIndexOf('/') + 1);
Then you can use it to fetch data into any div in your page.
For example, if you have a div for the post feed like this:
You can use this jquery code to load certain content from a source. You can pass the id from the code above into the load method
$("#postdiv").load("http://www.anydomain.com/post?id=" + id);
Let me assume that I have the following architecture
_components (folders)
x1.html
x2.html
x3.html
I have a first page where I got the information from the YAM section for every component.
At this point I would like to add a link for every component to another page where I will display the component in a bigger manner.
So, let me assume I have, in the first page :
<div class="col-md-1">
<span id= "logos" class="material-icons"></span>
</div>
and In the componentbig.html I would like to open the right component on the basis of the link.
Do you have any suggestions for me ?
If I understand You correctly, then collections might be the feature You are looking for. For example, I'm usually using collections to generate a list of products and then have a specific page for each product also. Also make sure You check the easy tutorial by Ben Balter.
I am using ExpressionEngine 2.2.1 and am trying to create a conditional that will cause a page to show a specific navigation template based on the page's category. For example, I am creating a public profile for someone who is a part of a competition in London. When someone visits his profile, I would like the page to show, not only his profile, but also a banner with an image of London & navigation that is specific to the London competition. I would like to do this by adding a conditional with categories since we have so many competitors in many different cities. I have created a category titled "London Competitors English" and it has the ID of "56". Once I have created the competitor's profile within EE, I select the category, "London Competitors English," however, when I go to the page, the default navigation template is loading rather than the London template. I created code based on my research and most related example here: http://expressionengine.com/forums/viewthread/185555/. What do I have wrong in my code?:
FILE ONE: (condensed portion of) competitor_profiles_en/index.html where "competitor_profiles_en" is the template:
{exp:channel:entries limit="1" url_title={segment_2} }
{embed="includes/header"}
<div class="xx">
<h2>{competitor_first_name}<br>{competitor_last_name}</h2>
...
</div>
{/exp:channel:entries}
FILE TWO: (condensed portion of) my header.html file :
{if segment_1 == 'home'}
{embed="includes/_nav_landing"}
{if:elseif "{categories}{category_id}{/categories}" == "56"}
{embed="includes/_nav_city_lon_en"}
{if:else}
{embed="includes/_nav_internal"}
{/if}
The problem is that embeds are processed after all other tags, in a completely separate process. So when your includes/header embed runs, it has no categories to speak of, because it's not actually running within a Channel Entries tag.
Unless you need to pass variables to includes/header (which you don't appear to be doing here, but you may have removed that for simplicity), I'd move your includes/header to a snippet instead, so it will be processed inline with your Channel Entries tag.
Derek's answer was spot on, and I would like to elaborate on my method of putting his suggestion into action.
I found information about snippets here http://expressionengine.com/user_guide/templates/globals/snippets.html and watched this tutorial here http://www.youtube.com/watch?v=AEEudo0BrRA&feature=related. I then created a snippet within the control panel (Design > Templates > Snippets) that included all of the code that was in the header file and titled it snippet_header_en. Because ExpressionEngine includes snippets as a part of the template that they are in, EE recognized my conditional including the categories that I created. Here is the revised code:
FILE ONE: (condensed portion of) competitor_profiles_en/index.html where "competitor_profiles_en" is the template:
{exp:channel:entries limit="1" url_title={segment_2} }
{snippet_header_en}
<div class="xx">
<h2>{competitor_first_name}<br>{competitor_last_name}</h2>
...
</div>
{/exp:channel:entries}
FILE TWO: (condensed portion of) my header.html file :
As previously mentioned, I moved this code to the snippet section of the EE control panel.