I have two sections of html in my main (app.component.html) view - one for navigation bar of buttons which navigates to child pages and the other section is to display a table of records. When select a record of the table I expect the details page of the record should display in the router-outlet but the table should be disappeared. But the details page is displaying down the table while I expect the table of records should disappear when the app is routed to a child page (details page). Any help how to achieve this would be appreciated.
here is my code:
<div class="navbar bg-inverse">
<div class="container">
Home
<a routerLink="/general" routerLinkActive="active" class="navbar-brand">General</a>
<a routerLink="/financial" routerLinkActive="active" class="navbar-brand">Financial</a>
<a routerLink="/termsheet" routerLinkActive="active" class="navbar-brand">Term Sheet</a>
<a routerLink="/capitalization" routerLinkActive="active" class="navbar-brand">Capitalization</a>
</div>
</div>
<!--I don't want below section of the main displaying when routed to child page
<h1>table of records here</h1>
<router-outlet></router-outlet>
Thanks
yesp.
Your idea of putting the table section in a separate component looks working, but the pagination logic which is moved from app.component.ts to dashboard.ts was broke and a click on next page (goes to next page but immediately within a second it's coming back to page 1 agian) is not working now. Anyway i will look into the pagination issue and get back to the board in case the issue persists. Thanks for your help!
Thanks
yesp
Related
I am having some issues in next.js when clicking on a navigation buttons and redirecting to a new page.
I have navigation with links like this one below:
<button key={index}>
<a
href={url}
>
{text}
</a>
</button>
For example, route where element points is /about. When I click on a button, "about" page will flash for a second or less and after that redirect to that page will happen. I cannot figure why is that happening
Thanks in advance!
you should use the built-in component of nextjs to navigate on the client side see: next/link
<Link href="/about">about<Link>
I need to generate events each time a user clicks on any of the slides of the banner of the home page of this site:
https://www.lacuracao.pe/
I've asked a developer to put ids to each slide, in order to make it easier to track each banner separatly as an event when its clicked.
My click trigger is set to fire on slide with id="banner-home-01", but the tag won't fire. This is the last slide, not the first one as one would expect.
Could it be that it's inside another divs? (even using the id attribute to target it's clicks?)
My clicks listeners and linkclick listeners are working:
My trigger:
My tag:
HTML:
<div width="100%" class="banner-slider-18 body-banner-01" id="banner-home-01">
<a href="/curacao/celulares-lc"><div width="100%" class="fondo">
<!--<div>
<div class="linkeo">
<a href="/curacao/tv-samsung-ultra-hd-smart-55-un-55nu7090g-un-55nu7090g-p">
<button>compra</button>
</a>
</div>
<div class="linkeo">
<a href="/curacao/tv-samsung-ultra-hd-smart-55-un-55nu7090g-un-55nu7090g-p">
<button>compra</button>
</a>
</div>
</div>-->
</div></a>
</div>
UPDATE 1:
The tag appears in the Debugger Summary as not fired, and when clicked it shows:
This is an image of the details, but It doesn't show why it didn't fire:
if you look in the debugger at the event gtm.linkClick and look at the variables you can see that the variable is an emtpy string, thats why your tag isn't firing. Your developer needs to add an id to the link itself, so the Click ID will be filled (see screenshot with the id test). After that the Click ID field will be filled with the id.
Another tip for you if you want to see why a tag isn't firing you have to select the event you want to inspect on the left side, for example a click and then click on the tag that wasn't firing. If you scroll down to Firing Triggers, you see what condition hasn't been fulfilled.
This seems to be a very simple concept, but I am unable to resolve. What I'm trying to do is, render/display a Standard value of a template, to the page.
Created the items & templates using Rocks. Here is the structure.
1. Sublayout - footer.ascx
<div class="content">
<h1>This is a title.</h1>
<p>All the content goes here</p>
<sc:placeholder runat="server" Key="footercontent" />
</div>
2. Sublayout - StickyNav.ascx
<a class="btn" href="#">
<sc:Text Field="Sticky Nav Title" runat="server" />
</a>
3. Template - Sticky Nav
The first pic is of the template & the second one shows the assigned default value in _Standard Values.
Then, in Sitecore Explorer,
right clicked on (Sticky Nav - _Standard Values) > Tasks > Design Layout on Standard Values.
Now, there is a content item "index" under /sitecore/content/. It has these layouts declared:
When I right click on Index > Tools > Browse > Preview, the index page does open and the footer content is also displayed.
But, I am unable to see the text 'Go To Top', that was set as a Standard value (Image 2). It is empty.
What am i missing here.
There could be a few factors blocking the content being showed. For the front end the best bet is to rule out things like publishing - i.e. make sure that the template, fields, standard values, and the content items are all published correctly. If you are in preview this is probably of less relevance but worth noting when you deploy
When the sc:Text control renders is will be running the renderField pipeline. At the point that interacts it will be talking to Sitecore via the api.
To check things via the code behind for your control (assuming it's an ascx due to the runat="server" tag). Check:
Field field = Sitecore.Context.Item.Fields["Sticky Nav Title"];
if (field != null)
{
string value = field.Value;
}
And debug through to check the field actually has the value you require.
In the cms, when you view the page of interest does the 'Sticky Nav Title' field appear to have a value, and be the value you are interested in?
I realized the initial thought itself was a mistake. There HAS to be an item if it's value has to be displayed on page.
So, I created a new item under /sitecore/content/Sticky Nav Button using the template Sticky Nav.
And in StickyNav.ascx, updated the control as:
<sc:Text Field="Sticky Nav Title" runat="server" DataSource = "/sitecore/content/Sticky Nav Button"/>
Hope this helps beginners like me.
My page has a list of links, with some associated information.
eg. Something along the lines of
<div class="listOfThings">
<div class="Thing"> <a link here/> <specific thing A info here/> </div>
<div class="Thing"> <a link here/> <specific thing B info here/> </div>
<div class="Thing"> <a link here/> <specific thing C info here/> </div>
</div>
In DTM, I want to be able to track a click on to any of those inner "Thing" divs, extract which thing was clicked, and pass that info to Google Analytics. I can get the click selector working fine, but I want to know how to extract the additional information on the click.
This would be done inside of an Event Based rule. See image: http://imgur.com/BQv0HdC
Event Type: Click
In the element tag or selector: div.things a
This is saying I want to track all click on any anchor tag inside a div with the class name of "things"
Then once you have done that you can reference the "this" scope. You have use %% as a notation within the form fields for the GA code. so %this.text% would pull in the text of the specific link selected: %this.innnerHTML%, %this.href% etc...
Does the view <--> URL matching pairs, effectively mean that the router has to control the entire page and cannot be used for controlling a subset of the page? I have a situation where Ember is used for a portion of a page where the outermost container view is manually added to a DOM element. A workaround would be to convert the entire page to Ember but perhaps there are other ways? Thanks for any pointers!
You can specify outlets to insert a dynamic portion of a page. An outlet renders the current view. In that view there can be another outlet to display the subview.
See this example:
application template
<div id="content">
<nav> .. menu part .. </nav>
{{outlet}}
</div>
This renders the dynamic part of your app. When you browse to for instance /pages you can display a list of pages in it. When you go to '/pages/1' there is an {{outlet}} in the pages-template which renders the page-template.
pages template
<ul>
{{#each page in controller}}
<li>{{#linkTo page}}{{page.name}}{{/linkTo}}</li>
{{/each}}
</ul>
{{outlet}}
page template
<h2>{{name}}</h2>
The page-name header is now rendered below the pages-list.
This way you can add as much dynamic content as you want.