how to change div content when different button is clicked.javascript php html

Question

I have three buttons(role, department, search). When role is clicked, div will show the role informations. The div code is:

<div id="role_div" class="role" name="role" >
<?php 
...
$sql = "select distinct role from hpc_user ;"; 
echo '<table>';
$sel=$conn->query($sql);
while($row=$sel->fetch(PDO::FETCH_NUM))
{
  echo '<tr>';
  echo '<td style="word-break:break-all;">'.$row[0].'</td>';
  echo '</tr>';
}
  echo '</table>';
?>
</div>`

When department button is clicked, I wish the whole div content is

<div id="role_div" class="role" name="role" >
<?php 
$conn = new PDO('');
$conn->setAttribute(PDO::ATTR_ORACLE_NULLS, true);
$sql = "select distinct department from hpc_user ;"; 
echo '<table  >';
$sel=$conn->query($sql);
while($row=$sel->fetch(PDO::FETCH_NUM))
{
echo '<tr>';
echo '<td style="word-break:break-all;">'.$row[0].'</td>';
echo '</tr>';
}
?>
</div>

I try to use innerhtml.document.getElementById('role_div').innerHTML='<?php>....</php>', but it does not work. Who can help me ?

Answer 1

You can create three divs with unique ids. And then display none style to two of them. And then you can use jquery to show/hide them on button click. For example :

HTML:

<!--Buttons-->
<div class="btnsContainer">
  <button class="showHideDiv" id="role">Show Role Div</button>
  <button class="showHideDiv" id="department">Show DepartmentDiv</button>
  <button class="showHideDiv" id="search">Show Search Div</button>
</div>
<!--Role Container -->    
<div id="role_div" class="role" name="role">
  <!--Your role script here-->
</div>
<!--Department Container -->    
<div id="dept_div" class="role" name="role" style="display:none;">
  <!--Your department script here-->
</div>
<!--Search Container -->    
<div id="search_div" class="role" name="role" style="display:none;">
  <!--Your search script here-->
</div>

Jquery:

<!--latest jquery Library file-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".showHideDiv").click(function(){
    var clickedBtnId = $(this).attr('id');
    if(clickedBtnId === 'role') {
      $('#role_div').show();
      $('#dept_div').hide();
      $('#search_div').hide();
    } else if(clickedBtnId === 'department') {
      $('#role_div').hide();
      $('#dept_div').show();
      $('#search_div').hide();
    } else if(clickedBtnId === 'search') {
      $('#role_div').hide();
      $('#dept_div').hide();
      $('#search_div').show();
    }
  });
});
</script>

Answer 2

I think following code will help you.

var dt = '<table>';
    var sql = "select distinct role from hpc_user ;"; 
    for(var i = 0; i <= 5; i++)
    {
      dt = dt + '<tr>';
      dt = dt + '<td style="word-break:break-all;">'+ i +'</td>';
      dt = dt + '</tr>';
    }
      dt =  dt + '</table>';

      document.getElementById('role_div').innerHTML  = dt;

Answer 3

You can simply put your role/department data in two hidden divs and than you can change data using Jquery

another solution as you mentioned you can't add three divs

html:

 <div id="ajax_exchange"></div>
 <input type="button" id="role" onclick="change_data(this.id);" value="role">
 <input type="button" id="department" onclick="change_data(this.id);" value="department">
 <input type="button" id="search" onclick="change_data(this.id);" value="search">

script :

<script type="text/javascript">
function change_data(id){
    var data_to_fetch = $('#'+id).val();

    $.ajax({
        type: "post",
        url: "<?php echo SFURI::SEFURL('index.php?itemtype=skus&layout=ajax_call',array('call'=>'ajax')); ?>",
        dataType: 'html',
        cache: false,    
        data: {get_this: data_to_fetch},
        success: function(data){
            $('#ajax_exchange').html("");
            $('#ajax_exchange').html(data);

        },
        error: function(){
            alert('Error while request..! try again');
        }
    });
}
</script>

ajax_call.php :

<?php
    if(isset($_POST['get_this']) && $_POST['get_this']=="role"){
        echo "role data";
        // here  you can put your role data to be sent to div
    }
    if(isset($_POST['get_this']) && $_POST['get_this']=="department"){

        echo "department data";
        // here  you can put your department data to be sent to div
    }
    if(isset($_POST['get_this']) && $_POST['get_this']=="search"){

        echo "search data";
        // here  you can put your search data to be sent to div
    }
?>

I hope this will help you.