0

jQuery モーダル ダイアログにユーザー登録フォームがあります。

フォームに入力し、モーダル ダイアログのボタンをクリックすると、データが mysql に送信されます。その部分は私にとっては大丈夫です。Jquery/Ajax を使用してデータをデータベースに送信しています。

私の問題は、処理されたデータをメイン ページ user.php (モーダル ダイアログが開かれる場所) に戻す必要があることです。すべての登録済みユーザーを表示するテーブルがあり、その HTML テーブルを更新して、登録が成功したことを示したいと考えています。

これは私のJquery/Ajaxです -

    if ( bValid) { 

        jQuery.ajax({
            type: "POST", // HTTP method POST or GET
            url: "process.php", //Where to make Ajax calls
            //dataType:"text", // Data type, HTML, json etc.
            dataType: 'json',
            data: { 
                name: $('#name').val(), 
                address: $('#address').val(), 
                city: $('#city').val() 
            },
            success:function(data){
                alert(data);
            },
            error:function (xhr, ajaxOptions, thrownError){
                //On error, we alert user
                alert(thrownError);
            }
        });
        $(this).dialog("close");                    
    }

これは、process.php ページの PHP コードです。

<?php
//include db configuration file
include_once("../test.php");

if ( (isset($_POST["name"]) && strlen($_POST["name"]) >= 3 && strlen($_POST["name"]) <= 60) &&
    (isset($_POST["address"]) && strlen($_POST["address"]) >= 3 && strlen($_POST["address"]) <= 50) &&
    (isset($_POST["city"]) && strlen($_POST["city"]) >= 3 && strlen($_POST["city"]) <= 40) ) 
{   //check $_POST["name"] and $_POST["address"] and $_POST["city"] are not empty

    $name   = $_POST["name"];
    $address = $_POST["address"];
    $city   = $_POST["city"];

    $q = "INSERT INTO users ( name, address, city) VALUES 
            ('".$name."','".$address."','".$city."')";
    $r = mysqli_query($dbc, $q); 

    if ( mysqli_effected_rows($dbc) == 1 ) {
        // make the table row 
        $output  = "<tr>\n";
        $output .= "  <td><input type='checkbox' name='' value='' class='' />&nbsp;&nbsp;$name</td>\n";
        $output .= "  <td>$address</td>\n";
        $output .= "  <td>$city</td>\n";
        $output .= "  <td><span class='edit_ico'></span></td>\n";
        $output .= "  <td><span class='delete_ico'></span></td>\n";
        $output .= "</tr>\n";   

        echo $output;

    } else {
        echo 'query error';
    }
} else {
    echo "error in post array";
}

?>

これは、user.php (メイン ページ) からの私のテーブル構造です。

<table>
  <tr>
    <th><input type='checkbox' class='selectAll' name='selectAll' value='' /> Name</th>
    <th>Address</th>
    <th>City</th>
    <th>Edit</th>
    <th>Delete</th>
  </tr>
<tr>
  <td><input type='checkbox' name='' value='' class='' />&nbsp;&nbsp;sfdsfsdf</td>
  <td>fdsafasf</td>
  <td>dsfadasf</td>
  <td><span class='edit_ico'></span></td>
  <td><span class='delete_ico'></span></td>
</tr>
<tr>
  <td><input type='checkbox' name='' value='' class='' />&nbsp;&nbsp;Tharanga Nuwan</td>
  <td>Alagala</td>
  <td>Ginigathena</td>
  <td><span class='edit_ico'></span></td>
  <td><span class='delete_ico'></span></td>
</tr>
</table>

HTML テーブルを更新する方法を誰か教えてもらえますか?

ありがとうございました。

4

1 に答える 1

0

process.phpテーブル行を出力していることがわかります。AJAX ルーチンの成功関数内でその行を受け取ります。

あなたがする必要があるのは、それを配置するドキュメントに DIV を持つことだけです。

たとえば、出力から タグ<tr>と</tr>タグを削除し、更新するテーブル行に DIV を追加して、現在の情報をその DIV 内に配置することをお勧めします。

<tr>
  <div id="yogibear">
    <td><input type='checkbox' name='' value='' class='' />sfdsfsdf</td>
    <td>fdsafasf</td>
    <td>dsfadasf</td>
    <td><span class='edit_ico'></span></td>
    <td><span class='delete_ico'></span></td>
  </div><!--#yogibear-->
</tr>

あなたのAJAXで：

    jQuery.ajax({
        type: "POST", // HTTP method POST or GET
        url: "process.php", //Where to make Ajax calls
        //dataType:"text", // Data type, HTML, json etc.
        dataType: 'json',
        data: { 
            name: $('#name').val(), 
            address: $('#address').val(), 
            city: $('#city').val() 
        },
        success:function(data){
            $('#yogibear').html(data);
        }
    });
于 2013-06-18T18:40:02.093 に答える