2017-02-03 22 views
-1

私はJavaScriptが本当に悪いです.jquery..iはコースに先生が割り当てられるページを作成しなければならず、教師の残りのクレジットが割り当てられているコースクレジット未満の場合教師がyesとnoのオプションでダイアログボックスを開きます。もしnoが選択されていれば、ダイアログボックスは何もしないで終了します。もしそうなら、そのコースは教師に割り当てられ、教師の残りのクレジットはマイナスになります。ボックスが表示直後に閉じている、とも私はイエスが選択されている場合、その値がデータベースに挿入されるか見当もつかない、 これは私のダイアログボックスのコードで助けてください...ダイアログボックスが表示された直後に消えています

$("#submit").click(function() { 
       var courseCredit = $("#courseCredit").val(); 
       var remainingCredit = $("#remainingCredit").val(); 
       if (remainingCredit < courseCredit) { 
        //var dialog = $("#dialog"); 
        $('<div title="Confirm Box"></div>').dialog({ 
         open: function (event, ui) { 
          $(this).html("Yes or No question?"); 
         }, 
         autoOpen:true, 
         resizable: false, 
         width:'auto', 
         modal: true, 
         buttons: { 
          'Yes': function() { 
           $(this).dialog('close'); 
          }, 
          'No': function() { 
           $(this).dialog('close'); 
          } 
         }, 
         close: function (event,ui) { 
          $(this).remove(); 
         } 
        }); 

       } 


      }); 

これはHTMLコードです...

<form method="POST"> 
      <table> 
       <tr> 
        <td> 
         <label>Department</label> 
         <select name="departmentId" id="departmentId"> 
          <option value="">Select...</option> 
          @foreach (var department in departments) 
          { 
           <option value="@department.DepartmentId">@department.DepartmentName</option> 
          } 
         </select> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <label>Teacher</label> 
         <select name="teacherId" id="teacherId"> 
          <option value="0">Select...</option> 
         </select> 

        </td> 
       </tr> 

       <tr> 
        <td> 
         <label>Credit to be taken</label> 
         @*@Html.TextBoxFor(d=>d.)*@ 
         <input type="text" name="creditTaken" id="creditTaken" readonly value="@Model.CreditTaken" /> 

        </td> 
       </tr> 
       <tr> 
        <td> 
         <label>Remaining Credit</label> 
         <input type="text" name="remainingCredit" id="remainingCredit" readonly value="@Model.RemainingCredit" /> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <label>Course Code</label> 
         <select name="courseId" id="courseId"></select> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <label>Name</label> 
         <input type="text" name="courseName" id="courseName" readonly /> 
        </td> 
       </tr> 
       <tr> 
        <td> 
         <label>Credit</label> 
         <input type="email" name="courseCredit" id="courseCredit" readonly /> 
        </td> 
       </tr> 

       <tr> 
        <td> 
         <input type="submit" name="submit" id="submit" value="Assign"/> 
        </td> 
       </tr> 
       <tr> 

        <td> 
         @if (ViewBag.ValidationMsg != null) 
         { 
          <p>@ViewBag.ValidationMsg</p> 
         } 
        </td> 
       </tr> 
      </table> 

     </form> 

コントローラ....問題は$に依存している私はあなたのコード内で見ることができますから、

public ActionResult CourseAssign(CourseAssign courseAssign) 
    { 

     var departments = _departmentManager.GetAllDepartments(); 

     ViewBag.Departments = departments; 


      courseAssign.RemainingCredit = courseAssign.RemainingCredit - courseAssign.CourseCredit; 
      int rowAffected = _teacherManager.InsertCourseAssign(courseAssign); 

      if (rowAffected > 0) 
      { 
       ViewBag.ValidationMsg = "Successfull."; 
       return View(courseAssign); 
      } 
      ViewBag.ValidationMsg = "This course is already assigned."; 
      return View(courseAssign); 
     //} 
     //ViewBag.Checkmsg = "This course is already assigned."; 
     //return View(courseAssign); 
    } 

答えて

1

( "#が提出")ボタンをクリック。送信ボタンをクリックするとすぐにポップアップが表示されますが、ページがコントローラにPOSTされ、ページがリロードされます(ポップアップが失われます)。

送信ボタンのタイプを「ボタン」に変更することをお勧めします。これはPOSTを防止します。

あなたのフォームにIDを追加してください。あなたのjavascriptコードでは、必要に応じて次の命令を使ってフォームを送信できます:$( "#formid"); submit();

だからあなたのコードのようなものが考えられます。

$("#submit").click(function() { 
      var courseCredit = $("#courseCredit").val(); 
      var remainingCredit = $("#remainingCredit").val(); 
      if (remainingCredit < courseCredit) { 
       //var dialog = $("#dialog"); 
       $('<div title="Confirm Box"></div>').dialog({ 
        open: function (event, ui) { 
         $(this).html("Yes or No question?"); 
        }, 
        autoOpen:true, 
        resizable: false, 
        width:'auto', 
        modal: true, 
        buttons: { 
         'Yes': function() { 
          $("#formid").submit(); // submit to save in db 
         }, 
         'No': function() { 
          $(this).dialog('close'); 
         } 
        }, 
        close: function (event,ui) { 
         $(this).remove(); 
        } 
       }); 

      } 
     }); 

し、HTMLのような:

<form method="POST" id="formid"> 
     <table> 
      <tr> 
       <td> 
        <label>Department</label> 
        <select name="departmentId" id="departmentId"> 
         <option value="">Select...</option> 
         @foreach (var department in departments) 
         { 
          <option value="@department.DepartmentId">@department.DepartmentName</option> 
         } 
        </select> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <label>Teacher</label> 
        <select name="teacherId" id="teacherId"> 
         <option value="0">Select...</option> 
        </select> 

       </td> 
      </tr> 

      <tr> 
       <td> 
        <label>Credit to be taken</label> 
        @*@Html.TextBoxFor(d=>d.)*@ 
        <input type="text" name="creditTaken" id="creditTaken" readonly value="@Model.CreditTaken" /> 

       </td> 
      </tr> 
      <tr> 
       <td> 
        <label>Remaining Credit</label> 
        <input type="text" name="remainingCredit" id="remainingCredit" readonly value="@Model.RemainingCredit" /> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <label>Course Code</label> 
        <select name="courseId" id="courseId"></select> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <label>Name</label> 
        <input type="text" name="courseName" id="courseName" readonly /> 
       </td> 
      </tr> 
      <tr> 
       <td> 
        <label>Credit</label> 
        <input type="email" name="courseCredit" id="courseCredit" readonly /> 
       </td> 
      </tr> 

      <tr> 
       <td> 
        <input type="button" name="submit" id="submit" value="Assign"/> 
       </td> 
      </tr> 
      <tr> 

       <td> 
        @if (ViewBag.ValidationMsg != null) 
        { 
         <p>@ViewBag.ValidationMsg</p> 
        } 
       </td> 
      </tr> 
     </table> 

    </form> 

・ホープ、このことができます!

関連する問題