onShow to pass query strings from one view to another

2 posts, 0 answers
  1. Shalene
    Shalene avatar
    3 posts
    Member since:
    Jan 2015

    Posted 10 Feb 2015 Link to this post

    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.
  2. Shalene
    Shalene avatar
    3 posts
    Member since:
    Jan 2015

    Posted 13 Feb 2015 in reply to Shalene Link to this post

    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 :)
Back to Top