Web Analytics Made Easy -
StatCounter Display div once a selection has been made - CodingForum

Announcement

Collapse
No announcement yet.

Display div once a selection has been made

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Display div once a selection has been made

    All,

    I have a drop down populated from a table, once the user makes a selection I need to display content that goes with the selection. This content is also pulled form the database. The problem I have is that once the div is displaying all of the options one after the other in the browser.

    Here is the code, then I will show the html form the page source:

    Code:
    $result_stat_query = $DB_con->prepare('SELECT statid FROM stats ORDER BY statid');
    $result_stat_query->setFetchMode(PDO::FETCH_ASSOC);
    $result_stat_query->execute();
    
    $row_stat = $result_stat_query->fetchAll();
     
     echo "<select name='stat_id' onchange='filterContent();'>";
        
    
    
    foreach ($row_stat as $r) {
      
    
    
        // first run
        echo '<option value="'.$r['statid'].'">'.$r['stat_name'].'</option>';
     
    }
    echo "</select>";
    
    foreach ($row_stat as $r) {
        // seconds run
        echo '<div id="'.$statid.'">';
    echo '<p>Stat name= "'.$r['statid'].'"</p>';
    echo '</div>';
        
      }
     //end of stat part
     ?>
    Here is the javascript at the bottom of the script, notice how php is used to get the statid to tie to the div id, I was hoping this would solve the issue:

    Code:
    <script>
    function filterContent() {
    	var user = document.getElementById("myDropdown").value;
    	var contentA = document.getElementById("<?php echo $statid; ?>");
            	} else if (user=="A") {
    		contentA.style.display="block";
    	}
    </script>
    Here is the html from the browser:

    Code:
    <select name='stat_id' onchange='filterContent();'><option value="1">Please Select An Option</option><option value="2">Test 1</option><option value="3">Test 2</option><option value="4">Test 3</option></select><div id=""><p>Stat name= "1"</p></div><div id=""><p>Stat name= "2"</p></div><div id=""><p>Stat name= "3"</p></div><div id=""><p>Stat name= "4"</p></div>
    </p>

    Any help you can give would be appreciated.

    Thanks,

    G

  • #2
    What is your question now? What is the problem?

    Comment


    • #3
      In the html, all of the rows are being printed to the page, rather than the one that the user has selected. The problem is that it should only display related to the selection, rather than showing all, so the question is: How do you display the div and its contents related to the one id rather than all the rows?

      Thanks,

      G

      Comment


      • #4
        Doesn't the code I proposed in your previous thread help you?
        Code:
        <div class="content" id="content2">Your content for option 2</div>
        <div class="content" id="content3">Your content for option 3</div>
        <div class="content" id="content4$>Your content for option 4</div>
        <script>
            function filterContent() {
            var user = document.getElementById("stat_id").value;
            var cont = document.getElementsByClassName("content");
            for (var i = 0; i < cont.length; i++) {
                if (cont[i].id == "content" + user) cont[i].style.display = "block"; else cont[i].style.display = none;
            }
        </script>
        Initially you will have to make all divs invisible until the user makes a selection:
        Code:
        .content {display: none;}
        PS: Where is $statid being used in this line defined?
        Code:
        echo '<div id="'.$statid.'">';
        Last edited by Sempervivum; Sep 11, 2016, 02:47 PM.

        Comment


        • #5
          Ok, so I have changed my code to mirror what you gave me above. The div relative to the selection in the drop down is not displaying and I now get an error: (index):111 Uncaught TypeError: Cannot read property 'value' of null on this part:

          Code:
            var user = document.getElementById("stat_id").value;
          I guess that the js cant find the value, even though the js is at the bottom of the script - which is the answer to most of these issues having run a search.

          Here is the code as it stands:

          Code:
          <!DOCTYPE html>
          <html lang="en">
            <head>
              <meta charset="utf-8">
              <meta http-equiv="X-UA-Compatible" content="IE=edge">
              <meta name="viewport" content="width=device-width, initial-scale=1">
              <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
              <meta name="description" content="">
              <meta name="author" content="">
              <link rel="icon" href="../../favicon.ico"> 
          
              <title>Fictioz</title>
          
              <!-- Bootstrap core CSS -->
              <link href="../css/bootstrap.min.css" rel="stylesheet">
              <!-- Bootstrap theme -->
              <link href="../css/bootstrap-theme.min.css" rel="stylesheet">
          
              <!-- Custom styles for this template -->
              <link href="../css/theme.css" rel="stylesheet">
          
              <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
              <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
              <script src="../js/ie-emulation-modes-warning.js"></script>
              <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
              <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
              <link href="../css/grid.css" rel="stylesheet">
              <link href="../css/default.css" rel="stylesheet" type="text/css" />
              <style>
                  .content {display: none;}
            </style> 
          </head>
          <body role="document">
          <div class="container theme-showcase" role="main">
              <div class="container">
                  <div class="jumbotron">
                                <div class="row"> 
          <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0"> 
          
          <?php
          
          
          $result_stat_query = $DB_con->prepare('SELECT statid FROM stats ORDER BY statid');
          $result_stat_query->setFetchMode(PDO::FETCH_ASSOC);
          $result_stat_query->execute();
          
          $row_stat = $result_stat_query->fetchAll();
          
           echo "<select name='stat_id' onchange='filterContent();'>";
          
          foreach ($row_stat as $r) {
            
          
          
              // first run
              echo '<option value="'.$r['statid'].'">'.$r['stat_name'].'</option>';
           
          }
          echo "</select>";
          
          foreach ($row_stat as $r) {
              // seconds run
              echo '<div class="content" id="content2">';
          echo '<p>Stat name= "'.$r['statid'].'"</p>';
          echo '</div>';
              
            }
          ?>
          <script>
              function filterContent() {
              var user = document.getElementById("stat_id").value;
              var cont = document.getElementsByClassName("content");
              for (var i = 0; i < cont.length; i++) {
                  if (cont[i].id == "content" + user) cont[i].style.display = "block"; else cont[i].style.display = none;
              }
            }
          </script>
          Html output:
          Code:
          <select name='stat_id' onchange='filterContent();'><option value="1">Please Select An Option</option><option value="2">Test 1</option><option value="3">Test 2</option><option value="4">Test 3</option></select><div class="content" id="content2"><p>Stat name= "1"</p></div><div class="content" id="content2"><p>Stat name= "2"</p></div><div class="content" id="content2"><p>Stat name= "3"</p></div><div class="content" id="content2"><p>Stat name= "4"</p></div>

          Comment


          • #6
            What does the HTML look like - its hard to figure out what the JavaScript is actually interacting with when all we can see is the PHP that generates the HTML.
            Stephen
            Learn Modern JavaScript - http://javascriptexample.net/
            Helping others to solve their computer problem at http://www.felgall.com/

            Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

            Comment


            • #7
              Thanks for replying, here is the code form the source:

              Code:
              <!DOCTYPE html>
              <html lang="en">
                <head>
                  <meta charset="utf-8">
                  <meta http-equiv="X-UA-Compatible" content="IE=edge">
                  <meta name="viewport" content="width=device-width, initial-scale=1">
                  <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
                  <meta name="description" content="">
                  <meta name="author" content="">
                  <link rel="icon" href="../../favicon.ico"> 
              
                  <title></title>
              
                  <!-- Bootstrap core CSS -->
                  <link href="../css/bootstrap.min.css" rel="stylesheet">
                  <!-- Bootstrap theme -->
                  <link href="../css/bootstrap-theme.min.css" rel="stylesheet">
              
                  <!-- Custom styles for this template -->
                  <link href="../css/theme.css" rel="stylesheet">
              
                  <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
                  <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
                  <script src="../js/ie-emulation-modes-warning.js"></script>
                  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
                  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
                  <link href="../css/grid.css" rel="stylesheet">
                  <link href="../css/default.css" rel="stylesheet" type="text/css" />
                  <style>
                      .content {display: none;}
                </style> 
              </head>
                
              <body role="document">
              <div class="container theme-showcase" role="main">
                  <div class="container">
                      <div class="jumbotron">
                                    <div class="row"> 
              <div class="col-sm-5 col-sm-offset-2 col-md-6 col-md-offset-0"> 
              
              <select name='stat_id' onchange='filterContent();'><option value="1">Please Select An Option</option><option value="2">Test 1</option><option value="3">Test 2</option><option value="4">Test 3</option></select>
              
              <div class="content" id="content2"><p>Stat name= "1"</p></div>
              <div class="content" id="content2"><p>Stat name= "2"</p></div>
              <div class="content" id="content2"><p>Stat name= "3"</p></div>
              <div class="content" id="content2"><p>Stat name= "4"</p></div> 
              
                          </div>
                  </div>
              
              <script>
                  function filterContent() {
                  var user = document.getElementById("stat_id").value;
                  var cont = document.getElementsByClassName("content");
                  for (var i = 0; i < cont.length; i++) {
                      if (cont[i].id == "content" + user) cont[i].style.display = "block"; else cont[i].style.display = none;
                  }
                }
              </script>
              Thanks,

              G

              Comment


              • #8
                You have several divs with the same id - each id in the page must be unique.
                Stephen
                Learn Modern JavaScript - http://javascriptexample.net/
                Helping others to solve their computer problem at http://www.felgall.com/

                Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

                Comment


                • #9
                  You need to enumerate IDs of the divs in your foreach loop:
                  PHP Code:
                  foreach ($row_stat as $r) {
                      
                  // seconds run
                      
                  echo '<div class="content" id="content' $r['statid'] . '">';
                      echo 
                  '<p>Stat name= "'.$r['statid'].'"</p>';
                      echo 
                  '</div>';   

                  (index):111 Uncaught TypeError: Cannot read property 'value' of null on this part:
                  You get this error as there is no element having the ID "stat_id". You can fix this by using this of the select (see my code below).

                  Quotes were missing at
                  Code:
                  cont[i].style.display = "none"
                  (my fault).

                  This HTML/CSS works:
                  Code:
                      <select name='stat_id' onchange='filterContent(this);'><option value="1">Please Select An Option</option><option value="2">Test 1</option><option value="3">Test 2</option><option value="4">Test 3</option></select>
                      <div class="content" id="content2"><p>Stat name= "2"</p></div>
                      <div class="content" id="content3"><p>Stat name= "3"</p></div>
                      <div class="content" id="content4"><p>Stat name= "4"</p></div>
                      <script>
                          function filterContent(ele) {
                              var user = ele.value;
                              var cont = document.getElementsByClassName("content");
                              for (var i = 0; i < cont.length; i++) {
                                  if (cont[i].id == "content" + user) cont[i].style.display = "block"; else cont[i].style.display = "none";
                              }
                          }
                      </script>

                  Comment


                  • #10
                    Thanks - that last suggestion did the trick, we're in business!

                    Comment


                    • #11
                      Now just axe the paragraphs for nothing around non-grammatical paragraphs, and stop using multiple echo to do the job of one... and use comma delimits instead of string addition to lower the memory footprint and speed execution.

                      Code:
                      foreach ($row_stat as $r) echo '
                      			<div class="content" id="content', $r['statid'], '">
                      				Stat name= "', $r['statid'], '"
                      			</div>';
                      Remember, P is for grammatical paragraphs, which I doubt that content qualifies as. Of course given that jquery and bootcrap are in use, semantic markup (aka using HTML properly) was probably drop kicked into the Grand Canyon the day coding started...
                      Walk the dark path, sleep with angels, call the past for help.
                      https://cutcodedown.com
                      https://medium.com/@deathshadow

                      Comment

                      Working...
                      X