0

私は、大学の学部向けに単純な Web ベースのコース スケジューラを作成しており、現在 UI を開発しています。jQuery UI のアコーディオンとソート可能な拡張機能で作成しています。コースの追加・削除や用語の追加・削除ができるように設定しています。

私が直面している問題は、用語が既に HTML ページの一部である場合、すべてが問題なく機能することです。ただし、jQueryで用語OLを追加すると、コースは追加できますが、削除できません。コースを削除しようとすると、Object Expected エラーが発生します。既存の li 要素を別の用語からドラッグしても、それらを新しい用語から削除しようとすると、Object Expected エラーが発生します。

私の考えでは、1) 新しい用語を更新する必要があるか、2) 新しい用語を正しく初期化していません。以下は私のjavascriptです。

リクエストがあれば、html コードを共有できますが、これは JavaScript 関数を呼び出すボタンを備えた単なるフォームです。

// Remove selected courses from term
function remCourse(term) {
var termDiv = '#term' + term + 'classes';

    $(termDiv).children().children().children(":checked").each(function() {
      $(this).parent().parent().remove();
    });
}

// Add course to term
function addCourse(term) {
var termDiv = '#term' + term + 'classes';

var course = $(termDiv).children().length + 1;

$(termDiv).append('<li class="ui-state-active"><span class="courseAction"><input name="' + term + 'c' + course + 'box" type="checkbox" /> Dept & Num: <input type="text" id="' + term + 'c' + course + 'num" name="' + term + 'c' + course + 'num" size="8" maxlength="6" /> Credits: <input type="text" id="' + term + 'c' + course + 'cred" name="' + term + 'c' + course + 'cred" size="4" maxlength="3" /> # of Meetings: <input type="text" id="' + term + 'c' + course + 'meet" name="' + term + 'c' + course + 'meet" size="8" maxlength="6" /> Title: <input type="text" id="' + term + 'c' + course + 'num" name="' + term + 'c' + course + 'num" size="20" maxlength="50" /> </span></li>'
);
}

// Remove selected terms
function remTerm() {
  $("#terms").children().children().children(":checked").each(function() {
    $(this).parent().parent().remove();
  });
}

// Add new term
function addTerm(term) {
var termDiv = '#term' + term + 'classes';

$("#terms").append('<div id="term' + term + '" class="connectedTerms"> <h4 class="ui-widget-header"><input class="tbox" name="t' + term + 'box" type="checkbox" />Term ' + term + '<input id="addCourse' + term + '" type="button" onclick="addCourse(this.id.substring(9))" value="Add Course" class="ui-button-text-only" /> <input id="remCourse' + term + '" type="button" onclick="removeCourse(this.id.substring(9))" value="Remove Selected Courses" class="ui-button-text-only" /> </h4> <ol id="term' + term + 'classes" class="connectedSortable"> <li class="ui-state-active"><span class="courseAction"> <input name="' + term + 'c1box" type="checkbox" /> Dept & Num: <input type="text" id="' + term + 'c1num" name="' + term + 'c1num" size="8" maxlength="6" /> Credits: <input type="text" id="' + term + 'c1cred" name="' + term + 'c1cred" size="4" maxlength="3" /> # of Meetings: <input type="text" id="' + term + 'c1meet" name="' + term + 'c1meet" size="8" maxlength="6" /> Title: <input type="text" id="' + term + 'c1num" name="' + term + 'c1num" size="20" maxlength="50" /> </span></li> </ol> </div>'
);

$(termDiv).sortable({
    connectWith: ".connectedSortable",
    dropOnEmpty: true,
    placeholder: "ui-state-highlight"
}).disableSelection();

    // I tried doing a refresh below, but it just gave me an error
    // so I commented it out.
//$(termDiv).sortable('refresh');

}
4

1 に答える 1

-1

私はそれが私の側の単純なタイプミスであることに気づきました。addTerm() JavaScript コードでは、remTerm() 関数の代わりに removeTerm() 関数を呼び出す [選択したコースを削除] ボタンを使用しました。ため息タイプミスをやめることはできますか？

修正されたコードは次のとおりです。

// Add new term
function addTerm(term) {
var termDiv = '#term' + term + 'classes';

$("#terms").append('<div id="term' + term + '" class="connectedTerms"> <h4 class="ui-widget-header"><input class="tbox" name="t' + term + 'box" type="checkbox" />Term ' + term + '<input id="addCourse' + term + '" type="button" onclick="addCourse(this.id.substring(9))" value="Add Course" class="ui-button-text-only" /> <input id="remCourse' + term + '" type="button" onclick="remCourse(this.id.substring(9))" value="Remove Selected Courses" class="ui-button-text-only" /> </h4> <ol id="term' + term + 'classes" class="connectedSortable"> <li class="ui-state-active"><span class="courseAction"> <input name="' + term + 'c1box" type="checkbox" /> Dept & Num: <input type="text" id="' + term + 'c1num" name="' + term + 'c1num" size="8" maxlength="6" /> Credits: <input type="text" id="' + term + 'c1cred" name="' + term + 'c1cred" size="4" maxlength="3" /> # of Meetings: <input type="text" id="' + term + 'c1meet" name="' + term + 'c1meet" size="8" maxlength="6" /> Title: <input type="text" id="' + term + 'c1num" name="' + term + 'c1num" size="20" maxlength="50" /> </span></li> </ol> </div>'
);

$(termDiv).sortable({
    connectWith: ".connectedSortable",
    dropOnEmpty: true,
    placeholder: "ui-state-highlight"
}).disableSelection();

}
于 2013-03-14T13:50:56.160 に答える