Show / Hide Div based on gridview row value not displaying properly [Answered]RSS

• • Reply
  HuggyBearWas...

  Member

  5 Points

  29 Posts

  Show / Hide Div based on gridview row value not displaying properly

  Feb 03, 2015 12:32 PM|HuggyBearWasHere|LINK

  I have a gridview that when the select button is pressed a bootstrap modal window opens and is populated by the gridview row values (LBEdit button below). That works great.  

  The problem is as follows:

  In that modal pop ups some divs are hidden and need to be shown only if a certain value == "Yes" in the gridview row. I manage to capture the values when the gridview loads but the divs remain hidden.

  My code is below. Any help would be appreciated. 

  <script type="text/javascript">
      $(document).ready(function () {
  
          $("#<%=GridView_Sch_A.ClientID%> tr:has(td)").each(function() {
              var IsPropertyInForeclosure = $(this).find("td:eq(3)");
             
          });
  
          $("#LBEdit").click(function () {           
              if (IsPropertyInForeclosure == "Yes") {
                  $("#div_is_there_mortgage_edit").show();
              }
              else {
                  $("#div_is_there_mortgage_edit").hide();
              }
  
          });
  
  
      }); //End Doc Ready
  
  </script>

  Webforms JQuery gridview

• • Reply
  kabilan9929

  None

  0 Points

  2 Posts

  Re: Show / Hide Div based on gridview row value not displaying properly

  Feb 03, 2015 08:34 PM|kabilan9929|LINK

  I dono how you having your div's in your page , try to use CLASS to pick the div element instead of using ID . 

  $("#LBEdit").click(function () {           
              if (IsPropertyInForeclosure == "Yes") {
                  $(".div_is_there_mortgage_edit").show();
              }
              else {
                  $(".div_is_there_mortgage_edit").hide();
              }
  
          });

  Webforms JQuery gridview

• • Reply
  HuggyBearWas...

  Member

  5 Points

  29 Posts

  Re: Show / Hide Div based on gridview row value not displaying properly

  Feb 03, 2015 08:37 PM|HuggyBearWasHere|LINK

  Why would that make any difference if I am targeting the divs specifically by their ID?

  Webforms JQuery gridview

• • Reply
  Edwin Guru S...

  Star

  8536 Points

  1376 Posts

  Re: Show / Hide Div based on gridview row value not displaying properly

  Feb 04, 2015 01:22 AM|Edwin Guru Singh|LINK

  HuggyBearWasHere

  
  $("#LBEdit").click(function () {
    if (IsPropertyInForeclosure == "Yes") {
           $("#div_is_there_mortgage_edit").show();
    }
    else {
          $("#div_is_there_mortgage_edit").hide();
     }
  });

  
     As per your case, you can try the following steps :
  1.Goto the browser->View->Source

  2.Search & copy the corresponding div id from viewsource 

  3 .then replace that viewsource div_id into your jQuery

  --
  with regards,
  Edwin

  Webforms JQuery gridview

  with regards,
  Edwin
• • Reply
  arunabathan

  Participant

  849 Points

  352 Posts

  Re: Show / Hide Div based on gridview row value not displaying properly

  Feb 04, 2015 01:48 AM|arunabathan|LINK

  Hi,

      ID is unique value in the html page, so don't repeat same ID multiple times, if you repeat same ID, the jQuery will trigger the event for only in the last DOM element.

  Check javascript scope of variable here

  In your code, you can't access local variable("IsPropertyInForeclosure") outside. So it should be global variable. Just check modified code below.

  Scenario 1

  <script type="text/javascript">
       var IsPropertyInForeclosure = "";
      $(document).ready(function () {
  //       or should be here
  //var IsPropertyInForeclosure  ="";
          $("#<%=GridView_Sch_A.ClientID%> tr:has(td)").each(function() {
              IsPropertyInForeclosure = $(this).find("td:eq(3)");
             
          });
  
          $("#LBEdit").click(function () {           
              if (IsPropertyInForeclosure == "Yes") {
                  $("#div_is_there_mortgage_edit").show();
              }
              else {
                  $("#div_is_there_mortgage_edit").hide();
              }
  
          });
  
  
      }); //End Doc Ready
  
  </script>

  Scenario 2

  <script type="text/javascript">
      $(document).ready(function () {
  
          $("#<%=GridView_Sch_A.ClientID%> tr:has(td)").each(function() {
              IsPropertyInForeclosure = $(this).find("td:eq(3)");
             
          });
  
          $("#LBEdit").click(function () {           
              if (IsPropertyInForeclosure == "Yes") {
                  $("#div_is_there_mortgage_edit").show();
              }
              else {
                  $("#div_is_there_mortgage_edit").hide();
              }
  
          });
  
  
      }); //End Doc Ready
  
  </script>

  Webforms JQuery gridview

  Thanks&Regards,
  Arunabathan.G
  (Please mark as answer, if your thread is solved)
• • Reply
  HuggyBearWas...

  Member

  5 Points

  29 Posts

  Re: Show / Hide Div based on gridview row value not displaying properly

  Feb 04, 2015 09:18 AM|HuggyBearWasHere|LINK

  Thank you all for the responses. I will try the recommendations as soon as I can and will report back. 

  Webforms JQuery gridview