Saturday, March 12, 2016

Clear boostrap modal on hide or close

When I am working with MVC project I had a requirement like to clear all the errors and text entered inside a bootstrap modal. So that when I opened the modal again I could see a plain binding.


  1. $("#myModal").on("hidden.bs.modal", function () {  
  1.         $("#guest_form input[type='text'],input[type='password']").val('');  
  2.         $("#guest_form input[type='text'],input[type='password']").each(function () {  
  3.             $(this).removeClass('form-control input-validation-error');  
  4.             $(this).addClass("form-control");  
  5.         });  
  6.         $(".field-validation-error").text('');  
  7.     });  

Initially my modal looks as follows


On submitting the modal without entering any data here my modal looks as follows











On closing the modal and opening it again I am still seeing the errors on my modal













What I need is I would like to clear all the validations and the classes which got applied using MVC validations so that it should again show me the original screen as follows


 Try the above code and give a try, which will clear all the errors and entered text when you close and open the modal again . If you are facing any issues let me know.

Happy Coding :)
Posted by at No comments:
Labels: ,

Removing a Section from Div or Literal Dynamically

This will be helpful to some one who is looking for similar kind of scenario. What I explained here is a bit simple piece of code but to achieve that in my application as per my need I struggled to find the appropriate one.

My design which is static but this one is actually I am framing dynamically in my application and also here I am showing one section where as in my application there are multiple section where I can have duplicate records. When I am removing data I need to make inactive in one section and need to remove entire div in one section.

This is continuation for my code snippet here. This is the actual problem I have in my application. For basic one check my code here,

 http://dorababu-meka.blogspot.in/2016/03/removing-section-from-div-or-literal.html

