0

私の目標は、PHPを介して情報を動的に表示し、AJAX/jsonを介して編集できるようにすることです。私はこれをサーバーデータの単一のインスタンスで機能させていますが、複数のインスタンスに入ると、jsonページの配列とメインのjQuery出力で要素とdivのIDを区別する方法に迷っていますページ。

これは現在のメインページです（この質問のPHPレコード取得とは無関係です）。jQueryの参照は完全に正しいわけではありません。

data:$("#form_static_").serialize()

処理方法がわからないstatic_の後に動的識別子を配置しているためです。

<html>
<head>
<title>My Form</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#myForm").submit(function(){
        $.ajax({
            type:"POST",
            url:"ajax_form_test2-json.php",
            data:$("#form_static_").serialize(),
            dataType:"json",
            success:function(msg){
                $("#formResponse_").removeClass('error');
                $("#formResponse_").addClass(msg.status_);
                $("#formResponse_").html(msg.message_);
                $("#static_name_").html(msg.name_);
                $("#static_description_").html(msg.description_);
            },
            error:function(){
                $("#formResponse_").removeClass('success');
                $("#formResponse_").addClass('error');
                $("#formResponse_").html("There was an error submitting the form. Please try again.");
                }
            });
        return false;
    });
});
</script>

</head>
<body>
  <div id="tabs-left-2" class="content">
    <h1 class="page-title">Static Info</h1>
      <?php do { ?>
        <div id="static_name_<?php echo $row_rsStatic['id']; ?>" class="small_content_heading"><?php echo $row_rsStatic['name']; ?></div>
        <div id="static_description_<?php echo $row_rsStatic['id']; ?>" class="small_content"><?php echo $row_rsStatic['description']; ?></div>
        <div id="static_update_<?php echo $row_rsStatic['id']; ?>" style="display:inherit">
        <form id="form_static_<?php echo $row_rsStatic['id']; ?>" name="form_static_<?php echo $row_rsStatic['id']; ?>" method="post" action="">
          <div id="formResponse_<?php echo $row_rsStatic['id']; ?>"></div>
          <div id="form_static_name_<?php echo $row_rsStatic['id']; ?>" class="small_content_heading">
            <input name="id<?php echo $row_rsStatic['id']; ?>" type="hidden" value="<?php echo $row_rsStatic['id']; ?>">
            <input name="name<?php echo $row_rsStatic['id']; ?>" type="text" value="<?php echo $row_rsStatic['name']; ?>"></div>
          <div id="form_static_description_<?php echo $row_rsStatic['id']; ?>">
            <textarea name="description<?php echo $row_rsStatic['id']; ?>"><?php echo $row_rsStatic['description']; ?></textarea>
          <script>CKEDITOR.replace('description<?php echo $row_rsStatic['id']; ?>');</script>
          </div>
        </form>
        </div>    
        <hr>
      <?php } while ($row_rsStatic = mysql_fetch_assoc($rsStatic)); ?>
    </div>
</body>
</html>

これはjsonページですが、プログラムでこれを実現する方法がわからないため、それぞれの「_」の後に動的識別子が省略されています。

<?php
//response array with status code and message
$response_array = array();

//validate the post form
//check the name field
if(empty($_POST['static_name_'])){

    //set the response
    $response_array['status_'] = 'error';
    $response_array['message_'] = 'Name is blank';

//check the message field
} elseif(empty($_POST['static_description_'])) {

    //set the response
    $response_array['status_'] = 'error';
    $response_array['message_'] = 'Description is blank';


//form validated
} else {

//(update record here)

    //set the response
    $response_array['status_'] = 'success';
    $response_array['message_'] = 'Success!';
    $response_array['name_'] = $_POST['static_name_'];
    $response_array['description_'] = $_POST['static_description_'];
}
echo json_encode($response_array);
?>

私はずっとPHPをやっていますが、AJAX / JSON / jQueryの世界に慣れていないので、これが動的に生成/更新されるデータに理想的であるかどうかはわかりません。どんなアイデアやアドバイスも大歓迎です...ありがとう！

編集＃1：ファイルを次のように変更しましたが、正しく更新されないため、まだ何かが不足していることがわかります。

