ohad

I saw in the documentary how to expand a node. My problem is that I don't know which event should trigger the expanding. I need an event like onNodeSelected that call a function that do that expansion. The node will be defined under that function I hope i explained myself better Thank you

Hi, Thanks for the clarification. I tried look at the documentation, and I didn't find. Its bootstrap-treeview version 1.2.0 of Jonathan Miles. https://github.com/jonmiles/bootstrap-treeview

Hi, I populate a tree view from database using jquery and ajax. the next phase I want is to expand a scpecific parentId. Here is my code: <div class="col md-2" id="treeview_json"> </div> $(document).ready(function() { var pageURL = $(location).attr("href"); var url = '/path/to/fill_sidebar.php'; $.ajax ({ type: "GET", url: url, dataType: "json", success: function(data) { var parent_node_id; var onTreeNodeSelected = function (e, node) { GetNodeData(node.link, node.tags) } $('#treeview_json').treeview ({ data: data, backColor: 'white', expandIcon: 'fa fa-plus fa-fw', collapseIcon: 'fa fa-minus fa-fw', showBorder: false, enableLinks: true, onNodeSelected: onTreeNodeSelected, }); }, error: function(response) { alert(response.errorMsg); } }); }); I want to get a specific parentId of a node and after filling the treeview, i want to expand it something like $('#treeview_json').treeview('expandNode', [node.parentId]); Can anyone explain to me how can I do that? Thank you

