This is a migrated thread and some comments may be shown as answers.

onShow to pass query strings from one view to another

1 Answer 194 Views
HTML5, CSS, JavaScript
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Shalene
Top achievements
Rank 1
Shalene asked on 11 Feb 2015, 04:15 AM
I am creating an app using the Kendo UI tabstrip (Javascript) in Appbuilder.

I am wanting to pass a value in a query string from one view to a second view and then display a certain div depending on the value in the query string.

I have managed to do this successfully with javascript, however it only works on the first time going to the second view.
I have used the data-reload="true" on the second page to get it to work every time, however this is not ideal and causes flickering and jumping when loading the second view.

On searching, I came across the advice to use onShow to reload the data but not the view.

I came across this useful piece of info -

View parameters can be passed on the query string.
Sometimes you need to pass parameters to your view. You can do this
just like any other web site by including a query string to your
navigation. For example:
1<a href="#my-view?one=1&two=2">...</a>
These parameter values will now be available on your view once you have navigated there on a property named params.

function onShow(e) {   
 console.log(e.view.params);
}
Here, e.view.params will be an object representing the data that was passed to the view:
{   
 one: 1,   
 two: 2
}

Then I came across this post in the forums -

http://www.telerik.com/forums/navigating-to-views-with-params-doesn%27t-work-in-kendo-ui-mobile-build-v2012-3-1114

And following the info in that post, have this in the second view

<div data-role="view" data-show="onShow"

And in the body of the view have

<script>
    
    function onShow(e) {
        var view = e.view;
        var stitch2 = view.params.stitchhowto;
        alert("Parameter stitch2 = " + stitch2);
    }

 
   
        $(document).ready(function () {

            $('[id^="related"]')
            .not($('#related_' + stitch2 + '_content'))
            .hide();
            $('#related_' + stitch2 + '_content').show()

        });
    
    </script>

The link to this second view is

<a href="#views/howto.html?stitchhowto=schowto">

The javascript above shows the alert message

'Parameter stitch2 = schowto'

so I have the value that I'm after.

Then when it goes to the second view, I get this error -

Uncaught ReferenceError: stitch2 is not defined at index.html#howto.html?stitchhowto=schowto (line: 14)

It goes to the second view ok, but doesn't display the div as required.

It seems the key name 'stitch2' now has lost the 'schowto' value, so no div displays.

Any ideas as to how keep the value needed when going to the next view.

1 Answer, 1 is accepted

Sort by
0
Shalene
Top achievements
Rank 1
answered on 13 Feb 2015, 08:16 AM
I figured it out.

I had a mistake in the javascript.

<script>

    function onShow(e) {
        var view = e.view;
        var stitch2 = view.params.stitchhowto;
        alert("Parameter stitch2 = " + stitch2);

        $(document).ready(function () {

            $('[id^="related"]')
            .not($('#related_' + stitch2 + '_content'))
            .hide();
            $('#related_' + stitch2 + '_content').show()

        });

    }

</script>

Two days of this floating around in my head and this came to me.

Working brilliantly now :)
Tags
HTML5, CSS, JavaScript
Asked by
Shalene
Top achievements
Rank 1
Answers by
Shalene
Top achievements
Rank 1
Share this question
or