Sending data to other page onclick event list view F7 [V.2]

Questions
1

Hi,

I want to sending data to other page template when I click list view, any suggestions?

2

Use localstorage to pass the values from one page to another.

To set value in First page:
app.ls.setItem('name', 'test');

To get value in Second page:
app.ls.getItem('name')

3

Hi

You can use GET params to send values an other page, look this

For value capture from element, use this.

<div class="fireEvent" data-name="Mi name" data-id="1"></div>

Now create event

$$(document).on("click", ".fireEvent", function(){
        var name  = $$(this).attr("data-name");
        var id = $$(this).attr("data-id");
        app.router.navigate("URL?name=" + name + "&id=" + id);

});

Ok, so look this post.

http://forum.framework7.io/t/capture-url-values-in-on-template-navigation/1545/2

Regards

Tell me if your question is solved

4

Hm, what about using global context to keep and retrieve data between pages, views, etc

5

Hi @rajkaruna,

can you give me one sample onclick event using localstorage

6

Hi @Yudistira

Please try this

HTML :
<button @click="formSubmit('rajkaruna')">Submit</button>

Script:

<script>
      return {
    		methods: {
    		  formSubmit: function (name) {
    			/*name variable contains rajkaruna*/
    			app.ls.setItem('UserName', name);
    		  }
    		}
    	}
</script>

Then you can get this name any page or view using below script
app.ls.getItem('UserName');

Thats it :sunglasses:

1 Like
7

Hi @rajkaruna,

I try your method and put the function on success event, like code below, but the result from console log is undefined

methods: {
      GetListVenue: function (id) {
        var app = this.$app;

        app.ls.setItem('id', id);

        console.log(app.ls.setItem('id', id));
      }
    }

output from ajax success

$.each(data, function (index, value) {
            output += '<li>'+
              '<a href="new-vendor-venue-detail/" class="item-link item-content" @click="GetListVenue('+value.VenueId+')">'+ 
                '<div class="item-inner">'+
                    '<div class="item-title-row">'+
                      '<div class="item-title">'+value.VenueActivity+'</div>'+
                      '<div class="item-after" id="'+value.VenueId+'"></div>'+
                    '</div>'+
                  '<div class="item-subtitle">'+value.VenueName+'</div>'+
                  '<div class="item-text">'+value.VenueDescription+'</div>'+
                '</div>'+
              '</a>'+
             '</li>';
          });
8

Hi @Yudistira

You should use console.log(app.ls.getItem('id')) to retrieve value

1 Like
9

hi @rajkaruna,

It works great, thank you :+1::+1::+1:, but I’m changing to normal click event

$$('#ListVenue').on('click','li', function(e){
    var id = $$(this).attr('value');

    app.ls.setItem('id', id);
  });

if using your methods it’s always give the same value, anyway your methods is what I need :grin::grin::grin:

thank’s again

10

This solution does not work in F7 v 3.3.0, it throws an error.

Uncaught TypeError: Cannot read property 'setItem' of undefined