JavaScript is not executing on a .ascx file RSS

• • Reply
  

  Clubict

  Member

  223 Points

  195 Posts

  JavaScript is not executing on a .ascx file

  Dec 31, 2012 09:55 AM|LINK

  Hi,

   

  I'm writing a email function in my application. For the email form I'm using a asp.net usercontrole(ascx).

  I have a div where i can set a email schedule, now i want to show and hide this div if a user clicks a check box.

  but now nothing happens(I use the same script on default.aspx pages, and it runs fine...can somebody explain to me what I'm doing wrong?

  Here is some code:

  //JavaScript has been loaded from a js file
  
  <script type="text/javascript" src="<%= ResolveUrl("~/Scripts/ApplicationStyle.js") %>"></script>
  //Below is code from the Application.js file
  
  function HideDivs() {
      if ($('#cbScheduleMail').is(':checked')) {
          var divC = $("#dvScheduleMail");
          divC.className = "divVisible";
      }
      else {
          var divB = $("#dvScheduleMail");
          //divB.style.display = "block";
          divB.className = "divHidden";
      }
  }
  
  //I also tried to rename $('#cbScheduleMail') to $('#MainContent_PageName_cbScheduleMail')..(Dit that with all the control names in the js file
  
  
  //CSS
          <style type="text/css">
              .divVisible {display:block;}
              .divHidden {display:none;}
          </style>
  
  //asp
  <input type="checkbox" id="cbScheduleMail" name="cbScheduleMail" onclick="HideDivs()" />
  
  <div id="dvScheduleMail" style="visibility: hidden;">
       <table class="ui-widget-content ui-corner-all">
             <tr>
                   <td><asp:Label ID="lblMailScheduleStart" runat="server" /><input type="text" id="datetimepicker1" name="datetimepicker1" /><asp:Label ID="lblMailScheduleEnd" runat="server" /><input type="text" id="datetimepicker2" name="datetimepicker2" /></td>
             </tr>
       </table>
  </div>

  Best regards,

   

  Mark

  • Edited by clubict on Dec 31, 2012 09:56 AM
  • Edited by clubict on Dec 31, 2012 09:56 AM
  • Edited by clubict on Dec 31, 2012 09:57 AM
  • Edited by clubict on Dec 31, 2012 09:57 AM
  • Edited by clubict on Dec 31, 2012 09:58 AM
  • Edited by clubict on Dec 31, 2012 09:59 AM
  • Edited by clubict on Dec 31, 2012 10:00 AM
• • Reply
  

  DarthSwian

  Star

  12879 Points

  2380 Posts

  Re: JavaScript is not executing on a .ascx file

  Dec 31, 2012 10:40 AM|LINK

  I honestly can't see how this would work. You're hard coding the style="visibility: hidden;" but you never remove that style just apply a different css class to that.

  Also, this could be done much easier with Jquery using the .toggle function. Check this out http://api.jquery.com/toggle/

  Mark as answer if I helped.
  
  Seek and ye shall find or http://lmgtfy.com/
  • Marked as answer by clubict on Dec 31, 2012 11:06 AM
• • Reply
  

  Clubict

  Member

  223 Points

  195 Posts

  Re: JavaScript is not executing on a .ascx file

  Dec 31, 2012 10:55 AM|LINK

  Hi DarthSwian,

  I've replaced the  style="visibility: hidden;"  with  style="display: none"..but the result is the same..it looks like the script has not been executed

  I've added this to the usercontrol page

  $('#cbScheduleMail').click(function () {
          if ($('#cbScheduleMail').is(':checked')) {
              $('#dvScheduleMail').toggle('slow', function () {
   
              });
          }
          else {
   
          }
      });

  but still nothing happens..

  Still hoping you can help..

  Best regards,

  Mark

  • Edited by clubict on Dec 31, 2012 10:55 AM
  • Edited by clubict on Dec 31, 2012 10:57 AM
  • Edited by clubict on Dec 31, 2012 10:59 AM
• • Reply
  

  DarthSwian

  Star

  12879 Points

  2380 Posts

  Re: JavaScript is not executing on a .ascx file

  Dec 31, 2012 11:06 AM|LINK

  remove the style="display: none;" from your div and try this

  $(document).ready(function() {
  $("#dvScheduleMail).hide(); // hides the div on initial page load
  
  $('#cbScheduleMail').click(function () {
  if ($('#cbScheduleMail').is(':checked')) {
  $("#dvScheduleMail).show();
  }
  else {
  $("#dvScheduleMail).hide();
  }
  });
  });

  Mark as answer if I helped.
  
  Seek and ye shall find or http://lmgtfy.com/
• • Reply
  

  Clubict

  Member

  223 Points

  195 Posts

  Re: JavaScript is not executing on a .ascx file

  Dec 31, 2012 11:06 AM|LINK

  Placed the code in a document.ready function..and it works like a charm!

   

  Thank you!