Button activity

ohad · August 7, 2020

Hi all

I build an app with a header, side-bar, footter and main area

(here is the index.php code (Removed all php activity cause its not relevant here

<!DOCTYPE html>
<html>
    <head>
        <title>Login</title>
        <meta charset="UTF-8">
        <script type="text/javascript" src="../../php-ajax/jquery-3.5.1.js"></script>
        <script type='text/javascript' src='js/dynamicpage.js'></script>
        <link href="css/global_style.css" type="text/css" rel="stylesheet" madia="all"/> 
     </head>
    <body>
        <div id="header">
            <img id="client_logo" src="Client_Images/client_logo.png" alt="client_logo" height="60" width="95"/>
        </div>
        <div id="nav">
            <a href="#home">Home</a>
            <a href="services.php">Services</a>
            <a href="#clients">Clients</a>
            <a href="#contact">Contact</a>
        </div>
        <div id="page-wrap">
            <section id="main-content">
                <div id="guts">
                    <form name="logon" id="logon" action="index.php" method="POST" >
                        <br>
                        <br>
                        <center>
                            <span id="open_image">
                                <img src="Images/login.png" alt="image"/>
                            </span>
                         </center>
                        <br>
                        <br>
                        <br>
                        <span style="clear: both; float: left; margin-left: 160px; margin-top: 20px; ">
                            <label for="userid">User Id</label>
                            <input type="text" name="userid" id="userid" class="left_radius_textbox" value=" <?php echo htmlspecialchars($userid, ENT_QUOTES); ?>" placeholder="<?php echo userid; ?>"/>
                            <input type="text" name="userid_desc" id="userid_desc" class="right_radius_textbox" readonly />
                            <label for="password">Password</label>                    
                            <input type="password" name="password" id="password" class="regular_textbox" value="<?php echo htmlspecialchars($password, ENT_QUOTES); ?>" placeholder="<?php echo password;?>" />
                        </span>
                        <span style="clear: both; float: left; margin-left: 160px; margin-top: 20px">
                            <label for="compid">Company</label>                    
                            <input type="text" name="compid" id="compid" class="left_radius_textbox" value="<?php echo htmlspecialchars($compid, ENT_QUOTES); ?>" placeholder="<?php echo compid;?>"/>
                            <input type="text" name="compid_desc" id="compid_desc" class="right_radius_textbox" readonly  />
                            <label for="language">Language</label>                    
                            <input type="text" name="language" id="language" class="left_radius_textbox" value="<?php echo htmlspecialchars($languageid, ENT_QUOTES) ;?>" placeholder="<?php echo language;?>"/>
                            <input type="text" name="language_desc" id="language_desc" class="right_radius_textbox" readonly   />
                        </span>
                        <span style="clear: both; margin-top: 20px; margin-left: 260px;">
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <br>
                            <center>
                                <input type="submit" value="Login" id="login" class="big_button" placeholder="<?php echo login;?>"/>
                            </center>
                        </span>                    
                    </form>
                </div>
            </section>
        </div>
        <div id="footer">
            <table width="100%">
                    <tbody>
                        <tr>
                            <td style="width:10%;"><img src="Images/logo_transparent.png" alt="logo" height="37" width="250"/></td>
                            <td style="width:60%;"><h5>© Copyright 2020 . All rights reserved.</h5></td>
                            <td style="width:20%;"><h4>   <a href="mailto:info@xxx.com">Contact Us</a></h4></td>
                        </tr>
                    </tbody>
                </table>
        </div>
     </body>
</html>

And the CSS:

html, body{
    height: 100%;
}
#header {
    background-color: lightcyan;
    width:100%;
    height: 60px;
    border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-top-left-radius: 10px;
}
#nav {
    background-color: lightgray;
    position: fixed;
    top: 60px;
    bottom: 60px;
    float:left;
    width:19%;
    border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-top-left-radius: 10px;
    overflow-y:scroll;
}
#page-wrap {
    background-color: rgb(245,245,235);
    float:left;
    margin-left: 19%;
    width:81%;
    border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-top-left-radius: 10px;
}     
#footer {
    clear: both;
    background-color: lightcyan;
    width:100%;
    height: 60px;
    text-align: center;
    border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-top-left-radius: 10px;
}
#treeview_json{
    background-color: lightgray;
    float:left;
    position: fixed;
    top: 60px;
    bottom: 60px;
    width:19%;
    border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-top-left-radius: 10px;
    padding: 4px 5px 4px 5px;
    text-decoration: none;
    font-size: 12px;
    color: #818181;
    display: block;
    overflow-y:auto;  
    overflow-x:hidden;
}
#nav,#treeview_json,#page-wrap{
    min-height: 85%;
}
#nav a {
    padding: 6px 8px 6px 16px;
    text-decoration: none;
    font-size: 20px;
    color: #818181;
    display: block;
}
#nav a:hover , #treeview_json a:hover {
  color: #f1f1f1;
}
@media screen and (max-height: 450px) {
  .sidebar, #nav, #treeview_json {padding-top: 15px;}
  .sidebar a, #nav a, #treeview_json a {font-size: 18px;}
}
.regular_textbox {
    border-radius:  10px; 
    text-align:center;
    width: 230px; 
    height: 20px;
}

.left_radius_textbox  {
    border-bottom-left-radius:  10px; 
    border-top-left-radius: 10px;
    text-align:center;
    width: 70px; 
    height: 20px;
    margin-right: 0px;
}

.right_radius_textbox {
    border-bottom-right-radius:  10px; 
    border-top-right-radius:  10px;
    text-align:center;
    width: 160px; 
    height: 20px;
    margin-left: 0px;
}

.big_button {
    border-radius: 40px ; 
    text-align:center;
    width: 220px; 
    height: 30px; 
}

.regular_button {
    border-radius: 40px ; 
    text-align:center;
    width: 80px; 
    height: 25px; 
}

label {
    float: left;
    width: 85px;
    font: 18px 'Exo Medium 500', tahoma;
}

input {
    margin: 6px;
    display: run-in;
    float: left;
}

In order to fill the main area I use a javascript that fade the previous content and load the new one

here is the code I use: dynamicpage.js

$(function() {
    var newHash      = "",
        $mainContent = $("#main-content"),
        $pageWrap    = $("#page-wrap"),
        baseHeight   = 0,
        $el;
        
    $pageWrap.height($pageWrap.height());
    baseHeight = $pageWrap.height() - $mainContent.height();
    
    $("#nav").delegate("a", "click", function() 
    {
        _link = $(this).attr("href");
        history.pushState(null, null, _link);
        loadContent(_link);
        return false;
    });
    
    function loadContent(href)
    {
        $mainContent
                .find("#guts")
                .fadeOut(200, function() 
                {
                    $mainContent.hide().load(href + " #guts", function() 
                    {
                        $mainContent.fadeIn(200, function() 
                        {
                            $pageWrap.animate(
                            {
                                height: baseHeight + $mainContent.height() + "px"
                            });
                        });
                    });
                });
    }
    
    $(window).bind('popstate', function(){
       _link = location.pathname.replace(/^.*[\\\/]/, ''); //get filename only
       loadContent(_link);
    });
 
});

I have a page that if i load it directly to the browser it works fine (its a bootstrap table with a filter button)m and when I press the filter button, its allow filttering the table

here is the Services.php page code (its an example so i removed the php code that fill the table from DB and populated it manually. only the html and jquery)

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Budget Items</title>
        <link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
        <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
        <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
        <style>
            .filterable {
                margin-top: 15px;
            }
            .filterable .panel-heading .pull-right {
                margin-top: -20px;
            }
            .filterable .filters input[disabled] {
                background-color: transparent;
                border: none;
                cursor: auto;
                box-shadow: none;
                padding: 0;
                height: auto;
            }
            .filterable .filters input[disabled]::-webkit-input-placeholder {
                color: #333;
            }
            .filterable .filters input[disabled]::-moz-placeholder {
                color: #333;
            }
            .filterable .filters input[disabled]:-ms-input-placeholder {
                color: #333;
            }
        </style>
    </head>
    <body>
        <div id="page-wrap">
            <section id="main-content">
                <div id="guts">
                    <div class="container">
                        <div class="row">
                            <div class="panel panel-primary filterable">
                                <div class="panel-heading">
                                    <h3 class="panel-title">Services</h3>
                                    <div class="pull-right">
                                        <button class="btn btn-default btn-xs btn-filter"><span class="glyphicon glyphicon-filter"></span> Filter</button>
                                    </div>
                                </div>
                                <table class="table">
                                    <thead>
                                        <tr class="filters">
                                            <th><input type="text" class="form-control" placeholder="#" disabled></th>
                                            <th><input type="text" class="form-control" placeholder="Name" disabled></th>
                                            <th><input type="text" class="form-control" placeholder="ADDRESS" disabled></th>
                                            <th><input type="text" class="form-control" placeholder="Type" disabled></th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr>
                                            <td>1</td>
                                            <td>AA Consulting</td>
                                            <td>High Street</td>
                                            <td>Consulting</td>
                                        </tr>
                                        <tr>
                                            <td>2</td>
                                            <td>Fin Solutions</td>
                                            <td>Old market</td>
                                            <td>Consulting</td>
                                        </tr>
                                        <tr>
                                            <td>3</td>
                                            <td>Abc Accounting</td>
                                            <td>Blue bay</td>
                                            <td>Accountant</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <script type="text/javascript">
                        $(document).ready(function(){
                    $('.filterable .btn-filter').click(function(){
                        var $panel = $(this).parents('.filterable'),
                        $filters = $panel.find('.filters input'),
                        $tbody = $panel.find('.table tbody');
                        if ($filters.prop('disabled') == true) {
                            $filters.prop('disabled', false);
                            $filters.first().focus();
                        } else {
                            $filters.val('').prop('disabled', true);
                            $tbody.find('.no-result').remove();
                            $tbody.find('tr').show();
                        }
                    });

                    $('.filterable .filters input').keyup(function(e){
                        /* Ignore tab key */
                        var code = e.keyCode || e.which;
                        if (code == '9') return;
                        /* Useful DOM data and selectors */
                        var $input = $(this),
                        inputContent = $input.val().toLowerCase(),
                        $panel = $input.parents('.filterable'),
                        column = $panel.find('.filters th').index($input.parents('th')),
                        $table = $panel.find('.table'),
                        $rows = $table.find('tbody tr');
                        /* Dirtiest filter function ever ;) */
                        var $filteredRows = $rows.filter(function(){
                            var value = $(this).find('td').eq(column).text().toLowerCase();
                            return value.indexOf(inputContent) === -1;
                        });
                        /* Clean previous no-result if exist */
                        $table.find('tbody .no-result').remove();
                        /* Show all rows, hide filtered ones (never do that outside of a demo ! xD) */
                        $rows.show();
                        $filteredRows.hide();
                        /* Prepend no-result row if all rows are filtered */
                        if ($filteredRows.length === $rows.length) {
                            $table.find('tbody').prepend($('<tr class="no-result text-center"><td colspan="'+ $table.find('.filters th').length +'">No result found</td></tr>'));
                        }
                    });
                });
                    </script>
                </div>>
            </section>
        </div>   
     </body>
</html>

When I load if from the side-bar (by pressing services) it loads, but the filter button doesnt work. (In order it looks good when I load it from the side-bar I added these 3 lines to the heaad of index.php)

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>

I understand that I need to put the code jquery of the button (that now in services.php) at the index.php. I tried it, but it doesnt work. Does anyone know what i do wrong?

Another question: When I load these pages in fade technique, I vant debug them using the F12. Any idea how can I do that? It might have helped me to understand the problem

Thank you

Edited August 7, 2020 by ohad
Adding the CSS file I forgot to ass originally

requinix · August 7, 2020

jQuery won't execute your scripts when you load it.

Quote

When calling .load() using a URL without a suffixed selector expression, the content is passed to .html() prior to scripts being removed. This executes the script blocks before they are discarded. If .load() is called with a selector expression appended to the URL, however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.

Move your Javascript into one or two files that you include on every page, then adjust the events so that their events don't have to attach to specific elements. For example, instead of

$('.filterable .btn-filter').click(function() {

which looks for a particular set of elements, attach it to the whole document:

$(document.body).on('click', '.filterable .btn-filter', function() {

Then you can pull in whatever content from whatever page and the event handlers will already be set up.

ohad · August 7, 2020

Thank you very much

Works great. Issue is closed

Sign In

Button activity

Recommended Posts

ohad

Link to comment

Share on other sites

requinix

Link to comment

Share on other sites

ohad

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information