I'm having trouble with the json call after the page transition.

It is developed by monaca, and when I fly from index.html to detail.html, I want to move jason to detail.html, but it doesn't seem to be moving, so I'm in trouble.
"When I fly, I slide and jump, and I don't feel like reading a page like ""loading"", so I'm thinking a lot about whether that's why json was called."
I would appreciate it if you could let me know.

↓index.html↓

<script>

        function categoryItem(url, title){
            // Transition to detail.html
            myNavigator.pushPage("detail.html", {
                animation: 'slideRight', 
                url —url, // data to pass to
                title —title, // data to pass to
            })
        }

        // detail.html Page Initialization Event
        document.addEventListener("pageinit", function(e){
            if(e.target.id=="page-detail"){
                // Retrieve and view passed data
                var options=myNavigator.getCurrentPage().options;
                $('#page-detail').find('.url').text(options.url);
                $('#page-detail').find('.title').text(options.title);
            }
        }, false);
    </script>

   <li><a href="#"onClick="categoryItem('xxx','fun')">Title</a></li>

↓detail.html↓

$.ajax({
                type: 'GET',
                url: 'http://○○○.jp/json/fun json data.php',
                dataType: 'json',
                success:function(json){
                    varlen=json.length;
                    for(vari=0;i<len;i++){
                        $("#list").append('<airtcle'>>/article>');
                    }
                }
            });
            }, false);

 <body>
    <section class="load__wrap">
        <ons-navigator title="Navigator" var="myNavigator">
            <ons-page id="page-detail">
                <ons-toolbar>
                    <div class="title"></div>
                </ons-toolbar>
                <section id="list"></section>
            </ons-page>
        </ons-navigator>

    </section>
</body>

monaca html5 json

2022-09-30 21:11

1 Answers

It looks like you are performing a screen transition with ons-navigator, but
The transition destination screen is embedded in iframe, so
The script should be defined in index.html.

index.html

<script>
    ons.bootstrap();

    function categoryItem(url, title){
        // Transition to detail.html
        myNavigator.pushPage("detail.html", {
            animation: 'slideRight', 
            url —url, // data to pass to
            title —title, // data to pass to
        })
    }

    // detail.html Page Initialization Event
    document.addEventListener("pageinit", function(e){
        if(e.target.id=="page-detail"){
            // Retrieve and view passed data
            var options=myNavigator.getCurrentPage().options;
            $('#page-detail').find('.url').text(options.url);
            $('#page-detail').find('div.center').text(options.title);

            $.ajax({
                type: 'GET',
                url: 'http://○○○.jp/json/fun json data.php',
                dataType: 'json',
                success:function(json){
                    varlen=json.length;
                    for(vari=0;i<len;i++){
                        $("#list").append('<airtcle></article>');
                    }
                }
            });
        }
    }, false);
</script>
<body>
<ons-navigator title="Navigator" var="myNavigator">
    <ons-page>
        <a href="#"onClick="categoryItem('xxx','fun')">Title</a>
    </ons-page>
</ons-navigator>
</body>

detail.html

<ons-page id="page-detail">
    <ons-toolbar>
    </ons-toolbar>
    <section id="list"></section>
</ons-page>

2022-09-30 21:11

If you have any answers or tips

Popular Tags

python x 4647

android x 1593

java x 1494

javascript x 1427

c x 927

c++ x 878

ruby-on-rails x 696

php x 692

python3 x 685

html x 656