メールアドレスでのログイン後、navbarが機能しないのですが

[yusnoww]

プログラミングの勉強を初めて１週間の者です。 ncmbとmonacaのonsenuiのテンプレートを用いて メールアドレスのログイン機能とnavbarでの画面切替機能を作ったのですが、 メールアドレスログイン後のnavbarでの画面切替がうまくいきません。 質問の仕方もよくわからず合ってるかわかりませんが、ご教授いただければ幸いです。 コードは下記のようなものです。

<div data-role="footer" data-position="fixed" data-theme="c">
  <div data-role="navbar">
    <ul>
      <li><a data-theme="d">ホーム</a></li>
      <li><a href="#exhibitPage" data-theme="d">出品</a></li>
      <li><a href="#messsagePage" data-theme="d">メッセージ</a></li>
    </ul>
  </div>
</div>

[goofmint]

恐らくこの情報だけでは分からないかなと。JavaScript側はどうなっているでしょうか？

[yusnoww]

ご返信ありがとうございます。 JavaScriptは以下のようになっております。

// [NCMB] SDKの初期化
var ncmb = new NCMB(appKey, clientKey);

// ログイン中の会員
var currentLoginUser; 

/********** メールアドレス / PW 認証 **********/
// 【メール / PW 認証】「登録する」ボタン押下時の処理
function onEmailRegisterBtn() {
    // loading の表示
    $.mobile.loading('show');
    // 入力フォームからメールアドレス(mailAddress)を取得
    var mailAddress = $("#reg_mailAddress").val();
    // [NCMB] メールアドレス に会員登録を行うためのメールを送信
    ncmb.User.requestSignUpEmail(mailAddress)
             .then(function(user){
                 /* 処理成功 */
                 alert("【メール / PW 認証】新規登録メールを配信しました。");
                 console.log("【メール / PW 認証】新規登録メールを配信しました。");
                 alert("届いたメールに記載されているURLにアクセスし、パスワードを登録してください。");
                 // フィールドを空に
                 $("#reg_mailAddress").val("");
                 // loading の表示終了
                 $.mobile.loading('hide');
                 // 【メール / PW 認証】ログインページへ移動
                 $.mobile.changePage('main.html');
             })
             .catch(function(error){
                 /* 処理失敗 */
                 alert("【メール / PW 認証】新規登録メールの配信に失敗しました：" + error);
                 console.log("【メール / PW 認証】新規登録メールの配信失敗しました：" + error);
                 // loading の表示終了
                 $.mobile.loading('hide');
             });
}

// 【メール / PW 認証】「ログインする」ボタン押下時の処理
function onEmailLoginBtn() {
    // 入力フォームからメールアドレス(mailAddress)とPW(password)を取得
    var mailAddress = $("#login_mailAddress").val();
    var password = $("#emailLogin_password").val();
    // loading の表示
    $.mobile.loading('show');
    // [NCMB] メール / PW でログイン
    ncmb.User.loginWithMailAddress(mailAddress, password)
             .then(function(user) {
                 /* 処理成功 */
                 console.log("【メール / PW 認証】ログインに成功しました");
                 // [NCMB] ログイン中の会員情報の取得
                 currentLoginUser = ncmb.User.getCurrentUser();
                 // フィールドを空に
                 $("#login_mailAddress").val("");
                 $("#emailLogin_password").val("");
                 // 詳細ページへ移動
                 $.mobile.changePage("main.html");
             })
             .catch(function(error) {
                 /* 処理失敗 */
                 console.log("【メール / PW 認証】ログインに失敗しました: " + error);
                 alert("【メール / PW 認証】ログインに失敗しました: " + error);
                 // フィールドを空に
                 $("#login_mailAddress").val("");
                 $("#emailLogin_password").val("");
                 // loading の表示
                 $.mobile.loading('hide');
             });
}

/********** 共通 **********/
// 「ログアウト」ボタン押下後確認アラートで「はい」押下時の処理
function onLogoutBtn() {  
    // [NCMB] ログアウト
    ncmb.User.logout();
    console.log("ログアウトに成功しました");
    // ログイン中の会員情報を空に
    currentLoginUser = null;
    // currentUserDataリストを空に
    $("#currentUserData").empty();
    // 【ID / PW】ログインページへ移動
    $.mobile.changePage('#IDLoginPage');
}

//---------------------------------------------------------------------------

