0

私がこのサイトで目にするもののほとんどは、php から div に情報を追加することを指しています。ユーザーの入力を受け取り、それをテーブルに動的に追加し、送信ボタンをクリックするとdivに表示したいだけです。

この時点では、データがデータベースに投稿される場所、php などは何もしていません。

データベースへの動的追加も実行するための JQuery があります。動作しますが、javascript でブレークポイントを使用してステップスルーし、入力されたデータが行に追加されていることを確認する必要があります....問題は、その機能が完了すると、ページが更新され、すべてのデータが失われることです。

毎回ページを更新して他のすべてのデータをクリアせずに、div のテーブルにデータを追加する方法が必要です。

親情報が 1 つの div にあり、子情報が別の div に追加されているとします。子ピースを追加するたびに、親情報を削除したくありません。実際には、「編集可能な」情報として残しておきます。

- - - - - - - - - - - - - - - - - - - - - 編集 - - - - ---------------------------------------
以下は、私が現在使用しているコードです提案ですが、クリックのイベントハンドラーにヒットしますが、関数内に入らず、ジャンプして戻り、そこにある他のブレークポイントにヒットすることはないため、明らかに完全には理解できません。

------------------------------------------------------ 最終編集 ---------- -------------------------------------
やっとお尻から頭を出して注意したチャーリーが私に言っていたこと、そしてこれを手に入れました...そして、onClickイベントから関数を呼び出すと機能します。ボタンのクリックにバインドするイベントを取得できませんでしたが、セットアップではなくタグを使用していた可能性があります。

function(addNoteRow){
            event.prevent.Default();
            var noteTxt = $('#noteEntry').val();
            var noteEntBy = 'BGM'
            noteEntDate = (Date());
            if (!document.getElementsByTagName) return;
            tabBody=document.getElementsByTagName("TBODY").item(0);
            row=document.createElement("TR");
            cell1=document.createElement("TD");
            cell2=document.createElement("TD");
            cell3=document.createElement("TD");
            textnode1=document.createTextNode(noteEntDate);
            textnode2=document.createTextNode(noteEntBy);
            textnode3=document.createTextNode(noteTxt);
            cell1.appendChild(textnode1);
            cell2.appendChild(textnode2);
            cell3.appendChild(textnode3);
            row.appendChild(cell1);
            row.appendChild(cell2);
            row.appendChild(cell3);
            tabBody.appendChild(row);
        }
4

2 に答える 2

0

div などのページの一部を部分的に更新するには、AJAX を試してください。 http://api.jquery.com/jQuery.ajax/

于 2012-10-29T13:51:52.673 に答える
0

あなたはjQueryを使用していると述べたので、これを簡単にするために私の例で説明します。

 $('#submit_button').click( // Bind an event handler to the submit button
        function(event){
            event.preventDefualt(); //This is necessary if you are using a an submit button input element as normal behavior is to submit the form without ajax causing the page location to change. Event is automatically passed in, and we can call preventDefault() on this object to stop the browser from navigating away from our page.
            $.ajax({
                url:'http://youserver.com/script_that_will_respond.php', //Give the ajax call a target url
                data: $('#user_input').val(), //Supply some data to send with the request,
                success: function(data){ //Supply an anonymous function to execute on success. The parameter will be the response text.
                    $('#your_result_div').html(data); //On success of the ajax call, put the response text into an html element on your page
                }
            });
        }
    );

jQuery の ajax メソッドには多くの設定があります。これはかなり単純な例です。ここでさまざまなオプションの詳細を読むことができます: http://api.jquery.com/jQuery.ajax/

編集：誤解している可能性があります。サーバーにアクセスする必要がなく、これをすべてローカルで実行したい場合は、より簡単です。

$('#submit_button').click( // Bind an event handler to the submit button
    function(event){
        event.preventDefault();
        /*
        We have to call this method on the event object bacause deafult behavior
        of a subnmit button is to submit the form, causing the browser to go to a new page.
        */
            var text = $('#some_input_element').val(); //Store the value of a text input in the variable text
            $('#your_div').html(text); //put the contents of the variable text into the "your_div" elemnt.
        }
);
于 2012-10-29T14:06:23.573 に答える