jquery - jQuery Mobile の [送信] ボタンからのページの更新を防止する

Question

私はプログラミングの完全な初心者で、自分が何をしているのかまったくわかりません... オンラインで見つけたアドレス帳を作成するコードを、jQuery モバイルフレームワークを使用している自分のサイトに貼り付けました。問題は、フォームの送信時にページが更新されることです。これが起こらないようにするには、「return false;」を追加する必要があると思います。しかし、よくわかりません...アドバイスをいただければ幸いです。

<!DOCTYPE html>
<html>
    <head>
            <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>jQuery Mobile: Theme Download</title>
        <link rel="stylesheet" href="themes/tya.min.css" />
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile.structure-1.3.2.min.css" />
        <link href="themes/mycss.css" rel="stylesheet" type="text/css">
        <script>
        function save() {
            var fieldValue = document.getElementById('textfield').value;
            localStorage.setItem('text', fieldValue);
        }

        function load() {
            var storedValue = localStorage.getItem('text');
            if (storedValue) {
                document.getElementById('textfield').value = storedValue;
            }
        }

        </script>
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>

    </head>
<body onload="load()">
<!-- Start of first page: #one -->
<div data-role="page" id="home">

    <img src="images/tya-logo.png" alt="TYA Logo" width="121" height="84" class="logo">
    <!-- /header -->

<!-- MENU -->
    <div data-role="content" >  
        <div data-role="controlgroup">
        <a href="#blogs" data-icon="arrow-r" data-role="button" data-theme="a" data-transition="none">Blogs</a>
        <a href="#blood" data-icon="arrow-r" data-role="button" data-theme="a" data-transition="none">Bloods</a>
        <a href="#contacts" data-icon="arrow-r" data-role="button" data-theme="a" data-transition="none">Contacts</a>
        <a href="#documents" data-icon="arrow-r" data-role="button" data-theme="a" data-transition="none">Documents</a>
        <a href="#maps" data-icon="arrow-r" data-role="button" data-theme="a" data-transition="none">Maps</a>
        <a href="#links" data-icon="arrow-r" data-role="button" data-theme="a" data-transition="none">Links</a>
        </div>
  </div><!-- /content -->

    <div data-role="footer" data-theme="a">
        <h4>&copy; 2013 Teenage & Young Adults Leeds</h4>
    </div><!-- /footer -->
</div><!-- /page one -->


<!-- BLOGS -->
<div data-role="page" id="blogs" data-theme="a">

    <div data-role="header"><a href="#home" data-role="button" data-icon="home" data-transition="none" data-dom-cache="true">home</a>
      <h1>Blogs</h1>
    </div><!-- /header -->

    <div data-role="content" data-theme="a">    
        <h2>Two</h2>

    </div><!-- /content -->

    <div data-role="footer" data-theme="a">
        <h4>&copy; 2013 Teenage & Young Adults Leeds</h4>
    </div><!-- /footer -->
</div><!-- /page two -->


<!-- BLOODS -->
<div data-role="page" id="blood">

    <div data-role="header"><a href="#home" data-role="button" data-icon="home" data-transition="none" data-dom-cache="true">home</a>
      <h1>Bloods</h1>
    </div><!-- /header -->
    <table id="contacts-table">
    <tr id="contacts-head">
        <th>ID</th>
        <th>First name</th>
        <th>Last name</th>
        <th>Email</th>
        <th>Actions</th>
    </tr>
</table>

