Перенаправление на другую страницу после выбора переключателя с помощью framework7 - PullRequest
Новая
       10

Перенаправление на другую страницу после выбора переключателя с помощью framework7

0 голосов
/ 31 октября 2018

Я не могу перенаправить со страницы X на страницу Y в соответствии с выбором пользователя после выбора радиокнопки. Консоль напиши мне: 

Uncaught ReferenceError:  onClickGo is not defined

Я объявил страницы в my-app.json 

routes: [
{
    name: 'home',
    path: '/home/',
    url: './pages/home/home.html'
},
{
    name: 'travel',
    path: '/travel/',
    url: './pages/travel/travel.html',
    routes: [

        {
            name: 'travel-ny',
            path: ' ny/',
            url: './pages/travel/ny.html',
        },
        {
            name: 'travel-la',
            path: ' la/',
            url: './pages/travel/la.html',
        },

        {
            name: 'travel-milan',
            path: ' milan/',
            url: './pages/travel/milan.html',
        },

    ]
}

Выбор пользователя принимается в travel.html 

<div data-name="travel" class="page">

<div class="page-content pg-no-padding">

<div class="row">
    <div class="col-100 tablet-100 desktop-100">            
    <form class="list" id="travel-form">
            <ul>
                <li>
                    <label class="item-radio item-content">
                        <input type="radio" name="travel" value="ny" checked="checked"/>
                        <i class="icon icon-radio"></i>
                        <div class="item-inner">
                            <div class="item-title">New York</div>
                        </div>
                    </label>                            
                </li>

                <li>
                    <label class="item-radio item-content">
                        <input type="radio" name="travel" value="la"/>
                        <i class="icon icon-radio"></i>
                        <div class="item-inner">
                            <div class="item-title">Los Angeles</div>
                        </div>
                    </label>                            
                </li>

                <li>
                    <label class="item-radio item-content">
                        <input type="radio" name="travel" value="milan" />
                        <i class="icon icon-radio"></i>
                        <div class="item-inner">
                            <div class="item-title">Milan</div>
                        </div>
                    </label>                            
                </li>

        </form> <!--list--> 

        <div class="block">
            <a class="button button-fill travelChoice" onclick="onClickGo()">Go</a>
        </div>      
    </div><!--col-100-->
</div><!--row-->

Я поместил функцию onClickGo в travel.js, чтобы таким образом включить ее в home.html 

<script type="text/javascript" src="js/travel.js"></script>

Travel.js 

const onClickGo = () => {
   $$('.travelChoice').on('click', function(){

    //retrieve the value selected
    var selectedValue = $$('.list input:checked').val();
   //go to the page 
   router.navigate('/travel/'+ selectedValue +'/');

}

Заранее спасибо

1 Ответ

0 голосов
/ 01 ноября 2018

Я думаю, вам нужно попробовать это, так как загрузка html прежде, чем найдет свою функцию: 

 $$('.travelChoice').on('click', function(){

    //retrieve the value selected
    var selectedValue = $$('.list input:checked').val();
   //go to the page 
   router.navigate('/travel/'+ selectedValue +'/');
}

Без переноса на переменную onClickGo и удаления события нажатия кнопки тоже 

<a class="button button-fill travelChoice">Go</a>

... Я думаю, что это будет работать ..... также попробуйте использовать это для навигации: 

self.app.router.navigate('/travel/'+ selectedValue, {reloadCurrent: true});

Добавив reloadCurrent, вы можете открыть страницу без ярмарки с обналиченной HTML-страницы

...