I'm implementing a project with Next.js and I've been trying to find out the best way I could achieve the following.
I have a page /home that calls an API with getServerSideProps and receives information that is printed to the page in multiple of this components:
function PlaylistItem({playlistName,id,description,background} : { playlistName : string, id : string, description : string, background : string}) {
return (
<a className='flex-col justify-center flex text-center items-center cursor-pointer mb-6' href='/difficulty'>
<div className=' w-[100px] h-[100px] rounded-full' style={{backgroundImage: `url(${background})`,backgroundPosition:"center",backgroundSize:"cover"}}></div>
<p className='mt-2'>{playlistName}</p>
</a>
)
}
export default PlaylistItem
Depending on which of those components the user clicks, I want to pass the props (id, playlistName, etc) to the next page stated in the anchor tag.
I saw that I could achieve that with dynamic routes and passing the values as queries, but is it really the best way I could to this?
The ideal way to accomplish this is by using dynamic routes, also utilise cookies to save and get into the next page if you don't require share url capability for next page.
dynamic routes the only one way to achieve this
Related
I'm currently developing a small Ionic 4 project for college that uses Google Firebase to save and store data, which will be used by the nursing course / class to make things easier for them when it comes to saving patients' data and test details.
In the page that shows all registered patients, I have an ion-searchbar which will be used to filter the patients by name and a ng-container with a *ngFor that pulls all registered patients from the database and puts them into ion-cards.
<ion-searchbar placeholder="Search..." expand="full" color="abwb" [(ngModel)]="searchQuery" (ionChange)="search()"></ion-searchbar>
<ng-container *ngFor="let patient of dBase">
<ion-card color="abwb">
<ion-card-header style="font-weight: bold">{{patient.name}}</ion-card-header>
<ion-card-content>
<ion-button [routerLink]="['/pat-prf', patient.id]" color="bwab">PROFILE<ion-icon name="person" slot="start"></ion-icon></ion-button>
<ion-button [routerLink]="['/pat-tst', patient.id]" color="bwab">TESTS<ion-icon name="list-box" slot="start"></ion-icon></ion-button>
</ion-card-content>
</ion-card>
</ng-container>
I managed to get the value from what's being typed into the search field to be displayed via a console.log() action, but I have no idea on how to make it actually go and search the database for the specified names OR to make the ng-container only show the cards with names that match.
I've been told I had to use a *ngIf to do such a thing, but I honestly got no idea how to use it properly for this kind of thing. Can anyone point me in the right direction?
You have two solutions, a Frontend solution and a Backend solution.
The Frontend solution
The frontend is to filter out the list that you have from the server. This is can use the Array.prototype.filter(). In order to make this work, the backend should return all the patients without pagination (Which can work for small list, but not preferred for big one).
// allPatients will contain all the results from the server and dBase will be filtered
private allPatients = [];
ngOnInit() {
this.httpClient.get(MY_API_TO_GET_PATIENTS)
.subscribe(response => this.allPatients = this.dBase = response )
}
search() {
this.dBase = allPatients.filter(item => item.name.includes(this.searchQuery));
}
The Backend solution
In this solution, we will send a request to the Backend that contains the search query. Then, the Backend will respond with the results that met the search query. Here we will need only to send a new request to the server each time the user enters a new value.
search() {
this.httpClient.get(MY_URL, {params: {searchQuery: this.searchQuery})
.subscribe(response => this.dBase = response )
}
Total noob here so please bear with me:
I am trying to setup dynamic FB remarketing on a client ecommerce site.The problem is that the site doesn't have a data layer setup for this process so I'm trying to scrape some ecommerce values from the DOM (specifically the product name).
Essentially I am trying to capture the product name from this code string from the order confirmation page:
<h3> <p> **Icebreaker® Pocket Hat - Black/Cargo** </p> </h3>
The "Icebreaker® Pocket Hat - Black Cargo" is what I'm trying to feed into a custom FB pixel as a DOM variable in GTM. I've been experimenting all sorts of things but nothing has really worked so far. I've already captured order value this way so I'm fairly confident this is at least possible.
On the same order confirmation page, there is also this bit of JavaScript with the product name in it should that be of use as well:
<script type="text/javascript"> var gbTracker = new GbTracker('cabelasca', 'Production'); gbTracker.autoSetVisitor(); var visitorId = gbTracker.getVisitorId(); var sessionId = gbTracker.getSessionId(); gbTracker.sendOrderEvent({ cart: { items: [ { productId: '79530', title: '**Icebreaker® Pocket Hat - Black/Cargo**', price: 24.97, quantity: 1 }, ] } }); </script>
I am hoping someone knows how to pass this value using some kind of custom GTM variable. Any nudge towards an answer would be greatly appreciated. Thanks guys.
What I would normally do if I need to get some data from DOM is:
Create DOM element variable
This variable will find all necessary data from DOM. For example in your case variable should be like that:
CSS selector: h3 > p > a
Use this variable in your tags
Then in your tags just use this variable like that: {{Product Title}}
My questions is - how do I add a class or id to the body tag using a text field within Orchard?
So if I enter the word "product" in the text field then the result should be <body class="product">. I want to use this method instead of creating alternate layout templates as every page has the same layout but I need a different class for each page to reference a different colour scheme I have setup for each page in my CSS.
I have added a text field with the name Area to the Title ContentType in the backend. My problem is now how to get the value of the field to be put into the body in the Document.cshtml.
I have read Setting Unique Body Classes and IDs in Orchard and Using Alternatives for Document.cshtml in Orchard CMS but I still can't get it to work! The second one seems like what I want to do but so far I have been unable to acheive it.
Any answer would be very appreciated?
Thanks
Andy
I am so frustrated that there is no readily available solution found in the net about this. Since I am more comfortable coding in jquery & js...
Here's my solution: Assuming you have jquery loaded...
#using(Script.Foot()) {
<script type ="text/javascript">
//<![CDATA[
$(document).ready(function () {
var url = window.location.pathname;
var count = url.match(new RegExp("/", 'g'));
var urlsplit = url.split("/");
var page_class = urlsplit[count.length];
alert(page_class);
$('body').addClass(page_class);
});
//]]>
</script>
}
The easiest way to achieve this is to use the Classy feature from Vandelay.Industries.
I have a simple search form I want to reuse across multiple pages in my codeigniter application. For example, right now I have a search form in the sidebar and I'm planning on displaying that sidebar on the index, about, and other pages.
I want to have the form validation display errors on the same page the users submits the form from.
For example:
User is on About page.
User submits form with invalid data
User sees error in the sidebar on the About page
and
User is on Index page.
User submits form with invalid data
User sees error in the sidebar on the Index page
But I'd like to reuse that form validation logic. I just want it to display the error on whichever page the user posted from.
Any ideas how to do that? Sorry for the noob question, I'm pretty new to CI.
Here you have to think globally.
Step.1 : Make one view file : display.php
which contains :
<div id = "main">
<div id = "header">
[load header file here]
</div>
<?php
if(validation_errors() != '') {
?>
<div id = "error">
<?=validation_errors()?>
</div>
<?php
}
?>
<div id = "content">
<?=$page?>
</div>
<div id = "footer">
[load footer file here]
</div>
</div>
Step.2 : About us Page.(controlller)
.... Your data ....
at end of controller function
$data['page'] = 'aboutus';
$this->load->view('display',$data);
With regards to your comment on the above question you could use Flash data
With the assumption that you have the session library loaded, here is a helper function.
function last_page($page = null){
$ci = get_instance();
if($page === null)
return $ci->session->flashdata('last_page');
$ci->session->set_flashdata('last_page', $page);
}
then you can call last_page('about'); at the top of the about page, and then when you want to find out what the last page you were on was you can just call last_page(); with no params.
In the User Guide, there's different ways to configure sets/groups of rules. Then you can simply have something like:
if ($this->form_validation->run('signup') == FALSE)
{
$this->load->view('myform');
}
else
{
$this->load->view('formsuccess');
}
Which will run your "signup" group of validations. To me, this is the cleanest way to achieve reusable validation rules.
This is a perfectly valid question.
I'm not a PHP expert, nor a CI expert, but the fact is sometimes you want to post to a controller that didn't create the view from which you're posting. Which means posting back to itself is not going to work.
I came across this post on the Ellislab forum:
http://ellislab.com/forums/viewthread/217176/
On this page, There are 2 methods of going about it. Both of which use flashdata and both of which are totally valid, IMHO.
The first: create a helper function
http://ellislab.com/forums/viewreply/1003010/
The second: extend the CI_Form_Validation Class.
http://ellislab.com/forums/viewreply/1047536/
The second is the way I went as it seems cleanest although some may argue whether the form validation class should know anything about flash data.
I want to apply a class-name like "current" to an actionlink (in the master view) when it points to the current URL, in order to indicate an "on-state" in the UI. How might I do this?
UPDATE: I understand how to apply an attribute, I just need to know how to get the actionlink to know that it is pointing to the current page.
I suspect MVC's ViewContext.RouteData.Values["action"] would be useful for this. The RouteData has a range of key/value pairs (such as the Action mentioned here) that allow you to retrieve information about the current page and "view state" (for want of a better description) you're currently working with.
if it is only for visible use, I would use javascript with jQuery to quickly add a class for the 'current' link
$(document).ready(function() {
$('a.mylinks').each(function(i) {
if ($(this).attr('href') == document.URL) {
$(this).addClass('current');
}
});
});
<ul>
<li>link to current page</li>
<li>link to other page</li>
<li>link to another page</li>
</ul>