Question

I have a php page used for an Ajax call. It produces output in the form of a <ul> and <li> items. These items are being used as an auto-complete for an input field on the original page. The problem I am having is finding an elegant way to update other fields, some hidden, after the user clones them, based on the results of this Ajax call and subsequent sql query. Prefer to use jQuery, which I am sure is possible. I just can’t find the easy solution. See all the next().next().next() I am currently using. Ugly!

First the php page:

<?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;
?>

Ok, now here is the HTML for the form:

<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>

Link shows the cloned forms in red brackets.

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

Thanks for any suggestions!

Answer 1

First, instead of outputting every style and behavior for each li, consider moving them to a separate css and javascript files. Your onmouseover and onmouseout for instance could be replaced by hover rules:

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

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

For the values your php script is inserting in the li, you could use HTML5 data attributes. If you clone it, the data will be preserved:

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

For the onclick callback, use jQuery’s on function, that works for both current and future elements as well (including cloned ones):

$('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;
});

Note that I still used next. If you really want to avoid it, you can use additional classes in your 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;

Then refer to it using find or children (using end to return to the previous context):

    $("*:focus").val(data.section)
        .find('.course_title').val(data.title).end()
        .find('.couse_credits').val(data.credits);