Thank you very much. Your reply helped me to understand that Im not looking at the place of the problem. So I checked, and find out my mistake. I had another function $(document).on('select change', '#group_id', function() that was suppose to serve other page, and that caused the recursion

Hi, I have a page that contain several input boxes and select box The select box has extra data elements (name_id, group_id, group_id desc) <div class="form-group mt-1"> <select class="selectpicker" data-live-search="true" name="name_desc" id="name_desc" title="" style="width:150px;"> <option value="1 - Name 1" data-name_id="1" data-group_id="1" data-group_id_desc="Group 1">1 - Name 1</option> <option value="2 - Name 2" data-name_id="2" data-group_id="2" data-group_id_desc="Second">2 - Name 2</option> </select> </div> <div class="form-group mt-1"> <input type = "hidden" name = "name_id" id="name_id" class="form-control form-control-input" value = "" title="" style="width:100px;"> <label class="form-control-placeholder" for="name_id">Name</label> </div> <div class="form-group mt-1"> <input type="hidden" name="group_id" id="group_id" class="form-control form-control-input" value=" " title="" readonly="" style="width:100px;" /> <label class="form-control-placeholder" for="group_id">Group</label> </div> <div class="form-group mt-1"> <input type="text" name="group_id_desc" id="group_id_desc" class="form-control form-control-input" value=" " title="" readonly="" enabled="false" style="width:180px;" /> <label class="form-control-placeholder" for="group_id_desc">Description</label> </div> I populate this boxes by Javascript $(document).on('select change', '#name_desc', function() { var name_id = $(this).find(':selected').data('name_id'); var name_desc = $(this).find(':selected').text(); var group_id = $(this).find(':selected').data('group_id'); var group_id_desc = $(this).find(':selected').data('group_id') + ' - ' + $(this).find(':selected').data('group_id_desc'); $('#name_id').val(name_id); $('#name_desc').val(name_desc); $('#group_id').val(group_id); $('#group_id_desc').val(group_id_desc); }) Becaue I populate the input boxes by JS, and I need to do an action when the group_id is changing, I tried to trigger change event: $('#group_id').trigger('change'); and the change should call a function $(".form-control-input").on("change", changefloat); // and here is the fuction function changefloat () { $(this).parents(".form-group").children("label").addClass("changefloat"); } This makes the system to run in circles till I get an error: Uncaught RangeError: Maximum call stack size exceeded How can I force the system to trigger the change event without going into that loop? Thank you

Hi I have a query script whick is triggered on click event of button which its id is "save_rows" When the user manually press the save button, the script works as I want This script header looks like that: $(document.body).on('click', '#save_rows', function(e) { In another place in my app i need to use the same script, but from another jquery script. Is there a way I can call this script from inside another jquery script? Thank you

ok Solved it

Hi All, I have a question regarding arrays I get a data from a field in Oracle DB into a variable: This is the procedure i run: $Param_String=DBOracle::getInstance()->get_job_params($seq); and this is what $Param_string stores after: (string) "Id"=>"1" Then I run this command $parameters=array($Param_String); Now, $Parameters is like this: array(1) ( [0] => (string) "Id"=>"1" ) If i write the code that way: $id='"1"'; $parameters=array("id" => $id); Then, $Parameters is like this: array(1) ( [id] => (string) "1" ) My problem: I want $Parameters to be like the last option when I get the data from the database. The string in the DB (like "Id"=>"1") can be list of such pairs seperated by comma (,). for example ("Id"=>"1", "param2"=>"test_val", "param3"=>"test_val2"...) How can I do that?

Hello I have 2 database tables: 1) products which contain 3 columns: id, description and unit 2) units which contains 2 columns: id and description I need to pupulate html table with data from 2 database tables.this is the structure: id, description, unit, unit_description (the first 3 columns come from table 1 and the fourth column from table 2 I know hot to pupulate the table according to the 3 columns: (the remarks are for the 4th column that i dont know how to call). I want this column to get the description of the unit in the row from the second table in the database - using the get_unit_desc in the GlDbOra.php file (Not by making a join in the select) How can I do that? I'll be happy for any help index.php <?php require_once("../xxx/Includes/GlDbOra.php"); $cursor=''; $cursor=DBOracle::getInstance()->get_products(); ?> <html> <head> <meta charset="UTF-8"> <title>Products</title> <script type="text/javascript" src="../../Bundles/php-ajax/jquery-3.5.1.js"></script> <script src="../Bundles/bootstrap-4.5.0-dist/js/bootstrap.min.js"></script> <link href="../Bundles/bootstrap-4.5.0-dist/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link href="../xxx/css/global_style.css" type="text/css" rel="stylesheet" madia="all"/> </head> <body> <div class="container"> <div class="row"> <div class="panel panel-primary filterable"> <div class="panel-heading"> <h3 class="panel-title">Products</h3> <div class="pull-right"> <button class="btn btn-default btn-xs btn-filter"><span class="glyphicon glyphicon-filter"></span> Filter</button> </div> </div> <form id="data_form" name="datatable_form" method="POST"> <div class="table-repsonsive"> <table class="table table-bordered" id="tab_logic"> <thead> <tr class="filters" id="table_header_2_btn"> <th width="12%"><input type="text" class="form-control" name="Id[]" value="" placeholder="Id" disabled /></th> <th width="30%"><input type="text" class="form-control" name="DESCRIPTION[]" value="" placeholder="Description" disabled /></th> <th width="12%"><input type="text" class="form-control" name="UNIT[]" value="" placeholder="Unit" disabled /></th> <!-- <th width="30%"><input type="text" class="form-control" name="UNIT_DESCRIPTION[]" value="" placeholder="Description" disabled /></th> --> <th width="12%"></th> </tr> </thead> <tbody> <?php foreach ($cursor as $cursorCurrentRow) { echo '<tr class="form-group">'; echo "<td width=".'"12%"><input type="text" name="ID[]" value="'.htmlspecialchars($cursorCurrentRow['ID'], ENT_QUOTES).'" disabled style="border:none;"></td>'; echo "<td width=".'"30%"><input type="text" name="DESCRIPTION[]" value="'.htmlspecialchars($cursorCurrentRow['DESCRIPTION'], ENT_QUOTES).'" disabled style="border:none;"></td>'; echo "<td width=".'"12%"><input type="text" name="UNIT[]" value="'.htmlspecialchars($cursorCurrentRow['UNIT'], ENT_QUOTES).'" disabled style="border:none;"></td>'; // echo "<td width=".'"30%"><input type="text" name="UNIT_DESCRIPTION[]" value="'.htmlspecialchars($cursorCurrentRow['DESCRIPTION'], ENT_QUOTES).'" disabled style="border:none;"></td>'; echo "<td width=".'"12%">' . '<a class='.'"add" title='.'"Add" data-toggle='.'"tooltip"><i class='.'"material-icons">&#xE03B;</i></a>' . '<a class='.'"edit" title='.'"Edit" data-toggle='.'"tooltip"><i class='.'"material-icons">&#xE254;</i></a>' . '<a class='.'"delete" title='.'"Delete" data-toggle='.'"tooltip"><i class='.'"material-icons">&#xE872;</i></a>' . '</td>'; echo "</tr>\n"; } ?> </tbody> </table> </div> </form> </div> <button class="regular_button" id="add-new"><span class="glyphicon glyphicon-plus"></span> Add Rows</button> <button class="regular_button" id="save_rows"><span class="glyphicon glyphicon-floppy-save"></span> Save</button> </div> </div> </body> </html> GlDbOra.php <?php class DBOracle { private static $instance = null; public static function getInstance() { if (!self::$instance instanceof self) { self::$instance = new self; } return self::$instance; } public function __clone() { trigger_error('Clone is not allowed.', E_USER_ERROR); } public function __wakeup() { trigger_error('Deserializing is not allowed.', E_USER_ERROR); } public function __construct () { $databaseConfig = include 'config.php'; $OracleUser=$databaseConfig['Oracle_User']; $OraclePwd=$databaseConfig['Oracle_Pwd']; $OracleDB=$databaseConfig['Oracle_DB']; $this -> OracleUser = $OracleUser; $this -> OraclePwd = $OraclePwd; $this -> OracleDB = $OracleDB; $this->con = oci_connect($this->OracleUser, $this->OraclePwd, $this->OracleDB); if (!$this->con) { $e = oci_error(); trigger_error(htmlentities($e['message'], ENT_QUOTES), E_USER_ERROR); exit; } } public function get_products() { $cursor=''; $query = "begin get_products(:cursor); end;"; $stid = oci_parse($this->con, $query); $p_cursor = oci_new_cursor($this->con); oci_bind_by_name($stid, ':cursor', $p_cursor, -1, OCI_B_CURSOR); oci_execute($stid); oci_execute($p_cursor, OCI_DEFAULT); oci_fetch_all($p_cursor, $cursor, null, null, OCI_FETCHSTATEMENT_BY_ROW); oci_free_statement($stid); oci_close($this->con); return $cursor; } public function get_unit_desc($unitid) { $unit_desc=''; $query = "begin :unit_desc_bv := get_unit_desc(:id_bv); end;"; $stid = oci_parse($this->con, $query); oci_bind_by_name($stid, ':id_bv', $unitid); oci_bind_by_name($stid, ':unit_desc_bv', $unit_desc,30); oci_execute($stid); oci_free_statement($stid); oci_close($this->con); return $unit_desc; } } ?>

Hi I have a table i populate from database (upon a parameter the user insert and with PHP $_GET i take this value and populate the table accordint to if). After I allow the user to add or edit data in rows by using jquery. The last part I do is to want to save the changes back to database using PHP. The jquery i use suppose to serve different tables. So its written in a way that get the table structure and add rows upon it. In this example I put it in the index page Everything works fine,but I cant build the array from the added rows. My variables in the php part got null values (although in debug mode I see that $_POST... store data in the array What do I miss here? Thanks here is my php+ html part of index,php <?php require_once("../xxx/Includes/GlDbOra.php"); if(isset($_POST['submit_btn'])) { $catalog_id=$_GET['catalog_id']; $tableRow = $_POST['tableRow']; foreach ($tableRow as $row) { $item_id=$row['ITEM_ID']; $item_name=$row['ITEM_NAME']; $userid=$_SESSION['userid']; $program='PHP'; $stid=DBOracle::getInstance()->insert_items($catalog_id, $item_id, $item_name, $userid, $program); } } if (!empty($_GET['catalog_id'])) { $catalog_id=trim($_GET['catalog_id']); $catalog_id_desc=$_GET['catalog_id_desc']; $stid=DBOracle::getInstance()->get_items($catalog_id); } ?> <html> <head> <meta charset="UTF-8"> <title>Items</title> <script type="text/javascript" src="../../Bundles/php-ajax/jquery-3.5.1.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script> <script type="text/javascript" src="../../Bundles/bootstrap-4.5.0-dist/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> <link href="../../Bundles/bootstrap-4.5.0-dist/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <link href="../xxx/css/global_style.css" type="text/css" rel="stylesheet" madia="all"/> </head> <body> <div id="page-wrap"> <section id="main-content"> <div id="guts"> <span style="clear: both; float: left; margin-left: 5%;"> <form id="param_form" name="populate_table" method="GET" action="index.php"> <label for="catalog_id">Catalog Id</label> <input type="text" name="catalog_id" class="catalog_id" id="left_radius_textbox" value=" <?php echo htmlspecialchars($catalog_id, ENT_QUOTES); ?>" placeholder="<?php echo catalog_id; ?>"/> <input type="text" name="catalog_id_desc" class="catalog_id_desc" id="right_radius_textbox" value=" <?php echo htmlspecialchars($catalog_id_desc, ENT_QUOTES); ?>" readonly /> <button class="load_form"><span class="glyphicon glyphicon-refresh"></span> Get Data</button> </form> </span> <br> <div class="container"> <div class="row"> <div class="panel panel-primary filterable"> <div class="panel-heading"> <h3 class="panel-title">Items</h3> <div class="pull-right"> <button class="btn btn-default btn-xs btn-filter"><span class="glyphicon glyphicon-filter"></span> Filter</button> </div> </div> <form id="form" name="form1" method="POST" action=""> <table class="table table-fixed" id="tab_logic"> <thead> <tr class="filters" id ="table_header_2_btn"> <th class="col-xs-2"><input type="text" name="tableRow[0]['ITEM_ID']" value="" placeholder="Item Id" disabled></th> <th class="col-xs-6"><input type="text" name="tableRow[0]['ITEM_NAME']" value="" placeholder="Description" disabled></th> <th class="col-xs-4"></th> </tr> </thead> <tbody> <?php $catalog_id=$_GET['catalog_id']; $count=0; while ($row= oci_fetch_array($stid, OCI_ASSOC)): echo "<tr>"; echo "<td class=".'"col-xs-2"><input name="tableRow['.$count.']['."'ITEM_ID']".'"'.' value="'.htmlspecialchars($row['ITEM_ID'], ENT_QUOTES).'" style='."'border:none;".'></td>"'; echo "<td class=".'"col-xs-6"><input name="tableRow['.$count.']['."'ITEM_NAME']".'">'.htmlspecialchars($row['ITEM_NAME'], ENT_QUOTES)."</td>"; $count++; ?> <td class="col-xs-4"> <a class="add" title="Add" data-toggle="tooltip"><i class="material-icons"></i></a> <a class="edit" title="Edit" data-toggle="tooltip"><i class="material-icons"></i></a> <a class="delete" title="Delete" data-toggle="tooltip"><i class="material-icons"></i></a> </td> <?php echo "</tr>\n"; endwhile; oci_free_statement($stid); oci_close($con); ?> </tbody> <tr> <button class="regular_button" id="add-new"><span class="glyphicon glyphicon-plus"></span> Add Rows</button> <td><input type="submit" name="submit_btn" value="Submit"></td> </tr> </table> </form> </div> </div> </div> </div> </section> </div> <script> </script> </body> </html> and here is the jquery part in the index.php (that in between the <script></script>) $(document.body).on('click', '#add-new', function() { $('[data-toggle="tooltip"]').tooltip(); var actions = $("#tab_logic td:last-child").html(); $(this).attr("disabled", "disabled"); var index = $("#tab_logic tbody tr:last-child").index(); var newRow = $("<tr>"); var cols = ""; var element_string=''; var table_structure = $('#table_header_2_btn')[0].innerHTML; table_structure=$.trim(table_structure); var arrStr = table_structure.split(/\n/g); for(var i=0; i<arrStr.length-1; i++) { arrStr[i] =$.trim(arrStr[i]); element_string=arrStr[i]; if (element_string.indexOf('<th')!=-1) { var n=element_string.indexOf('<th'); element_string='<td'+ element_string.substr(n+3); var n=element_string.indexOf('[0]'); element_string= element_string.substr(0,n)+'['+index+']'+element_string.substr(n+3); } if (element_string.indexOf('placeholder=')!=-1) { var n=element_string.indexOf('placeholder='); element_string=element_string.substr(0,n-1); element_string=element_string + '</td>'; } cols+=element_string; } cols+='<td class="col-xs-4">' + actions + '</td>' cols +='</tr>'; newRow.append(cols); $('#tab_logic').append(newRow); $("#tab_logic tbody tr").eq(index + 1).find(".add, .edit").toggle(); $('[data-toggle="tooltip"]').tooltip(); }); $(document).on("click", ".add", function() { var empty = false; var input = $(this).parents("tr").find('input[type="text"]'); input.each(function() { if(!$(this).val()) { $(this).addClass("error"); empty = true; } else { $(this).removeClass("error"); } }); $(this).parents("tr").find(".error").first().focus(); if(!empty) { input.each(function() { // $(this).parent("td").html($(this).val()); }); $(this).parents("tr").find(".add, .edit").toggle(); $("#add-new").removeAttr("disabled"); } }); $(document).on("click", ".edit", function() { $(this).parents("tr").find("td:not(:last-child)").each(function() { $(this).html('<input type="text" value="' + $(this).text() + '">'); }); $(this).parents("tr").find(".add, .edit").toggle(); $("#add-new").attr("disabled", "disabled"); }); $(document).on("click", ".delete", function() { $(this).parents("tr").remove(); $("#add-new").removeAttr("disabled"); });

Hi all, I try to populate html table by query and ajax. The idea is that i have a textbox in which the user enter a code, the system get its description upon focusout event from the database. (This section works well) After that, upon double click on the description that was retrived, the js should populate the table upon the code the user enterd. The problem is that in this case i get an error: Uncaught TypeError: Cannot use 'in' operator to search for 'length' in I tried to search the web. Most suggest to add JSON.parse. But the data is already on JSON format, so I dont need to do it. Does anyone see what do I miss in here? Here are my codes files Thank you index.php: <!DOCTYPE html> <?php require_once("../xxx/Includes/GlDbOra.php"); if ($_SERVER['REQUEST_METHOD'] == "POST" && !empty($_POST['CATALOG_ID'])) { session_start(); $_SESSION['CATALOG_ID'] =$_POST['CATALOG_ID']; } ?> <html> <head> <meta charset="UTF-8"> <title>Budget Items</title> <script type="text/javascript" src="../../php-ajax/jquery-3.5.1.js"></script> <script src="../../bootstrap-4.5.0-dist/js/bootstrap.min.js"></script> <script type='text/javascript' src='js/item_funcs.js'></script> <link href="../xxx/css/global_style.css" type="text/css" rel="stylesheet" madia="all"/> <link href="../../bootstrap-4.5.0-dist/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> </head> <body> <div id="page-wrap"> <section id="main-content"> <div id="guts"> <span style="clear: both; float: left; margin-left: 5%;"> <label for="catalog_id">Catalog Id</label> <input type="text" name="catalog_id" class="catalog_id" value=" <?php echo htmlspecialchars($catalog_id, ENT_QUOTES); ?>" placeholder="<?php echo catalog_id; ?>"/> <input type="text" name="catalog_id_desc" class="catalog_id_desc" readonly /> </span> <br> <div class="container"> <div class="row"> <div class="panel panel-primary filterable"> <div class="panel-heading"> <h3 class="panel-title">Items</h3> </div> <table class="table table-fixed"> <thead> <tr class="filters"> <th><input type="text" class="col-xs-2" placeholder="Item Id" disabled></th> <th><input type="text" class="col-xs-6" placeholder="Description" disabled></th> <th class="col-xs-2"></th> <th class="col-xs-2"></th> </tr> </thead> <tbody> </tbody> </table> </div> <form name="AddNewItem" action="budget_items.php"> <button class="load_form" value="insert_with_predifined"><span class="glyphicon glyphicon-plus"></span> Add Item</button> </form> </div> </div> </div> </section> </div> </body> </html> GlDbOra.php <?php class DBOracle { private static $instance = null; private $OracleUser="xxx"; private $OraclePwd="xxx"; private $OracleDB="xxx"; public static function getInstance() { if (!self::$instance instanceof self) { self::$instance = new self; } return self::$instance; } // The clone and wakeup methods prevents external instantiation of copies of the Singleton class, // thus eliminating the possibility of duplicate objects. public function __clone() { trigger_error('Clone is not allowed.', E_USER_ERROR); } public function __wakeup() { trigger_error('Deserializing is not allowed.', E_USER_ERROR); } public function __construct () { $this->con = oci_connect($this->OracleUser, $this->OraclePwd, $this->OracleDB); if (!$this->con) { $m = oci_error(); echo $m['message'], "\n"; exit; } } public function get_general_codes_desc($table_code, $value_code) { $query = "begin get_gcodes_desc(:table_code_bv, :value_code_bv, :value_desc_bv); end;"; $stid = oci_parse($this->con, $query); oci_bind_by_name($stid, ':table_code_bv', $table_code); oci_bind_by_name($stid, ':value_code_bv', $value_code); oci_bind_by_name($stid, ':value_desc_bv', $value_desc,30); oci_execute($stid); oci_free_statement($stid); oci_close($this->con); return $value_desc; } public function get_items($catalog_id) { $id=0; $query = "select * from items_catalog where catalog_id=:catalog_id_bv"; $stid = oci_parse($this->con, $query); oci_bind_by_name($stid, ':catalog_id_bv', $catalog_id); oci_execute($stid); while($value = oci_fetch_assoc($stid)) { $row1[$id]['item_id'] = $value['ITEM_ID']; $row1[$id]['item_name'] = $value['ITEM_NAME']; $id++; } return $row1; } } ?> global_functions.php <?php require_once("Includes/GlDbOra.php"); // function selector switch($_GET['method']) { case 'get_catalog_desc': get_catalog_desc(); break; case 'get_items': get_items(); break; default: echo "Unknown method"; break; } function get_catalog_desc() { //get username from oracle DB $catalog_id=$_POST['catalog_id']; $data = (DBOracle::getInstance()->get_general_codes_desc("CATIND",$catalog_id)); echo json_encode($data); } function get_items() { $catalog_id=$_POST['catalog_id']; $data = (DBOracle::getInstance()->get_items($catalog_id)); echo json_encode(array_values($data)); } ?> Here is the javascript file i use name item_funcs.js: $(document).on('focusout', '.catalog_id', function() { var catalog_id=$(this).val(); catalog_id=$.trim(catalog_id); if (catalog_id!==' ') { $.ajax ({ method:"POST", url:"../xxx/global_functions.php?method=get_catalog_desc", data: { "catalog_id": catalog_id, }, datatype:"JSON" , success:function(data) { data=data.replace(/['"]+/g, ""); $('.catalog_id_desc').val(data); // load_items(catalog_id); }, error: function(data) { alert(data.errorMsg); } }); } else { alert("Please enter code"); } }); $(document).on('dblclick', '.catalog_id_desc', function() //function load_items(catalog_id) { var catalog_id=$('input[name=catalog_id]').val(); $.ajax ({ method:"POST", url:"../xxx/global_functions.php?method=get_items", data: { "catalog_id": catalog_id, }, datatype:"JSON" , success:function(data) { load_items(data) }, error: function(data) { alert(data.errorMsg); } }); }); function load_items(data) { $.each(data, function(index, obj) { var row = $('<tr>'); row.append('<td>' + obj.item_id + '</td>'); row.append('<td>' + obj.item_name + '</td>'); $('tbody').append(row); }); }

Thank you very much Works great. Issue is closed

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:[email protected]">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

Hi I use bootstrat treeview which is build upon a databse query. I have no idea how many nodes will apear at the treeview. I limit its size by using min-height and overflow-y:scroll in the css file it all looks good when the nodes are folded. but when i open a node it exceed the limit i declared. Does anyone has an idea how can i limit the height of the treeview no matter if nodes are expanded? Thank you

Hi All I have a site which is built from 3 folders: folder1 frolder2 frolder3 folder1 is the "master" folder. Means, In it I have the login page, connecxtion to DB elements, and header, footer and bootstrap treeview sidebar which I want to use in all the pages of the site. folders 2 and 3 each store all pages concern a specific vertical. The sidebar, which is located at folde1 retrive the content from database using AJAX, and Ive overloaded some of the original css by using custom css. here is psrt of the sidebar code: <link href="custom.css" type="text/css" rel="stylesheet" madia="all"/> <script type="text/javascript"> $(document).ready(function() { var treeData; $.ajax ({ type: "GET", url: "fill_sidebar.php", dataType: "json", When I load this sidebar to pages inside folder1 all works great The loading is done by this code: <script> $(document).ready(function () { $('#sidebar').load('sidebar.php'); }); </script> The loading for folder 2 is done by this code: <script> $(document).ready(function () { $('#sidebar').load('../folder2/sidebar.php'); }); </script>> When I try to load it to pages from other folder2 or 3 I get erroe message (in developer tools): folder2/custom.css net::ERR_ABORTED 404 (Not Found) jquery-3.5.1.js:10099 GET http://localhost/xxx/folder2/fill_sidebar.php 404 (Not Found) Of course, I i copy these files to folder2 all works fine, but I dont want to do that. I want to maintain only one file. My question is how to make these loads relative to the page I load?