Unable to call function not getting page.matches O

2019-09-14 06:11发布

站内文章 / JavaScript
53 0 0

问题:

Project Attached HERE

I have wasted my whole life (actually one week) figuring out this problem. I am at the beginning stage of Hybrid App Development and this thing is hurting me. I am working in Cordova and using OnSen UI as my framwork for developing an App. My JavaScrip and jQuery everything is fine but I am unable to call functions from onClick method.

What I want is, inside:

<ons-template id="fetchPage.html">, I have div with id="divFtechHere" I want to find it and want to call: 

if (page.matches('#fetchPage.html')) {
page.querySelector('#divFtechHere').onclick = function() {
    console.log ("list Item Clicked!");
    alert('Now clicked');
 };
} // page.matches('#fetchPage.html')

But this is not working.

Ultimately, What I want is to achieve is: When I want to click on #myListElement (which is having list of items) and it return me with ID so that I can fetch more info from webserver. Please help me fix this issue. I will be glad if you help fixing my whole document.addEventListener('init', function (event)I think I am doing something wrong there as well. Thank You.

Here is my whole code:

index.html

<!DOCTYPE html>
<html>
<head>
    <title>My New App</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/onsenui.css" />
    <link rel="stylesheet" href="css/onsen-css-components.css" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!--    <script src="js/jquery-3.1.1.min.js"></script>-->
    <script src="js/onsenui.js"></script>
    <script src="js/myJs.js"></script>
</head>

<body>
    <ons-splitter>
        <ons-splitter-side id="menu" side="left" width="220px" collapse swipeable>
            <ons-page>
                <ons-list>
                    <ons-list-item onclick="fn.load('home.html')" tappable> Home </ons-list-item>
                    <ons-list-item onclick="fn.load('settings.html')" tappable> Settings </ons-list-item>
                    <ons-list-item onclick="fn.load('about.html')" tappable> About </ons-list-item>
                    <ons-list-item id="ons-list-fetch" onclick="fn.load('fetchPage.html');" tappable> Fetch Data </ons-list-item>

                </ons-list>
            </ons-page>
        </ons-splitter-side>
        <ons-splitter-content id="content" page="home.html"></ons-splitter-content>
    </ons-splitter>
    <ons-template id="home.html">
        <ons-page id="helloworld-page">
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button onclick="fn.open()">
                        <ons-icon icon="md-menu"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center"> Main </div>
            </ons-toolbar>
            <p style="text-align: center; opacity: 0.6; padding-top: 20px;"> Swipe right to open the menu! </p>

<!--            Inputs-->
            <h2 style="text-align: center; opacity: 0.6;">---</h2>
            <div style="text-align: center; margin-top: 30px;">
                <p>
                    <ons-input id="username" modifier="underbar" placeholder="Username" float></ons-input>
                </p>
                <p>
                    <ons-input id="password" modifier="underbar" type="password" placeholder="Password" float></ons-input>
                </p>
                <p style="margin-top: 30px;">
                    <ons-button id="btnSignIn" style="width: 90px;" >Sign in</ons-button>
                    <ons-button id="btnClickMe">Click mee!</ons-button>
                </p>

    <section style="padding: 8px">
    <ons-button modifier="quiet">Forgot Password</ons-button>
    </section>
    </div>      
<!--    eof Inputs-->
<p style="text-align: center; font-size: 14px; opicity: 0.6"> All rights reserved </p>
    </ons-page>
    </ons-template>
    <ons-template id="settings.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button onclick="fn.open()">
                        <ons-icon icon="md-menu"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center"> Settings </div>
            </ons-toolbar>
        </ons-page>
    </ons-template>
    <ons-template id="about.html">
        <ons-page>
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button>
                        <ons-icon icon="md-menu"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center"> About </div>
            </ons-toolbar>
        </ons-page>
    </ons-template>
<!--    FetchPage-->
    <ons-template id="fetchPage.html">
        <ons-page id="fetchPage2.html">
            <ons-toolbar>
                <div class="left">
                    <ons-toolbar-button onclick="fn.open()">
                        <ons-icon icon="md-menu"></ons-icon>
                    </ons-toolbar-button>
                </div>
                <div class="center"> Fetch </div>
            </ons-toolbar>

<ons-list modifier="inset" id="myListElement">
    <ons-list-header >My Inset listdc</ons-list-header>
    <ons-list-item modifier="longdivider" tappable>Item A</ons-list-item>
    <ons-list-item modifier="longdivider" tappable>Item B</ons-list-item>
    <ons-list-item modifier="longdivider" tappable>Item C</ons-list-item>
