0

現在、monacaでタグでonclickを使用して遷移したい考えております。
onclickはタグで遷移させようとすると動作をしないことがわかりました.
return falseを付け加えることで遷移させずに、onclickは起動しております。
自分の作成したい内容はonclickが動いて違うページに遷移させたいのでが、
こうするためにはどのようなプログラムにすればよろしいですか?
以下にプログラム内容を載せます

ご教授よろしくお願いします。

onclick.js

function onRegisterBtn(id){
    ncmb.Installation.fetchById(id).then(function(installation){
        var seibetu = $("#reg_seibetu option:selected").val();                      
        installation.set("seibetu", seibetu);
        return installation.update();
    })
    .then(function(installation){
           alert('登録完了しました');
    })
    .catch(function(err){
           alert('登録完了できませんでした');
    });
}

index.html

<p>年齢<br>
    <select id="reg_nenrei">
        <option value="10">10代</option>
        <option value="20">20代</option>
        <option value="30">30代</option>
        <option value="40">40代</option>
        <option value="50">50代</option>
        <option value="60">60代</option>
        <option value="その他">その他</option>
    </select>
</p>  
<a href="index.html" onclick="onRegisterBtn('id')">登録する</a>
1
  • 現在のコードでも「登録する」リンクをクリックするとindex.htmlに遷移すると思いますが、onRegisterBtn内の登録処理の完了を待ってから遷移したいということでしょうか。登録に失敗した(catch節)時には遷移したいのですか?
    – unarist
    2016年3月28日 1:42

1 件の回答 1

1

onClick属性のイベントハンドラでデフォルト動作を抑止する

リンクがクリックされた時には、ブラウザのデフォルト動作として自動で遷移が行なわれます。
これを防ぐにはonClick属性の場合、返り値にfalseを指定します。

<a href="index.html" onclick="onRegisterBtn('id'); return false;">登録する</a>

addEventListener等で登録したイベントハンドラでデフォルト動作を抑止する

Cordova・Monacaでは通常onClick属性などは使わず、JavaScriptは別ファイルにしてaddEventListenerなどを使うと思います。

<a id="regist" href="index.html" >登録する</a>

この場合イベントハンドラへは引数でイベントオブジェクトが渡されます。このイベントオブジェクトのpreventDefaultメソッドを呼び出すとデフォルト動作が抑止出来ます。

document.getElementById("regist").addEventListener("click", function(event){
    event.preventDefault();
    onRegisterBtn('id');
}, false);

(質問の例のonRegisterBtnはイベントオブジェクトを受け取るように出来ていません。よって上記のコードではイベントハンドラに無名関数を指定し、その無名関数からonRegisterBtnを呼ぶようにしています)

JavaScriptで遷移する

ブラウザのデフォルト動作を抑止すると、リンクをクリックしてもイベントハンドラが実行された後に何も起こりません。
JavaScriptで遷移させる必要があります。location.assignを使います。

alert('登録完了しました');
location.assign("index.html");

現URLの履歴を消して遷移させる(置き換える)

ユーザーに遷移を意識させたくなかったり、現在のURLが遷移後は無効になるような場合はlocation.replaceを使い現URLに戻れなくします。

alert('登録完了しました');
location.replace("index.html");
1
  • 問題が解決しました。 ありがとうございました。
    – donadesu
    2016年3月29日 16:52

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。