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

Я не могу перенаправить со страницы 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>

Путешествие.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 +'/');

}

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

3
0
752
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Я думаю, вам нужно попробовать это, так как 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-страницы.

Привет, Anees, спасибо за вашу помощь. Я изменил его, следуя вашему решению, но таким образом ничего не происходит. Я также попробовал другое решение, используя document.getElementById ("travelChoice"). AddEventListener ("cl‌ ick", onClickGo); но оба решения не работают, и консоль ничего не пишет

Paul 01.11.2018 11:08

Добро пожаловать, @Paul, не могли бы вы установить предупреждение ('555555') в click $$ ('. TravelChoice'). On ('click', function () {alert ('555555');})}; .... и т.д. и проверьте, отображается ли это или нет

Anees Hikmat Abu Hmiad 01.11.2018 12:09

Важное примечание: если его предупреждение работает, попробуйте удалить последнюю обратную косую черту в URL-адресе навигации .. чтобы URL-адрес выглядел следующим образом: '/ travel /' + selectedValue .... так как подмаршрут не имеет обратной косой черты

Anees Hikmat Abu Hmiad 01.11.2018 12:12

Используя код, опубликованный в моем вопросе, я добавил идентификатор на кнопку <a class="button button-fill" id="travelChoice" onclick="onClickGo()"> Go </a> и в файл js, который я изменил в $$ ('# travelChoice') и ваша строка self.app.router.navigate ('/ travel /' + selectedValue, {reloadCurrent: true}); работает: D спасибо! но он работает частично после 4 тестов, радиокнопка позволяет проверять более одного выбора. Как это возможно? также, чтобы загрузить страницу, мне нужно дважды щелкнуть

Paul 01.11.2018 12:48

Хороший приятель, О радио Это еще одна проблема для страницы отправки, обычно вы можете исправить это, перезагрузив страницу формы, предотвратив кеширование или что-то еще

Anees Hikmat Abu Hmiad 01.11.2018 13:07

Спасибо Anees :)

Paul 01.11.2018 14:28

Добро пожаловать, Пол :)

Anees Hikmat Abu Hmiad 01.11.2018 14:34

не забудьте выбрать мой ответ, если он вам поможет :)

Anees Hikmat Abu Hmiad 01.11.2018 14:40

Другие вопросы по теме