</ons-list> 

<div id="divFtechHere">Here</div>
    </ons-page>     
    </ons-template>
    <!--eof Old Script-->   
    </body>
</html>

myJs.js

$(document).ready(function() {
    console.log("Code Loaded");

//      $('#divFtechHere').onclick = function() {
//          //event.preventDefault();
//          console.log ("list Item Clicked!");
//          alert('Now clicked');
//     };

document.addEventListener('init', function (event) {
  var page = event.target;
  if (page.matches('#helloworld-page')) {
     page.querySelector('#btnSignIn').onclick = function() {
         addFunction();
     };

     page.querySelector('#btnClickMe').onclick = function() {
       //ons.notification.alert('Hello Click Me!');
        fn.load('fetchPage.html');
        fetchFunction();
         //alert("btnClickMee");
     };

      // Another Tab Item
      // Uncomment this bellow line to see list of items.
      //$("#ons-list-fetch").click(fetchFunction);
      // When clicked on List Item index may be pop up
      $("#myListElement").click(listClicked);
  } // eof page.matches('#helloworld-page

    // Another Page
    if (page.matches('#fetchPage2.html')) {
        page.querySelector('#divFtechHere').onclick = function() {
            console.log ("list Item Clicked!");
            alert('Now clicked');
     };
  } // eof page.matches('#fetchPage2.html')
}); 
// For Menu Icon
window.fn = {};

window.fn.open = function() {
  var menu = document.getElementById('menu');
  menu.open();
};

window.fn.load = function(page) {
  var content = document.getElementById('content');
  var menu = document.getElementById('menu');
  content.load(page)
    .then(menu.close.bind(menu));
}; // eof Menu Icon

function listClicked(){
    ons.notification.alert("You click on: ");
    alert("You click on: ");
}

function addFunction(){

                var user_name1 = $('#username').val();
                var user_age1  = $('#password').val();

                console.log("testFunc is invoked");
                console.log("user_name: " + user_name1 + " user_age: " + user_age1);
                $.post({
                    type: 'POST',
                    url: "add.php?user_name=" + user_name1 + "&user_age=" + user_age1,
                    timeout: 5000,
                    success:function(result){
                    console.log("Added: " + result);    
                    ons.notification.alert("Success: " + result);
                        //$("#div1").html(result);

                    console.log("Success");                         
                    },
                    error: function(err){
                    ons.notification.alert("Error: " + err.status + ", " + err.statusText);
                    console.log("Error: " + err);
//                  console.log(err.status);
//                  console.log(err.statusText);
//                  $("#div1").text(err.responseText);
                        }
                    });
            }

function fetchFunction(){
    //fn.load('fetchPage.html');
                console.log("fetchFunction is invoked");

                var header = "<ons-list-header>My Inset List</ons-list-header>";
                $.post({
                        type: 'POST',
                        url: "fetch.php",
                        success:function(result){
                        timeout: 5000,
                        $("#myListElement").html(header);
                        $("#myListElement").append(result);

//                  $('.center').onclick = function () {
//                  //listClicked1();
//                  alert(8);
//          };

                        //console.log("Fetched: " + result);    
                        //ons.notification.alert("Success: " + result);
                        //$("#div1").html(result);

                        console.log("Success");                         
                        },
                        error: function(err){
                        ons.notification.alert("Error: " + err.status + ", " + err.statusText);
                        console.log("Error: " + err);
//                      console.log(err.status);
//                      console.log(err.statusText);
                        //$("#div1").text(err.responseText);
                        }
                    });
            }
 }); 



//var login = function() {
//  var username = document.getElementById('username').value;
//  var password = document.getElementById('password').value;
//
//  if (username === 'asd' && password === 'asd') {
//    ons.notification.alert('Congratulations!');
//  }
//  else {
//    ons.notification.alert('Incorrect username or password.');
//  }
//};

回答1:

Whao!

I just edit this: 

if (page.matches('#fetchPage.html')) {
page.querySelector('#divFtechHere').onclick = function() {
    console.log ("list Item Clicked!");
    alert('Now clicked');
 };
} // page.matches('#fetchPage.html')

to

if (event.target = "fetchPage.html") {
    $("#divFtechHere").click(function () {
        alert("Div Clicked");
    });
}

and it is working now ;)

The method now is calling, Yep :D



标签： javascript jquery cordova onsen-ui
举报

收藏的人(0)

Ta的文章 更多文章
登录 后发表评论
0条评论
还没有人评论过~