I think my JQuery Is Fighting Each Other [Answered]RSS

• • Reply
  LiarLiarPant...

  Member

  30 Points

  73 Posts

  I think my JQuery Is Fighting Each Other

  Jan 11, 2018 12:29 AM|LiarLiarPantsOnFire|LINK

  I want to when the user clicks the linkbutton being displayed in the first column launch a secondary window that will allow the user to input some data, then have that data updated to the gridview.  My issue is that when the linkbutton is pressed, the header retracts.

  I believe this is due to conflicting JQuery.  How would I re-write this syntax so it functions as I wish?

  <div class='grid-panel'><h1runat="server">Employee Retention</h1><div class='grid-container'>
  <asp:GridView ID="gridviewNeutral" runat="server"> 
      <Columns>
          <asp:templatefield HeaderText="Display">
              <itemtemplate>
                  <asp:checkbox ID="checkbox" Checked="true" CssClass="gridgridgridgrid" runat="server"></asp:checkbox>
                  <asp:LinkButton ID="LinkButtonEdit" runat="server" CommandName="ShowPopup" Text="Add Data" />                
              </itemtemplate>
              <ItemStyle HorizontalAlign="Left" Width="2%" />
          </asp:templatefield>
          <asp:BoundField DataField="DBField1" HeaderText="DBField1"  HeaderStyle-Width="50%"></asp:BoundField>
          <asp:BoundField DataField="DBField2" HeaderText="DBField2" HeaderStyle-Width="8%"> </asp:BoundField>
      </Columns>
  </asp:GridView></div></div>
  
  <script type='text/javascript'>
      $(document).ready(function () {
          $(function(){
              $('.grid-container').hide();
              $(".grid-panel").click(function(e){
                  if($(e.target).closest('div').hasClass('grid-panel')){
                      $(this).find('.grid-container').toggle();
                  }
              });
          });
      });
  </script>
  <script type="text/javascript">
      function ShowPopup() {
          $('#mask').show();
          $('#<%=pnlpopup.ClientID %>').show();
      }
      function HidePopup() {
          $('#mask').hide();
          $('#<%=pnlpopup.ClientID %>').hide();
      }
      $(".btnClose").live('click',function () {
          HidePopup();
      });
  </script>

• • Reply
  A2H

  All-Star

  50601 Points

  9820 Posts

  Re: I think my JQuery Is Fighting Each Other

  Jan 11, 2018 01:10 AM|A2H|LINK

  LiarLiarPantsOnFire

  My issue is that when the linkbutton is pressed, the header retracts.

  if you are talking about the gridview getting hidden on click on Link button, then the reason for this issue click on LinkButton is causing a postback which cause the gridview to hide.

  To resolve the issue you can add a click event to button and then cancel the postback of button.finally call the function to open popup from that method.

  Add a css class to button like below

  <asp:LinkButton ID="LinkButtonEdit" runat="server" CommandName="ShowPopup" Text="Add Data" CssClass="popupButton" />

  Then change the jquery like below 

   <script type='text/javascript'>
              $(document).ready(function () {
                  $(function () {
                      $('.grid-container').hide();
                      $(".grid-panel").click(function (e) {
                          if ($(e.target).closest('div').hasClass('grid-panel')) {
                              $(this).find('.grid-container').toggle();
                          }
                      });
  
                      $(".popupButton").on('click', function (event) {
                          //Add code to open popup
                          
                          //stop postback of button
                          event.preventDefault();
                      });
                  });
              });
          </script>

  Thanks,
  Aje
  My Blog | Dotnet Funda
• • Reply
  LiarLiarPant...

  Member

  30 Points

  73 Posts

  Re: I think my JQuery Is Fighting Each Other

  Jan 11, 2018 01:30 AM|LiarLiarPantsOnFire|LINK

  @a2h -> this is what I Try, but I get error of Expected ')' on the line of code function HidePopUp()

  Full syntax ->

  <script type='text/javascript'>
  $(document).ready(function () {
      $(function () {
          $('.grid-container').hide();
          $(".grid-panel").click(function (e) {
              if ($(e.target).closest('div').hasClass('grid-panel')) {
                  $(this).find('.grid-container').toggle();
              }
          });
  
          $(".popupButton").on('click', function (event) {
              //Add code to open popup
              $('#mask').show();
              $('#<%=pnlpopup.ClientID %>').show();
              }
              function HidePopup() {
                  $('#mask').hide();
                  $('#<%=pnlpopup.ClientID %>').hide();
              }
              $(".btnClose").live('click',function () {
                  HidePopup();
              });
              //stop postback of button
              event.preventDefault();
          });
      });
  });
  </script>

• • Reply
  A2H

  All-Star

  50601 Points

  9820 Posts

  Re: I think my JQuery Is Fighting Each Other

  Jan 11, 2018 01:36 AM|A2H|LINK

  LiarLiarPantsOnFire

  but I get error of Expected ')' on the line of code function HidePopUp()

  You have a code misplaced slightly and the the function was not closed properly. Try with below code

   <script type='text/javascript'>
          $(function () {
              $('.grid-container').hide();
              $(".grid-panel").click(function (e) {
                  if ($(e.target).closest('div').hasClass('grid-panel')) {
                      $(this).find('.grid-container').toggle();
                  }
              });
  
              $(".popupButton").on('click', function (event) {
                  //Add code to open popup
                  $('#mask').show();
                  $('#<%=pnlpopup.ClientID %>').show();
                  //stop postback of button
                  event.preventDefault();
              });
              function HidePopup() {
                  $('#mask').hide();
                  $('#<%=pnlpopup.ClientID %>').hide();
              }
              $(".btnClose").live('click', function () {
                  HidePopup();
              });
  
          });
      </script>

  Thanks,
  Aje
  My Blog | Dotnet Funda