html дизайн испорчен после ответа на вызов ajax

Question

Я работаю над одностраничным приложением, используя множество аякс-вызовов для извлечения и хранения данных .... Я также использую .show() и .hide() методы, чтобы сделать страницу удобной .... Как можно видеть, два дивы участвует в шкурой и показать

каждая функция работает отлично, каждый вызов Ajax, соответственно правильно .... дизайн перепутались после последнего звонка я опишу наконец мой вопрос ...

Html

<section class="block remove-top" id="contact-us" style="display: none;"> 
<div id="message"></div> 
<form method="post" name="contactform" id="contactform"> 
<div class="row"> 
    <div class="col-md-12"> 
    <div id="selectedPackage"></div> 
    </div> 

    <div class="col-md-12"> 
    <label>Email *</label> 
    <input name="Email" type="text" id="Email" placeholder="Your Email" /> 
    <div id="emailCkh" style="font-size: medium; font-weight: normal; color: red;"></div></div> 

    <div class="col-md-12"> 
    <label>Password *</label> 
    <input name="password" type="password" id="password" class="input-style" placeholder="Enter Password" /> 
    </div> 

    <div class="col-md-12"> 
    <label>Confirm Password *</label> 
    <input name="confirmpassword" type="password" id="confirmpassword" class="input-style" placeholder="re-enter password" /> 
    <div id="pass" style="font-size:medium;font-weight:normal;color:red;"></div> 
    </div> 
    </div> 
    </form> 
</section> 

<section class="block remove-top" id="SecondInfo" style="display: none;"> 
</section> 

Ajax вызов

<script> 
    $("#btnSubmit").click(function() { 
     var pkg = '@HttpContext.Current.Session["Package"]' 
     data = $('#password').val(); 
    var len = data.length; 
    if(len < 1) { 
     $("#pass").html("Password cannot be empty"); 
     event.preventDefault(); 
    }  
    else if($('#password').val() != $('#confirmpassword').val()) { 
     $("#pass").html("Password should match"); 
     event.preventDefault(); 
    } 
    else 
    { 
     var Email = $('#Email').val(); 
     var password = $('#password').val(); 
     $.ajax({ 
      type: "POST", 
      url: '@Url.Action("Submit", "Home")', 
      dataType: "JSon", 
      data: {"Email": Email, "password": password}, 
      success: function (data) { 
       if (data == "success") { 
        if (pkg == 5) { 
         $('#contact-us').hide(); 
         $('#scc').show(); 
         $('contact-us').animate({ scrollTop: $('#scc').offset().top }, 'slow'); 
        } 
        else { 
         $('#contact-us').hide(); 
         $('#SecondInfo').show(); 
         $('contact-us').animate({ scrollTop: $('#SecondInfo').offset().top }, 'slow'); 
        } 
       } 
       else if (data == "fail") { 
        $("#emailCkh").html("Email Exists"); 
       } 
       else 
       { 
        $("#emailCkh").html("Server Error"); 
       } 
      }, 
      error: function (data, jqXHR, exception) { 
       //some errors defined 
      } 
      }); 
    } 
     }); 
</script> 

К сожалению для размещения большой части моего кода, хотя у меня есть укоротить. Проблема возникает, когда вызванная часть { data == "fail" } .... Она обновит div, который сообщит пользователю, что он ввел электронное письмо, которое уже находится в db, попробуйте другое .... Div обновлено успешно и через 2,3 секунды весь html messesd up ....

В чем может быть причина или любая идея ...?

Некоторые скриншоты для лучшего взгляда (браузер уменьшения для полного просмотра) ...

перед тем

после

Answer 1

Запуск через код, который я видел некоторые неровности, не уверены, что они исправит вашу проблему, но, возможно, стоит попробовать, после того, как я решил, что я думаю, может быть ошибками I c ome вверх с этим кодом:

<script> 
    $("#btnSubmit").click(function (event) { 
     var pkg = '@HttpContext.Current.Session["Package"]' 
     data = $('#password').val(); 
    var len = data.length; 
    if(len < 1) { 
     $("#pass").html("Password cannot be empty"); 
     event.preventDefault(); 
    }  
    else if($('#password').val() != $('#confirmpassword').val()) { 
     $("#pass").html("Password should match"); 
     event.preventDefault(); 
    } 
    else 
    { 
     var Email = $('#Email').val(); 
     var password = $('#password').val(); 
     $.ajax({ 
      type: "POST", 
      url: '@Url.Action("Submit", "Home")', 
      dataType: "JSon", 
      data: {"Email": Email, "password": password}, 
      success: function (data) {      
       if (data == "success") { 
        $('#contact-us').hide(); 
        if (pkg == 5) {        
         $('#scc').show(); 
         $('#contact-us').animate({ scrollTop: $('#scc').offset().top }, 'slow'); 
        } 
        else { 
         $('#SecondInfo').show(); 
         $('#contact-us').animate({ scrollTop: $('#SecondInfo').offset().top }, 'slow'); 
        } 
       } 
       else if (data == "fail") { 
        $("#emailCkh").html("Email Exists"); 
       } 
       else 
       { 
        $("#emailCkh").html("Server Error"); 
       } 
      }, 
      error: function (data, jqXHR, exception) { 
       //some errors defined 
      } 
      }); 
    } 
}); 
</script> 

Не обращайте внимания на плохое форматирование.

Что я сделал:

Добавлена ​​переменным событие в функции мышей (для event.preventDefault(), даже не уверен, если это необходимо, но это выглядит cleanr и лучше читаемый IMO) Поместите свой $ ('# контакт . -us') скрыть(); за пределами видимости if/else, поскольку он вызывался как в блоке if, так и в блоке Изменено $ ('contact-us'). animate() до $ ('# contact-us'). animate()