This is how my design and entire code looks like, please find the attached code for further reference, 
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="favandprev.aspx.cs" Inherits="AP.ROW.UI.favandprev" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title></title>  
  8.     <link href="css/literal.css" rel="stylesheet" />  
  9.     <script src="scripts/jquery-2.2.0.js"></script>  
  10. </head>  
  11. <body>  
  12.     <form id="form1" runat="server">  
  13.         <div id="no-list">  
  14.             No Data  
  15.         </div>  
  16.         <div id="literal-list" class="literal-offer">  
  17.             <table style="height: 20px">  
  18.                 <tbody>  
  19.                     <tr>  
  20.                         <td style="vertical-align: middle">  
  21.                             <h3>Favorite List</h3>  
  22.                         </td>  
  23.                     </tr>  
  24.                 </tbody>  
  25.             </table>  
  26.             <div class="literal-offer-product">  
  27.                 <div class="image-wrap">  
  28.                     <img class="checkout-offer-img" src="/Images/jerry.png" />  
  29.                 </div>  
  30.                 <div class="literal-offer-info">  
  31.                     <strong>I am Jerry</strong><br />  
  32.                     <br />  
  33.                     <a id="removeLiteral0" class="favorite active" onclick="javascript:return removeMe(this,'Y');">Favorite</a>  
  34.                 </div>  
  35.             </div>  
  36.             <div class="clear"></div>  
  37.             <div class="literal-offer-product">  
  38.                 <div class="image-wrap">  
  39.                     <img class="checkout-offer-img" src="/Images/superman.jpg" />  
  40.                 </div>  
  41.                 <div class="literal-offer-info">  
  42.                     <strong>I am Super Man</strong><br />  
  43.                     <br />  
  44.                     <a id="removeLiteral1" class="favorite active" onclick="javascript:return removeMe(this,'Y');">Favorite</a>  
  45.                 </div>  
  46.             </div>  
  47.             <div class="clear"></div>  
  48.             <div class="literal-offer-product">  
  49.                 <div class="image-wrap">  
  50.                     <img class="literal-offer-img" src="/Images/skate.png" />  
  51.   
  52.                 </div>  
  53.                 <div class="literal-offer-info">  
  54.                     <strong>Skate Board</strong><br />  
  55.                     <br />  
  56.                     <a id="removeLiteral2" class="favorite active" onclick="javascript:return removeMe(this,'Y');">Favorite</a>  
  57.                 </div>  
  58.             </div>  
  59.             <div class="clear"></div>  
  60.             <div class="literal-offer-product">  
  61.                 <div class="image-wrap">  
  62.                     <img class="literal-offer-img" src="/Images/bsnl.jpg" />  
  63.   
  64.                 </div>  
  65.                 <div class="literal-offer-info">  
  66.                     <strong>BSNL</strong><br />  
  67.                     <br />  
  68.                     <a id="removeLiteral3" class="favorite active" onclick="javascript:return removeMe(this,'Y');">Favorite</a>  
  69.                 </div>  
  70.             </div>  
  71.             <div class="clear"></div>  
  72.             <div class="literal-offer-product">  
  73.                 <div class="image-wrap">  
  74.                     <img class="literal-offer-img" src="/Images/pendrive.jpg" />  
  75.   
  76.                 </div>  
  77.                 <div class="literal-offer-info">  
  78.                     <strong>Pen Drive</strong><br />  
  79.                     <br />  
  80.                     <a id="removeLiteral4" class="favorite active" onclick="javascript:return removeMe(this,'Y');">Favorite</a>  
  81.                 </div>  
  82.             </div>  
  83.         </div>  
  84.   
  85.         <div id="previously-viewed" class="literal-offer">  
  86.             <table style="height: 20px">  
  87.                 <tbody>  
  88.                     <tr>  
  89.                         <td style="vertical-align: middle">  
  90.                             <h3>Previously Viewed</h3>  
  91.                         </td>  
  92.                     </tr>  
  93.                 </tbody>  
  94.             </table>  
  95.             <div class="literal-offer-product">  
  96.                 <div class="image-wrap">  
  97.                     <img class="checkout-offer-img" src="/Images/jerry.png" />  
  98.                 </div>  
  99.                 <div class="literal-offer-info">  
  100.                     <strong>I am Jerry</strong><br />  
  101.                     <br />  
  102.                     <a id="removeLiteral0" class="favorite active" onclick="javascript:return removeMe(this,'N');">Favorite</a>  
  103.                 </div>  
  104.             </div>  
  105.             <div class="clear"></div>  
  106.             <div class="literal-offer-product">  
  107.                 <div class="image-wrap">  
  108.                     <img class="checkout-offer-img" src="/Images/superman.jpg" />  
  109.                 </div>  
  110.                 <div class="literal-offer-info">  
  111.                     <strong>I am Super Man</strong>  
  112.                     <br />  
  113.                     <a id="removeLiteral1" class="favorite active" onclick="javascript:return removeMe(this,'N');">Favorite</a>  
  114.                 </div>  
  115.             </div>  
  116.             <div class="clear"></div>  
  117.             <div class="literal-offer-product">  
  118.                 <div class="image-wrap">  
  119.                     <img class="literal-offer-img" src="/Images/skate.png" />  
  120.                 </div>  
  121.                 <div class="literal-offer-info">  
  122.                     <strong>Skate Board</strong><br>  
  123.                     <br />  
  124.                     <a id="removeLiteral2" class="favorite active" onclick="javascript:return removeMe(this,'N');">Favorite</a>  
  125.                 </div>  
  126.             </div>  
  127.             <div class="clear"></div>  
  128.             <div class="literal-offer-product">  
  129.                 <div class="image-wrap">  
  130.                     <img class="literal-offer-img" src="/Images/bsnl.jpg" />  
  131.                     <a id="lnkQuickView" class="quick-view btn quick-hide" data-target="#quickviewmodal" data-toggle="modal" href="/Order/QuickViewPopUp.aspx?R=2586JS75&src=QuickView-Checkout-PreviouslyViewed">Quick View</a>  
  132.                 </div>  
  133.                 <div class="literal-offer-info">  
  134.                     <strong>BSNL</strong><br>  
  135.                     <br />  
  136.                     <a id="removeLiteral3" class="favorite active" onclick="javascript:return removeMe(this,'N');">Favorite</a>  
  137.                 </div>  
  138.             </div>  
  139.             <div class="clear"></div>  
  140.             <div class="literal-offer-product">  
  141.                 <div class="image-wrap">  
  142.                     <img class="literal-offer-img" src="/Images/adobe.jpg" />  
  143.                 </div>  
  144.                 <div class="literal-offer-info">  
  145.                     <strong>Adobe</strong>  
  146.                     <br />  
  147.                     <a id="removeLiteral5" class="favorite active" onclick="javascript:return removeMe(this,'N');">Favorite</a>  
  148.                 </div>  
  149.             </div>  
  150.             <div class="clear"></div>  
  151.             <div class="literal-offer-product">  
  152.                 <div class="image-wrap">  
  153.                     <img class="literal-offer-img" src="/Images/pendrive.jpg" />  
  154.   
  155.                 </div>  
  156.                 <div class="literal-offer-info">  
  157.                     <strong>Pen Drive</strong><br />  
  158.                     <br />  
  159.                     <a id="removeLiteral4" class="favorite active" onclick="javascript:return removeMe(this,'N');">Favorite</a>  
  160.                 </div>  
  161.             </div>  
  162.         </div>  
  163.         <br />  
  164.     </form>  
  165.     <script type="text/javascript">  
  166.         $("#no-list").hide();  
  167.         function removeMe(controlID, isRemove) {  
  168.             var item = $('#literal-list').find('.literal-offer-product').find('.literal-offer-info').find("a[id='" + controlID.id + "']");  
  169.             var prev = $('#previously-viewed').find('.literal-offer-product').find('.literal-offer-info').find("a[id='" + controlID.id + "']");  
  170.             var isExists = $('#literal-list').find('.literal-offer-product').find('.literal-offer-info').find("a[id='" + controlID.id + "']").length;  
  171.             var favCount = $('#literal-list').find('.literal-offer-product').length;  
  172.             var removeDiv = controlID.id;  
  173.             if (isRemove == "Y") {  
  174.                 item.parent().parent().remove();  
  175.                 prev.removeClass("favorite active");  
  176.                 prev.addClass("favorite");  
  177.             }  
  178.             else {  
  179.                 if (isExists) {  
  180.                     item.parent().parent().remove();  
  181.                     $('#' + controlID.id).removeClass("favorite active");  
  182.                     $('#' + controlID.id).addClass("favorite");  
  183.                 }  
  184.                 else {  
  185.                     if (favCount < 5) {  
  186.                         if ($('#' + controlID.id).hasClass('favorite')) {  
  187.                             $('#' + controlID.id).removeClass("favorite");  
  188.                             $('#' + controlID.id).addClass("favorite active");  
  189.                         }  
  190.                         var v = $('#literal-list').html();  
  191.                         $('#literal-list').html(v + controlID.parentNode.parentNode.outerHTML);  
  192.                     }  
  193.                     else  
  194.                     {  
  195.                         if ($('#' + controlID.id).hasClass('favorite active')) {  
  196.                             $('#' + controlID.id).removeClass("favorite active");  
  197.                             $('#' + controlID.id).addClass("favorite");  
  198.                         }  
  199.                         else  
  200.                         {  
  201.                             $('#' + controlID.id).removeClass("favorite");  
  202.                             $('#' + controlID.id).addClass("favorite active");  
  203.                         }  
  204.                     }  
  205.                 }  
  206.             }  
  207.   
  208.             if ($('#literal-list').find('.literal-offer-product').length == 0) {  
  209.                 $('#literal-list').hide();  
  210.                 $("#no-list").show();  
  211.             }  
  212.             else {  
  213.                 $('#literal-list').show();  
  214.                 $("#no-list").hide();  
  215.             }  
  216.         }  
  217.     </script>  
  218. </body>  
  219. </html>  

Posted by at No comments:
Labels: ,
Subscribe to: Posts (Atom)

Popular Posts