0

PHP(バージョン5.3)でjQuery(バージョン1.8.1)を使用して、mySQLデータベースにエントリを追加するフォームを送信しています。最初の送信ですべてが正常ですが、ページを更新せずに後続の送信ごとに追加されます。追加のエントリ。

さらに、UIでBootstrap(バージョン2.1.1)とJasny for Bootstrap(バージョンj1a)からのアップロードウィジェットも使用しています。実装中に重複の問題を検出したため、アップロードウィジェットを処理または送信にまだ接続していません。

これは概念実証システムであるため、プロジェクトが確認されるまでクリーンアップに投資するつもりはないため、コードは大まかなものであることに注意してください。このため、いくつかのインラインmySQLクエリに気付くでしょう。これが最善の方法ではないことはわかっていますが、デモンストレーションの目的で機能し、後でクリーンアップされます。また、POCシステムとして現在内部サーバー上にあるため、コードを共有することはできますが、残念ながら現時点ではサンプルサイトを表示できません。

さて、問題に戻ります。例として、「Company 1」の最初の投稿には、「Company 1」に1つのレコードが追加され、「Company 2」の2番目のレコードには、「Company 2」に2つのレコードが追加され、「Company2」の3番目のレコードが追加されます。 Company 3」は、「Company3」などに3つのレコードを追加します。フォームページを何らかの方法(更新または新しいリクエスト)でリロードすると、最初の送信から問題が再開します。

私はjQueryserializeを使用ajaxしてデータをPHPプロセッサに投稿しています。foreachプロセッサが受信したすべての投稿をログに記録しましたが、プロセッサがフォームから複数のレコードを受信して​​いることがわかりました。PHPのループが原因である可能性があると思いましたが、そうではありません。

jQuery関数を削除しましたが、通常のPHP送信で重複することなく毎回完全に機能します。代わりにjQueryを介して手動でエントリを処理しましたserializeが、PHPを介した動的配列がまだserializeその配列で使用されているため、上記のように重複が生成されました。私は何日も問題を検索しましたが、問題を解決するための決定的なものを見つけることができません。関連していると思われるブログやフォーラムのすべての提案が機能しませんでした。約10〜15の異なるオプションを試しました。

これらすべての組み合わせにより、問題はjQueryserializeajax関数に起因していると思いますが、このコードを見るたびに目が眩んでしまいます。

また、フォームを外部ファイルに配置し、ajaxを介して新しく再ロードするか、フォームをクリーンアップして、必要な新しいエントリごとにjQueryを介してデフォルトに戻すことを検討していますが、これらのアプローチのいずれも問題を解決するとは思われません。

助けてくれてありがとう!

jQUERYコード

<script>
    $(document).ready(function() {
        $('.fileupload').fileupload('name:logo');
        $('.help-inline').hide();
        $("#btn_process").click(function() {
            $('form').submit(function() {
            $('.help-inline').hide();  
            var company_name = $("#company_name").val();  
            if (company_name === "") { 
                $("div#name_group").addClass("error");
                $("span#name_error").show();   
                return false;  
            } 
            var dataString = $('form').serialize();
            $.ajax({
                type: "POST",
                url: "inc/addcompany.php",
                data: dataString,
                success: function(html) {
                    if(html === 'success') 
                    {
                        $('#message')
                        .addClass("label label-success")
                        .css("margin-bottom","20px")
                        .html("<h3>Login successful</h3><p>Company added</p>")
                        .slideDown(1500, function() {});
                    }
                    else 
                    {
                        $('#message')
                        .addClass("label label-important")
                        .css("margin-bottom","20px")
                        .html("<h3>Error</h3><p>There was an error, please check the information and try again</p>")
                        .slideDown(1500, function() {});
                        $("div#name_error").addClass("error"); 
                        $("span#name_error").show(); 
                        $("div#type_error").addClass("error");
                        $("span#type_error").show();   
                        return false;  
                    }
                }
            });
            return false;
        }); 
    });
});
</script>

HTMLマークアップ