<html>
<head>
<title>My Form</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("form").submit(function(e){
        e.stopPropagation();

        var form = $(this);  // We're going to use this instead of all those IDs
        $.ajax({
            type:"POST",
            url:"ajax_form_test2-json.php",
            data: form.serialize(),
            dataType:"json",
            success:function(msg){
                $(".response", form)
                    .removeClass('error')
                    .addClass(msg.status)
                    .html(msg.message);
                $(".name", form).html(msg.name);
                $(".description", form).html(msg.description);
            },
            error:function(){
                $(".response", form)
                    .removeClass('success')
                    .addClass('error')
                    .html("There was an error submitting the form. Please try again.");
            }
        });
        return false;
    });
});
</script>

</head>
<body>
      <div class="small_content_heading name"><?php echo $row_rsSafety['name']; ?></div>
      <div class="small_content description"><?php echo $row_rsSafety['description']; ?></div>
      <div style="display:inherit">   
        <form method="post" action="">
          <div class="response"></div>
          <div class="small_content_heading">
            <input name="id" type="hidden" value="<?php echo $row_rsSafety['id']; ?>">
            <input name="name" type="text" value="<?php echo $row_rsSafety['name']; ?>">
          </div>
          <div>
            <textarea name="description"><?php echo $row_rsSafety['description']; ?></textarea>
            <script>CKEDITOR.replace('description');
            function CKupdate(){
    for ( instance in CKEDITOR.instances )
        CKEDITOR.instances[instance].updateElement();
}
            </script>
          </div>
          <input type="submit" name="submitForm" value="Edit" onClick="CKupdate();">
        </form>
     </div>    
     <hr>

</body>
</html>

JSONファイル：

<?php
//connect to DB
require_once('Connections/job_tool.php');
mysql_select_db($database_job_tool, $job_tool);

//response array with status code and message
$response_array = array();

//validate the post form
//check the name field
if(empty($_POST['name'])){
    //set the response
    $response_array['status'] = 'error';
    $response_array['message'] = 'Name is blank';
//check the message field
} elseif(empty($_POST['description'])) {
    //set the response
    $response_array['status'] = 'error';
    $response_array['message'] = 'Message is blank';
//form validated
} else {

    //set update variables
    $update_name = $_POST['name'];
    $update_desc = $_POST['description'];
    $update_id = $_POST['id'];

    //update file on server

    $sql = "UPDATE static_fields SET name='$update_name', description='$update_desc' WHERE id='$update_id'";
    $update_sql = mysql_query($sql, $job_tool) or die('Could not update data: ' . mysql_error());
    mysql_close();

    //set the response
    $response_array['status'] = 'success';
    $response_array['message'] = 'Update complete!';
    $response_array['name'] = $_POST['name'];
    $response_array['description'] = $_POST['description'];
}
echo json_encode($response_array);


?>
4

1 に答える 1

0

常にIDを使用するのではなく、jQueryコンテキストとクラスを使用します。

<script type="text/javascript">
$(document).ready(function(){
    $("form").submit(function(e){
        e.stopPropagation();

        var form = $(this);  // We're going to use this instead of all those IDs
        $.ajax({
            type:"POST",
            url:"ajax_form_test2-json.php",
            data: form.serialize(),
            dataType:"json",
            success:function(msg){
                $(".response", form)
                    .removeClass('error')
                    .addClass(msg.status);
                    .html(msg.message);
                $(".name", form).html(msg.name);
                $(".description", form).html(msg.description);
            },
            error:function(){
                $(".response", form)
                    .removeClass('success')
                    .addClass('error')
                    .html("There was an error submitting the form. Please try again.");
            }
        });
        return false;
    });
});
</script>

だから、これではなく：

<div id="static_description_<?php echo $row_rsStatic['id']; ?>" class="small_content"><?php echo $row_rsStatic['description']; ?></div>

代わりにクラスを使用します。

<div class="small_content description"><?php echo $row_rsStatic['description']; ?></div>

アプローチ：

  • DIVにジェネリッククラスを使用する
  • INPUTには一般的な名前を使用します
  • PHP$_POSTハンドラーで、非表示のIDフィールドを使用して、作業しているレコードを確認します
  • JSON応答では、汎用、、、、statusおよびキーを使用しますmessagenamedescription
于 2013-03-19T21:52:14.110 に答える