i have a problem with ionic2 + angular ts + wordpress to create bookmark page.
i dont understand, how to put current url of page, and then i want to assign url to localstorage so i can create bookmark of page.
anyone can help ?
i have searching about this problem about 3 days, but i get nothing.
to get url i try with this code and test on console.
#Component({
selector: 'page-favorites',
templateUrl: 'favorites.html',
})
export class FavoritesPage {
url:string = this.navParams.get('url');
constructor(
public navCtrl: NavController,
public navParams: NavParams,
){
console.log(this.url);
}
the console say undefined
it's hard to give suggestions based on the information you give. What URL are you trying to save to your favourites?
navParams.get() gets the parameters you passed when opening that page.
As an example, let's say you have a "Home" page and a "Favourites" page. When your app loads you see the home page. You can then add a link to the favourites page and pass it a parameter like that:
let data = 'test';
this.navCtrl.push(FavouritesPage, {
data: data
});
You can then get the value of the data parameter on the FavouritesPage like that:
constructor(...) {
this.navParams.get('data'); // This will be 'test'
}
You said that you work with Wordpress. So somewhere you will have a URL like "https://example.com/my/path/" or a unique ID. You need to pass that URL to the favourites page as described above. Or if you are trying to favourite a page in your app, I would instead pass a unique name and then use that name to open the according page (using an if/else).
Just use "window.location".
the navParams is to pass parameters between the views.
Related
I'm struggling with the latest version of SvelteKit, the docs available only works with SSR, and I'm developing SPA app (static page), so, what is the way to pass data from my +layout.svelte to +page.svelte?.
The documentation says that with load function from page.js (I've already set the SSR=false, and I understood that page.js is for SSR), but that doesn't work with SPA, and if I have the load function from the layout it's seems not work.
Aditionaly I want to trigger a function from my +page.svelte that is in the layout page.
Any ideas?
here my try
//+layout.svelte
<script>
export function load() {
return {
data: { title: 'default title' }
};
}
export let data;
</script>
//+page.svelte
<script>
export let data;
console.log(data.title); //undefined
</script>
the docs says that don't use: <script context="module">, and I don't want to use the store becouse I think that sholud be a better way.
Load functions belong in the accompanying files +layout.js/ts, not on the page. They also do not return a property data, everything returned is the data. See the docs.
If SSR is disabled, you can event return a store that could be modified from the page.
To get a store from the data so it can be used with $-syntax, the data property can be destructured on the page:
export let data;
$: ({ title } = data);
You could also create a store and set it as a context in the layout. Pages then can get said context and interact with it. This allows two-way interaction.
Using a store is necessary if the contents require reactivity (i.e. are changed) and the page or layout needs to update.
I am using next router and I want to pass data to another page but I don't want the data to be shown in the URL
I am new to nextjs and I want to navigate between pages using router.push(). I found this solution in the official documentation
Let's say that I have a button once clicked I want ton navigate to another page and pass an object myObject to it.
import { useRouter } from "next/router";
const router = useRouter();
const myObject = {
proprety1: "example1",
proprety2: "example2",
proprety3: "example3"
}
<button>
onClick={()=>{
router.push({
pathname: '/next-page',
query: { data: JSON.stringify(myObject) },
})
}}
</button>
then in the next-page I get this as URL :
http://localhost:3000/next-page?data=%7B"proprety1"%3A"example1"%2C"proprety2"%3A"example2"%2C"proprety3"%3A"example3"%7D
this works fine to be clear, but it is really ugly, not just that, I don't want data to be showen to users.
is there another solution for this? thank you in advance
I believe you can use the second parameter as in the router.push function in order to accomplish what you want.
router.push(url, as, options)
See documentation.
I wanted to change the url of search result,
I found that this is an aikau page ,
The faceted-search page returns multiple results ,
If we click on search result item which is document then it's redirects us to document-details page ,
as shown in image the url /share/page/site/swsdp/document-details?nodeRef=workspace://SpacesStore/5fa74ad3-9b5b-461b-9df5-de407f1f4fe7 i wanted to add one parameter here
like this /share/page/site/swsdp/document-details?nodeRef=workspace://SpacesStore/5fa74ad3-9b5b-461b-9df5-de407f1f4fe7&searchTerm=web is there any way to add this parameter,
please help.
searchTerm=web
I have overrided aikau widget FCTSRCH_SEARCH_RESULT with my custom widget files by
var searchResultWidget = widgetUtils.findObject(model.jsonModel.widgets, "id", "FCTSRCH_SEARCH_RESULT");
if(searchResultWidget) {
searchResultWidget.name = "custom/alfresco/search/AlfSearchResult";
}
So my widget FCTSRCH_SEARCH_RESULT will be like this
{
id: "FCTSRCH_SEARCH_RESULT",
name: "custom/alfresco/search/AlfSearchResult",
config: {
enableContextMenu: false
}
}
and able to call my custom widget js file and changed the url.
I need to pass value from tabs.ts to each page of tabs. So I have something like this:
constructor(public navParams: NavParams) {
...// config
firebase.auth().onAuthStateChanged((user) => {
if (user) {
// If there's a user take him to the home page.
this.user = [];
this.user.push(user);
this.rootPage = HomePage;
} else {
// If there's no user logged in send him to the LoginPage
this.rootPage = LoginPage;
}
});
}
this.tab1Root = HomePage;
this.tab4Root = ProfilePage;
How to pass value (user) to each page of tabs? I tried with few combinations of this code but doesnt work (getting some erros - e.g If I put this.tab1Root... to onAuthStateChanged method, then it gives me: "Maximum call stack size exceeded"). Here are docs: http://ionicframework.com/docs/v2/api/components/tabs/Tab/ - I understand 90% of this but still dont know how I should pass this value...
My second question - is there any better way to take current user and pass him as value to each page? Will be better if I use provider or something?
Third question: it is good to have this code in tabs.ts than in app.ts?
Thanks!
You can use [rootParams] attribute in ion-tab
<ion-tab ... [rootParams]="user"></ion-tab>
In tab file:
constructor(navParams: NavParams) {
console.log("Passed params", navParams.data.user);
}
Second way is using events: http://ionicframework.com/docs/v2/api/util/Events/
It allows you to share data between any of your pages.
Provider is a good option.
It depends. Better way is to make an authorization once - using provider inside app.ts - when app starts.
I'm building an app with Meteor using the react-komposer package. It is very simple: There's a top-level component (App) containing a search form and a list of results. The list gets its entries through the props, provided by the komposer container (AppContainer). It works perfectly well, until I try to implement the search, to narrow down the results displayed in the list.
This is the code I've started with (AppContainer.jsx):
import { Meteor } from 'meteor/meteor';
import { composeWithTracker } from 'react-komposer';
import React, { Component } from 'react';
import Entries from '../api/entries.js';
import App from '../ui/App.jsx';
function composer(props, onData) {
if (Meteor.subscribe('entries').ready()) {
const entries = Entries.find({}).fetch();
onData(null, {entries});
};
};
export default composeWithTracker(composer)(App);
App simply renders out the whole list of entries.
What I'd like to achieve, is to pass query parameters to Entries.find({}).fetch(); with data coming from the App component (captured via a text input e.g.).
In other words: How can I feed a parameter into the AppContainer from the App (child) component, in order to search for specific entries and ultimately re-render the corresponding results?
To further clarify, here is the code for App.jsx:
import React, { Component } from 'react';
export default class App extends Component {
render() {
return (
<div>
<form>
<input type="text" placeholder="Search" />
</form>
<ul>
{this.props.entries.map((entry) => (
<li key={entry._id}>{entry.name}</li>
))}
</ul>
</div>
);
}
}
Thanks in advance!
I was going to write a comment for this to clarify on nupac's answer, but the amount of characters was too restrictive.
The sample code you're looking for is in the search tutorial link provided by nupac. Here is the composer function with the corresponding changes:
function composer(props, onData) {
if (Meteor.subscribe('entries', Session.get("searchValues")).ready()) {
const entries = Entries.find({}).fetch();
onData(null, {entries});
};
};
The solution is the session package. You may need to add it to your packages file and it should be available without having to import it. Otherwise try with import { Session } from 'meteor/session';
You just need to set the session when submitting the search form. Like this for instance:
Session.set("searchValues", {
key: value
});
The subscription will fetch the data automatically every time the specific session value changes.
Finally, you'll be able to access the values in the publish method on the server side:
Meteor.publish('entries', (query) => {
if (query) {
return Entries.find(query);
} else {
return Entries.find();
}
});
Hope this helps. If that's not the case, just let me know.
There are 2 approaches that you can take.
The Subscription way,
The Meteor.call way,
The Subscription way
It involves you setting a property that you fetch from the url. So you setup your routes to send a query property to you Component.Your component uses that property as a param to send to your publication and only subscribe to stuff that fits the search criteria. Then you put your query in your fetch statement and render the result.
The Meteor.call way
Forget subscription and do it the old way. Send your query to an endpoint, in this case a Meteor method, and render the results. I prefer this method for one reason, $text. Minimongo does not support $text so you cannot use $text to search for stuff on the client. Instead you can set up your server's mongo with text indexes and meteor method to handle the search and render the results.
See what suits your priorities. The meteor.call way requires you to do a bit more work to make a "Search result" shareable through url but you get richer search results. The subscription way is easier to implement.
Here is a link to a search tutorial for meteor and read about $text if you are interested