<form class="form-horizontal" id="add_company" method="POST" action="">  
                <fieldset>
                        <div id="message"></div>
                        <div id="name_group" class="control-group">
                            <label class="control-label" for="company_name">Company name </label>
                            <div class="controls">
                                <input type="text" id="company_name" name="company_name" />
                                <span id="name_error" class="help-inline">This needs to be more than 3 characters</span>
                            </div>
                        </div>
                        <div id="type_group" class="control-group">
                            <label class="control-label">Company type </label>
                            <div class="controls">
                            <?
                            $sql = "SELECT description,id FROM types ORDER BY description";
                            $qry = mysql_query($sql) or die("ERROR: could not get company types => ".mysql_error());
                            while($company_type = mysql_fetch_array($qry)) { 
                                echo '
                                <label class="checkbox inline"><input type="checkbox" name="type[]" value="'.$company_type['id'].'" /> '.$company_type['description'].' </label>';
                            }
                            ?>
                            <span id="type_error" class="help-inline">Please select a minimum of 1 type</span>
                            </div>
                        </div>
                        <div id="website_group" class="control-group">
                            <label class="control-label" for="website">Website </label>
                            <div class="controls">
                                <input type="text" id="website" name="website" placeholder="www.something.com" />
                            </div>
                        </div>
                        <div id="logo_group" class="control-group">
                            <label class="control-label">Logo </label>
                            <div class="controls">
                                <div class="fileupload fileupload-new" data-provides="fileupload">
                                <div class="fileupload-new thumbnail" style="width: 50px; height: 50px;"><img src="/img/50x50.png" /></div>
                                <div class="fileupload-preview fileupload-exists thumbnail" style="width: 50px; height: 50px;"></div>
                                <span class="btn btn-file"><span class="fileupload-new">Select image</span>
                                <span class="fileupload-exists">Change</span>
                                <input type="file" /></span>
                                <a href="#" class="btn fileupload-exists" data-dismiss="fileupload">Remove</a>
                            </div>
                        </div>
                </fieldset>
                <input type="hidden" name="action" value="add_company" />
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary" name="btn_process" id="btn_process">Save changes</button>
  </form>

PHPプロセッサ

$error = false;
$error_company_name = false;
$error_type = false;
$error_website = false;
$company_name = $_REQUEST['company_name'];
$type = $_REQUEST['type'];
$website = $_REQUEST['website'];
$logo = $_REQUEST['logo'];

if(empty($company_name)) {
    $error = true;
    $error_company_name = true;
}
include_once('db.php');
$sql = "SELECT description,id FROM company_types";
$qry = mysql_query($sql) or die("ERROR: could not get company types => ".mysql_error());
$type_count = 0;
while($array = mysql_fetch_array($qry)) {
    $type_count = $type_count+1;
}
if($type_count == 0) {
    $error = true;
    $error_type = true;
}
$ic = 0;
foreach($_REQUEST['type'] as $item) {
    $ic = $ic+1;
}
if($ic == 0) {
    $error = true;
    $error_type = true;
}
if(isset($website) && $website != ' ') {
    $url = 'http://'.$website;
    if(!filter_var($url, FILTER_VALIDATE_URL)) {
        $error = true;
        $error_website = true;
    }
}
if($error == false) {
    $sql = "INSERT INTO company_list (name,website,logo) VALUES('$company_name','$website','$logo')";
    $qry = mysql_query($sql) or die ("ERROR: could not add company => ".mysql_error());
    $company_id = mysql_insert_id($link);
    if($company_id == '' || $company_id == null || empty($company_id)) {
        echo 'fail';
        exit;
    } 
    foreach($_REQUEST['type'] as $company_type) {
        $sql = "INSERT INTO companies_types (companies_id,type_id) VALUES('$company_id','$company_type')";
        $qry = mysql_query($sql) or die("ERROR: could not link company type: => ".mysql_error());
    }
    echo 'success';
}
4

2 に答える 2

4

$('form').unbind('submit');この行のすぐ上に追加します: $('form').submit(function()

私はここでこの解決策を見つけました:https ://stackoverflow.com/a/668354/300575

注:コードをコピーしてサーバーでテストすることにより、これが機能することを確認しました。

于 2012-09-09T16:06:45.217 に答える
0

それはパッチであり、それが機能するかどうかはわかりませんがajaxStop、成功したコールバックで呼び出すことができるjQueryがあります。

于 2012-09-09T16:20:05.880 に答える