// アプリ起動時
$(function() {
    $.mobile.defaultPageTransition = 'none';
    /* メール / PW */
    $("#emailLoginBtn").click(onEmailLoginBtn);
    $("#YesBtn_mailAddress").click(onEmailRegisterBtn);
    $("#NoBtn_mailAddress").click(onDeleteField);  
    /* 共通 */
    $("#YesBtn_logout").click(onLogoutBtn);
});

// loading 表示生成
$(document).on('mobileinit',function(){
    $.mobile.loader.prototype.options;
});

// DetailPage ページが表示されるたびに実行される処理
$(document).on('pageshow','#DetailPage', function(e, d) {
    // currentUserData を表示
    getUserData();
    // loading の表示を終了
    $.mobile.loading('hide');
});

// currentUser のデータを表示する処理
function getUserData() {
    // 値を取得
    var objectId = currentLoginUser.get("objectId");
    var userName = currentLoginUser.get("userName");
    var mailAddress = currentLoginUser.get("mailAddress");
    var authData = JSON.stringify(currentLoginUser.get("authData"));
    var date = new Date(currentLoginUser.get("createDate"));
    var createDate = date.getFullYear() + "-" 
                    + ((date.getMonth() < 10) ? "0" : "") + date.getMonth() + "-"
                    + ((date.getDate() < 10) ? "0" : "") + date.getDate() + "T"
                    + ((date.getHours() < 10) ? "0" : "") + date.getHours() + ":"
                    + ((date.getMinutes() < 10) ? "0" : "") + date.getMinutes() + ":" 
                    + ((date.getSeconds() < 10) ? "0" : "") + date.getSeconds() + "." 
                    + ((date.getMilliseconds() < 10) ? "0" : "") + date.getMilliseconds() + "+09:00";
    // リストに追加
    $("#currentUserData").append("<tr style='border-right: 1px solid #ccc; border-left: 1px solid #ccc; color: #FFFFFF; background: #04162e;'><th scope='row' id='key'>key</th><td scope='row' id='value' style='width: 100%;'>value</td></tr>");
    $("#currentUserData").append("<tr><th>objectId</th><td><input type='text' style='width: 95%; color: #959595;' readonly='readonly'; value='" + objectId + "'/></tr>");
    $("#currentUserData").append("<tr><th>userName</th><td><input type='text' style='width: 95%; color: #959595;' readonly='readonly'; value='" + userName + "'/></tr>");
    $("#currentUserData").append("<tr><th>password</th><td><input type='text' style='width: 95%; color: #959595;' readonly='readonly'; value='(hidden)'/></tr>");
    $("#currentUserData").append("<tr><th>mailAddress</th><td><input type='text' style='width: 95%; color: #959595;' readonly='readonly'; value='" + mailAddress + "'/></tr>");
    $("#currentUserData").append("<tr><th>authData</th><td><input type='text' style='width: 95%; color: #959595;' readonly='readonly'; value='" + authData + "'/></tr>");
    $("#currentUserData").append("<tr><th>createDate</th><td><input type='text' style='width: 95%; color: #959595;' readonly='readonly'; value='" + createDate + "'/></tr>");
    // リストを更新
    $("#currentUserData").listview('refresh');
}

function onDeleteField() {
    // フィールドを空に
    $("#reg_mailAddress").val("");
}

ネットで調べたコードをそのまま動くか試してみたものです。 画面にスマートフォンによくある画面下に３つのボタンがあり、 タップすることでページが切り替わるようなものを作りたいと思い、 「navbar」を使ってみました。

「メール認証」「navbar」それぞれは機能するのですが、 メールでのログイン後にnavbarのあるページに飛ぶようにすると、navbarが機能しませんでした。

本当にお手すきの際で大丈夫なので、返信いただけたら幸いです。

[goofmint]

恐らくOnsen UIを操作しているコードの問題だと思うのですが、開発者ツールなどで見た時に、どの部分のコードが動いていないのでしょうか？

[yusnoww]

MonacaのクラウドIDEを使っているのですが、 開発者ツールとはデバッガーの部分でよろしいでしょうか。

どの部分を見ればコードが動いているかどうかまだ理解できておらず・・・ 勉強不足で申し訳ございません。

[goofmint]

Google Chromeなどの開発者ツールが良いかと思います。ただ、質問自体は Onsen UIに絡んだものなので、

https://teratail.com/questions/search?q=monaca&conditions=and

こちらで質問した方が良いかも知れません。とは言え、コードの動いている、動いていないといったところは把握されてからの方が良いかと思いますが…。

[yusnoww]

ありがとうございます。 もう少し自分で勉強してから上記のサイトを使ってみます。

始めたばかりの私の変な質問に付き合っていただき、ありがとうございました！