0

Ajax呼び出しに使用されるphpページがあります。<ul>aと<li>itemsの形式で出力を生成します。これらのアイテムは、元のページの入力フィールドのオートコンプリートとして使用されています。私が抱えている問題は、このAjax呼び出しとそれに続くSQLクエリの結果に基づいて、ユーザーがクローンを作成した後に、他のフィールドを更新するための洗練された方法を見つけることです。jQueryを使用することをお勧めします。これは可能だと確信しています。簡単な解決策が見つかりません。私が現在使用しているすべてのnext（）。next（）。next（）を参照してください。ぶさいくな！

最初のphpページ：

<?PHP
include "dbconnect.php";

$partialSection=$_POST['partialSection'];
$school_id=$_POST['school_id'];


$sql="select course_section_code,course_name,course_credit_hours,school_id,ext_course_id from ext_courses 
 where course_section_code like '%$partialSection%' and school_id = $school_id";
$result = db_query($sql); 
    if (mysql_num_rows($result)==0){
        echo "<DIV>No external courses match your query for $partialSection at $school_id. Would you like to enter a new course? <button onclick='new_section()'>Yes</button></DIV>";
    }
    $output="<ul>";
    while ($record = get_record($result))
        {
            $section=$record['course_section_code'];
            $course_title=$record['course_name'];
            $credits=$record['course_credit_hours'];
            $school_id=$record['school_id'];
            $ext_course_id=$record['ext_course_id'];
            $output.="<li class=resultcss onmouseover='this.style.color=\"63b8ee\";this.style.backgroundColor=\"FFFFFF\"' onmouseout='this.style.color=\"FFFFFF\";this.style.backgroundColor=\"63b8ee\"' onclick='$(\".popup\").hide();$(\"*:focus\").val(\"".$section."\");$(\"*:focus\").next().next().next().val(\"".$course_title."\");$(\"*:focus\").next().next().next().next().next().val(\"".$credits."\");enter_data.ext_course_id0.value=\"".$ext_course_id."\"'>".$section."</li>";

        }
        $output.="</ul>";
    echo $output;
?>

さて、これがフォームのHTMLです。

<div class="cloneMe">
            <div>

                <label for="course_section0" class="">Section: <span class="requiredField">*</span></label>
                <input type="text" class="cinputs needsPopup" name="course_section[]" id="course_section0" size="8" onfocus="check_contents();" ONKEYUP="get_section(this.value,$('#school_id').val());" autocomplete="off">&nbsp;
                <input type="hidden" class="" name="ext_course_id[]" id="ext_course_id0">
                <label for="course_name0" class="">Name: <span class="requiredField">*</span></label>
                <input type="text" class="cinputs" name="course_name[]" id="course_name0" size="30">&nbsp;
                <label for="course_credits0" class="">Credits: <span class="requiredField">*</span></label>
                <input type="text" class="cinputs" name="course_credits[]" id="course_credits0" size="3">&nbsp;
                <label for="course_grade0" class="">Grade: <span class="requiredField">*</span></label>
                <select class="cinputs" name="course_grade[]" id="course_grade0">
                    <option>Grade:</option>
                    <option>A</option>
                    <option>A-</option>
                    <option>B+</option>
                    <option>B</option>
                    <option>B-</option>
                    <option>C+</option>
                    <option>C</option>
                    <option>C-</option>
                    <option>D+</option>
                    <option>D</option>
                    <option>D-</option>
                    <option>F</option>
                    <option>P</option>
                    <option>CR</option>
                    <option>NC</option>
                    <option>IP</option>
                    <option>I</option>

                </select>&nbsp;
                <label for="hours_awarded0" class="">Hours Awarded: <span class="requiredField">*</span></label>
                <input type="text" class="cinputs" name="hours_awarded[]" id="hours_awarded0" size="3">&nbsp;
                <label for="baker_equiv0" class="">Baker Equivalent: <span class="requiredField">*</span></label>     
                <input type="text" class="cinputs needsPopup" name="baker_equiv[]" id="baker_equiv0" size="8" ONKEYUP="get_equiv(this.value);">&nbsp;<input type="hidden" class="" name="baker_equiv_id[]" id="baker_equiv_id0">
                 <label for="quest0" class="">Quest: <span class="requiredField">*</span></label>
                <input type="text" class="cinputs" name="quest[]" id="quest0" size="3">&nbsp;
                <button type="button" class="clone">Add Course</button>
                    <button type="button" class="remove">Remove</button> 
            </div>

リンクは、複製されたフォームを赤い括弧で囲んで示しています。

http://www.rp-software.com/Screenshot.JPG

提案をありがとう！

4

1 に答える 1

0

まず、それぞれのすべてのスタイルと動作を出力する代わりに、liそれらを別々のcssファイルとjavascriptファイルに移動することを検討してください。たとえば、あなたonmouseoverとはホバールールに置き換えることができます。onmouseout

.resultcss {
    color:#FFFFFF;
    background-color:#63b8ee;
}

.resultcss:hover {
    color:#63b8ee;
    background-color:#FFFFFF;
}

phpスクリプトがに挿入する値には、HTML5属性liを使用できます。dataクローンを作成すると、データは保持されます。

$output.="<li class='resultcss' data-section='".$section."' data-title='".$course_title."' data-credits='".$credits."' data-id='".$ext_course_id."'>".$section."</li>";

コールバックには、現在の要素と将来の要素（複製された要素を含む）の両方で機能onclickするjQueryの関数を使用します。on

$('body').on('click', '.resultcss', function(e) {
    var data = $(this).data();
    $(".popup").hide();
    $("*:focus").val(data.section)
        .next().next().next().val(data.title)
        .next().next().val(data.credits);
    enter_data.ext_course_id0.value = data.id;
});

まだ使用していることに注意してくださいnext。本当に避けたい場合は、htmlで追加のクラスを使用できます。

<input type="text" class="cinputs course_title" name="course_name[]" id="course_name0" size="30">&nbsp;
<input type="text" class="cinputs course_credits" name="course_credits[]" id="course_credits0" size="3">&nbsp;

次に、findまたはchildren（end前のコンテキストに戻るために使用）を使用して参照します。

    $("*:focus").val(data.section)
        .find('.course_title').val(data.title).end()
        .find('.couse_credits').val(data.credits);
于 2012-09-18T20:37:29.930 に答える