Dialogbox verschwindet sofort nach dem Anzeigen

Question

ich bin wirklich schlecht in Javascript, jquery..ich muss eine Seite, wo Kurs wird Lehrer zugeordnet werden, und wenn Restkredit des Lehrers ist weniger als Kurs-Kredit, der zugewiesen wird Lehrer dann eine Dialogbox öffnet mit Ja und keine Option, wenn Nein gewählt wird, dann schließt Dialogbox nichts zu tun, wenn ja, dann wird dieser Kurs dem Lehrer zugewiesen und der verbleibende Kredit des Lehrers wird minus.Mein Problem ist mein Dialog Box schließt unmittelbar nach zeigt, und ich habe auch keine Ahnung, wie wenn ja dann in der Datenbank eingefügt wird Wert gewählt wird, bitte helfen, dies ist mein Dialogfeld Code ...

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

       } 


      }); 

ist die HTML-Code ...

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

Controller ....

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); 
    } 

Answer 1

Von dem, was ich kann das Problem beruht in dem $ ("# Eintragen") Schaltfläche klicken in Ihrem Code sehen. Sobald Sie auf den Submit-Button klicken, sehen Sie das Pop-Up, aber die Seite geht auf POST zu Ihrem Controller, was dazu führt, dass die Seite neu geladen wird (so dass Sie das Popup verlieren).

Ich schlage vor, den Typ der Übermittlungsschaltfläche zu ändern, auf "Knopf" wird dies den POST verhindern.

Dann fügen Sie eine ID zu Ihrem Formular, so in Ihrem Javascript-Code können Sie das Formular bei Bedarf mit der Anweisung senden: $ ("# 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(); 
        } 
       }); 

      } 
     }); 

Und Ihre html wie:

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

hoffe, das hilft

So könnte Ihr Code so etwas wie sein!