<form id="contacts-form">
        <div class="item text">
            <label>First name:</label>
            <div class="field"><input type="text" name="first_name" /></div>
        </div>
        <div class="item text">
            <label>Last name:</label>
            <div class="field"><input type="text" name="last_name" /></div>
        </div>
        <div class="item text">
            <label>Email:</label>
            <div class="field"><input type="text" name="email" /></div>
        </div>
        <div class="button-wrapper">
            <div class="item button">
                <div class="field"><input type="button" id="contacts-op-discard" value="Discard" /></div>
            </div>
            <div class="item button button-default">
                <div class="field"><input type="submit" id="contacts-op-save" value="Save" /></div>
            </div>
        </div>
        <input type="hidden" name="id_entry" value="0" />
    </form>


    <!-- SCRIPT FOR FORM FUNCTIONALITY -->
    <script>
        var Contacts = {
            index: window.localStorage.getItem("Contacts:index"),
            $table: document.getElementById("contacts-table"),
            $form: document.getElementById("contacts-form"),
            $button_save: document.getElementById("contacts-op-save"),
            $button_discard: document.getElementById("contacts-op-discard"),

            init: function() {
                // initialize storage index
                if (!Contacts.index) {
                    window.localStorage.setItem("Contacts:index", Contacts.index = 1);
                }

                // initialize form
                Contacts.$form.reset();
                Contacts.$button_discard.addEventListener("click", function(event) {
                    Contacts.$form.reset();
                    Contacts.$form.id_entry.value = 0;
                }, true);
                Contacts.$form.addEventListener("submit", function(event) {
                    var entry = {
                        id: parseInt(this.id_entry.value),
                        first_name: this.first_name.value,
                        last_name: this.last_name.value,
                        email: this.email.value
                    };
                    if (entry.id == 0) { // add
                        Contacts.storeAdd(entry);
                        Contacts.tableAdd(entry);
                    } 
                    else { // edit
                        Contacts.storeEdit(entry);
                        Contacts.tableEdit(entry);
                    }

                    this.reset();
                    this.id_entry.value = 0;
                    event.preventDefault();
                }, true);

                // initialize table
                if (window.localStorage.length - 1) {
                    var contacts_list = [], i, key;
                    for (i = 0; i < window.localStorage.length; i++) {
                        key = window.localStorage.key(i);
                        if (/Contacts:\d+/.test(key)) {
                            contacts_list.push(JSON.parse(window.localStorage.getItem(key)));
                        }
                    }

                    if (contacts_list.length) {
                        contacts_list
                            .sort(function(a, b) {
                                return a.id < b.id ? -1 : (a.id > b.id ? 1 : 0);
                            })
                            .forEach(Contacts.tableAdd);
                    }
                }
                Contacts.$table.addEventListener("click", function(event) {
                    var op = event.target.getAttribute("data-op");
                    if (/edit|remove/.test(op)) {
                        var entry = JSON.parse(window.localStorage.getItem("Contacts:"+ event.target.getAttribute("data-id")));
                        if (op == "edit") {
                            Contacts.$form.first_name.value = entry.first_name;
                            Contacts.$form.last_name.value = entry.last_name;
                            Contacts.$form.email.value = entry.email;
                            Contacts.$form.id_entry.value = entry.id;
                        }
                        else if (op == "remove") {
                            if (confirm('Are you sure you want to remove "'+ entry.first_name +' '+ entry.last_name +'" from your contacts?')) {
                                Contacts.storeRemove(entry);
                                Contacts.tableRemove(entry);
                            }
                        }
                        event.preventDefault();
                    }
                }, true);
            },

            storeAdd: function(entry) {
                entry.id = Contacts.index;
                window.localStorage.setItem("Contacts:index", ++Contacts.index);
                window.localStorage.setItem("Contacts:"+ entry.id, JSON.stringify(entry));
            },
            storeEdit: function(entry) {
                window.localStorage.setItem("Contacts:"+ entry.id, JSON.stringify(entry));
            },
            storeRemove: function(entry) {
                window.localStorage.removeItem("Contacts:"+ entry.id);
            },

            tableAdd: function(entry) {
                var $tr = document.createElement("tr"), $td, key;
                for (key in entry) {
                    if (entry.hasOwnProperty(key)) {
                        $td = document.createElement("td");
                        $td.appendChild(document.createTextNode(entry[key]));
                        $tr.appendChild($td);
                    }
                }
                $td = document.createElement("td");
                $td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
                $tr.appendChild($td);
                $tr.setAttribute("id", "entry-"+ entry.id);
                Contacts.$table.appendChild($tr);
            },
            tableEdit: function(entry) {
                var $tr = document.getElementById("entry-"+ entry.id), $td, key;
                $tr.innerHTML = "";
                for (key in entry) {
                    if (entry.hasOwnProperty(key)) {
                        $td = document.createElement("td");
                        $td.appendChild(document.createTextNode(entry[key]));
                        $tr.appendChild($td);
                    }
                }
                $td = document.createElement("td");
                $td.innerHTML = '<a data-op="edit" data-id="'+ entry.id +'">Edit</a> | <a data-op="remove" data-id="'+ entry.id +'">Remove</a>';
                $tr.appendChild($td);
            },
            tableRemove: function(entry) {
                Contacts.$table.removeChild(document.getElementById("entry-"+ entry.id));
            }
        };
        Contacts.init();
    </script>

    <div data-role="footer">
        <h4>Page Footer</h4>
    </div><!-- /footer -->
</div><!-- /page popup -->
</body>
</html>

score 0 · Accepted Answer

return false関数で使用する

        function save() {
            var fieldValue = document.getElementById('textfield').value;
            localStorage.setItem('text', fieldValue);
            return false;
        }

そしてreturn save()、あなたがあなたの関数を呼び出す場所

<input type="submit" id="contacts-op-save" value="Save" click="return save()" />

score 0 · Accepted Answer

event.preventDefault();

それを関数 "Contacts.$form.addEventListener("submit", function(event) {...") に追加します。

Contacts.$form.addEventListener("submit", function(event) {
event.preventDefault();
...

});

魔法のように動作するはずです。

チョウ。

score 0 · Accepted Answer

あなたのコードは非常に乱雑で、すべてを 1 つのドキュメントにまとめることはお勧めできません。
覚えて：

懸念事項の分離を常に優先します (js のようなスクリプトを使用している場合は、そのコードを外部スクリプトファイルに配置してみてください)。

js と html を混在させないでください。最終的には混乱を招くことになります。
最後に、フォームを送信するために必要なことは、(フォーム送信の) 匿名関数で名前付き引数 (イベントの省略形として e が最も好まれます) を渡すことだけです。 e.preventDefault();
これにより、フォーム送信のデフォルトの動作がインターセプトされるため、ページが更新されることはありません。
例 //これがフォーム送信のイベントハンドラであるとします。

$('form_id/class').on('submit',function(e){

                  e.preventDefault();


             //logic goes here.....

   })

e.preventDefault() の位置は関係ありません。コールバック内のロジックの上または下に配置できます。ただし、フォームのデフォルトの動作を防ぐために配置する必要があります。
乾杯！

jquery - jQuery Mobile の [送信] ボタンからのページの更新を防止する

3 に答える 3

Related

Reference