[SOLVED] Pass param from an href of a list view

Questions
1

Hi, I have a problem with passing params from a list view. I read others questions inside the forum, but i can’t resolve the issue. I 'm creating a list view dynamically. What I’m trying to do is to pass the name text of the ‘a’ element because I need that name for the next page where the user is directed after clicked on the element list.

I’m trying to do its in this way:

This is the col where I append dynamically the list view inside main.html

   <div class="col-100 tablet-auto desktop-auto">
        <div class="list links-list searchbar-found" id="listCompany">

        </div><!--list-->
   </div><!--col-->

this is the method that generates dynamically the list inside company.js

const createListCompany = (nameCompany) =>{

   var li = document.createElement("div");
   var a = document.createElement("a");
   a.href = 'view/?name=' + nameCompany; //here I try to pass the name
   a.text = nameCompany;
   a.className ='item-title';

  li.appendChild(a);

  document.querySelector('#listCompany') 
      .appendChild(li)
      .appendChild(a);

}

this is the myapp.js
the url: /pages/company/main.html is the view where I generate the list dynamically. The other is the page where I redirect the user after selected an element list.

 {
		name: 'company',
		path: '/company/',
		url: './pages/company/main.html',
 },

 {
	        name: 'company-view',
		path: 'view/:name',            //I add this to retrieve the value
		url: './pages/company/view.html',
		on: {
			pageInit: function(e,page){ 

						var p = app.page.route.params();
										
					}
									
			},
},

Thank you in advance

2

With this you send query, not params:

To make it as param:

a.href = 'view/' + nameCompany; //here I try to pass the name

And to get it in pageInit:

console.log(app.page.route.params.name)
3

thank you for your help Vladimir, but with this change, nothing happens.
If i leave:

 {
        name: 'company-view',
	path: 'view/:name',       
            url: './pages/company/view.html',
	on: {
		pageInit: function(){ 

					console.log(app.page.route.params.name);										
				}
								
		},

},

it wrote me : Uncaught TypeError: Cannot read property ‘route’ of undefined

4

Thank you @nolimits4web I solved in this way

				url: './pages/company/view.html?name={{name}}',
				on: {
						pageInit: function(e,page){ 
						
						var name = page.route.params;
						console.log(name);
							
								}
									
					},

But can I ask you…… instead only one value can i pass an array? because if I pass an array the console write {name: “[object Object]”}

5

go to http://framework7.io/kitchen-sink/core/
open console and copy/paste this:

app.views.current.routes.unshift({
  path:'/some-page/:title/',
  component:{
    template:`
      <div class="page">
        <div class="navbar">
          <div class="navbar-inner">
            <div class="title">{{$route.params.title}}
              <div class="subtitle">{{$route.query.subtitle}}</div>
            </div>
          </div>
        </div>
        <div class="page-content">
          <div class="list simple-list">
            <ul>{{#list}}<li>{{this}}</li>{{/list}}</ul>
          </div>
        </div>
      </div>
    `,
    on:{
      pageInit:function(e,page){
        this.$setState({list:JSON.parse(this.$route.query.arr)});
      }
    }
  }
});

app.views.current.router.navigate(
  '/some-page/Names/?subtitle=List&arr=["John","Vlad","Timo"]'
);
2 Likes
6

Sorry, but I’m still to not understand in my context… because I’m don’t using template context

7 
app.views.current.routes.unshift({
  path:'/some-page/',
  content:'<div class="page"></div>',
  on:{
    pageInit:function(e,page){
      console.log(JSON.parse(page.route.query.arr));
    }
  }
});
app.views.current.router.navigate('/some-page/?arr=["John","Vlad","Timo"]');
2 Likes
8

ah ok, now I understood, it works! thank you very much! :smiley:and thank you for your patience! thank you :slight_smile: