Jump to content

Button activity

ohad

By ohad
in Javascript Help

 Share

Recommended Posts

ohad Member

ohad

Posted
Posted (edited)

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 by ohad
Adding the CSS file I forgot to ass originally
Link to comment
Share on other sites
requinix Prolific Member

requinix

Posted
Posted

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.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.