Question

This is my first post on some Q&A site. Point out my tiniest mistakes and correct me. I’ve started learning PHP and I am using WAMP server. I am having multiple rendering issues. I will present one first. I have an index.php page on which I want to display five tables namely Branch, Student, Subject, Exam and Marks. Now I have kept display buttons for each tables mentioned above on the same page. I don’t want the page to get refreshed so the input type for the button is “button” not “submit”. And then I want to check if the button is clicked or not so I am using isset($_POST[‘button’]) where button is the name of display button for respective table. And if the button is clicked then I am displaying the datatable for that particular table only while other tables are hidden.

Rendering issue of one table at a time : I want that when I click on Display Branch Table button the Branch table will be displayed and after that if I click on Display Student Table button then Student table should be displayed and the rest of tables should be hidden and likewise for all the tables. Now the below code has the jquery which is too much redundant and I want to optimize it. Also I’ve a part of my PHP code which displays branch table whose div tag id is branch1 and for student it is student1 and likewise. On clicking the display branch button I cannot see anything happening. It means the if(isset($_POST[‘display_branch’])) is not working on button click. Also there is a div tag for each table and has different id but same class(i.e. render)
I would like to know where I am wrong here and I don’t want the page to be reloaded again.

jQuery:

$('.render').hide();
$('#display_branch').click(function (event) {
    $('#student1').hide();
    $('#subject1').hide();
    $('#exam1').hide();
    $('#marks1').hide();
    $('#branch1').show();
});

$('#display_student').click(function (event) {
    $('#subject1').hide();
    $('#exam1').hide();
    $('#marks1').hide();
    $('#branch1').hide();
    $('#student1').show();
});
$('#display_subject').click(function (event) {
    $('#subject1').show();
    $('#exam1').hide();
    $('#marks1').hide();
    $('#branch1').hide();
    $('#student1').hide();
});
$('#display_exam').click(function (event) {
    $('#subject1').hide();
    $('#exam1').show();
    $('#marks1').hide();
    $('#branch1').hide();
    $('#student1').hide();
});
$('#display_marks').click(function (event) {
    $('#subject1').hide();
    $('#exam1').hide();
    $('#marks1').show();
    $('#branch1').hide();
    $('#student1').hide();
});

Display buttons:

       <div id="display" style="position:absolute; top:100px;">
       <form action="" method="post">
       <input type="button" id="display_branch" name="display_branch" value="Display Branch Table" >
       <input type="button" id="display_student" name="display_student" value="Display Student Table">
       <input type="button" id="display_subject" name="display_subject" value="Display Subject Table">
       <input type="button" id="display_exam" name="display_exam" value="Display Exam Table">
       <input type="button" id="display_marks" name="display_marks" value="Display Marks Table">
       </form>
       </div>

PHP Code Fragment:

   if(isset($_POST['display_branch']))
   {
   $result = mysql_query("SELECT * FROM branch");?>
 <div class="render" id="branch1" style="position:absolute; left:200px; top:150px;">
        <table id="datatables" class="display">
            <thead>
                <tr>
                    <th>Branch ID</th>
                    <th>Branch Name</th>
                </tr>
            </thead>
            <tbody>
                <?php
                while ($row = mysql_fetch_array($result)) {
                $branch_id= $row['branch_id'];
                $branch_name = $row['branch_name'];?>
                    <tr>
                        <td><?php echo $branch_id;?></td>
                        <td><?php echo $branch_name;?></td>                         
                    </tr>
                    <?php
                }
                ?>
            </tbody>
        </table>
    </div>}

I searched a lot and tried many ways but not getting it perfectly. Hope this discussion will help some others to solve similar issues.

Answer 1

$_POST['display_branch']

This requires POST request with display_branch param given.

You got basically two options to hide/show elements like this.

• 1 have them all hidden at the load time and then just selectively show like this http://jsfiddle.net/DVd3A/1/
• 2 do an ajax request on button click with $.ajax() like this http://jsfiddle.net/sLXMU/3/