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/popper.js@1.16.0/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: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

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?

OK problem solved The issue was $id = $value['ID']; once i changed names of fields to capital letters, all works fine

This still leaves $id from this $id = $value['id'] line null

Hi all, I have a query that return data into the array $row with values, but $id from the first line of the while stay null. Why? $con = oci_connect("xxx", "xxx", "xxx"); $query = "SELECT id, name from table_web WHERE record_module='AA' and parent_id='".$parentId."'"; $stid=oci_parse($con, $query); oci_execute($stid); while($value = oci_fetch_assoc($stid)) { $id = $value['id']; $row[$id]['id'] = $value['id']; $row[$id]['name'] = $value['name']; } return $row;

Ok, I did replacement of double quote symbol by using this data=data.replace(/['"]+/g, ""); before assigning the value to the in[put textbox Issue is closed

Ok tnx. did it. now it returned the data to the input textbox as i wanted but wrapped with "" is it ok? i just need to take care to ommit these "", or still i do something wrong?

Barand. The suggstion exit(json_encode($data)); didn't make a different. I did a change and the took the php code that was in the same page of the html and script to a different php page (which i put int the ajax url) Now I get data like this: [{:"productname":"product1"}] when i see it on debug it has the symbol of enter key before but when i try to use it in the success function: $('#productid_desc').val(data.productname); I get undefined. When I use it $('#productid_desc').val(data.); I get [{:"productname":"product1"}] in the input textbox What do i miss here?

Hi all I try to fill a readonly textbox on my page with a description of a product the user put in an product_id inputbox. for that I use a jquery and ajax as a json form but the result i get when i debug it is that the data.productname is undefined. I have no idea what is wrong with my code. Can anyone guide me to the reason? This is the part of the php that get the product desc from the database and the relevant sources I use of jquery and bootstrap btw after the json_encode i added json_last_error_msg and recieved no error message, so its something in the jquery in my understanding <?php if (isset($_POST['productid_typed'])) { $userid=$_POST['productid']; $stid = (DBOracle::getInstance()->get_product_desc($productid)); while ($row = oci_fetch_array($stid, OCI_ASSOC)) { $data=array(); $data['productname']=$row['P_DESC']; oci_free_statement($stid); oci_close($con); } echo json_encode($data); } ?> <html> <head> <meta charset="UTF-8"> <title>Product</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <link rel="stylesheet" href="../../bootstrap-4.5.0-dist/css/bootstrap.min.css" /> <script src="../../bootstrap-4.5.0-dist/js/bootstrap.min.js"></script> </head> and this is the part of the jquery and ajax (the productid_desc is an input box on the page that should be filled automaticaly) <script> $(document).ready(function() { $('#productid').focusout(function() { debugger; var productid=$('input[name=productid]').val(); if (productid!==' ') $.ajax ({ type:"POST", url:"index.php", data: { productid_typed: 1, productid: productid }, datatype:"json" , success:function(data) { $('#productid_desc').val(data.productname); } }) else { alert("Plase enter id"); } }); }); </script>

Thank you very much. Splitting the open_empty into 2 pages and call each of them seperatly did the work Issue solved

This is the main page. It take elements from the open_empty php file. The open_empty file has 3 parts on it. Header in which I have a logo image, footer that has a mailto element and in the middle a block i named external_block. I want to put all my other php pages into the area i declared external_block. Now it put the class i called "logon" beneth the footer. I want to put it in the area of the external_block. How can I do that? Here are the files php file: index.php (I removed irelevant parts from the file) <!DOCTYPE html> <?php require_once("../xxx/Includes/GlDbOra.php"); include("../xxx/open_empty.php"); $logonSuccess = false; //get user details if (isset($_POST['userid_typed'])) { $userid=$_POST['userid']; $stid = (DBOracle::getInstance()->get_user_details($userid)); while ($row = oci_fetch_array($stid, OCI_ASSOC)) { $username=$row['USERNAME']; $password=$row['PASSWORD']; } } if (isset($_POST['compid_typed'])) { $userid=$_POST['userid']; $username=$_POST['userid_desc']; $compid=$_POST['compid']; $compname = (DBOracle::getInstance()->get_company_name($compid)); } ?> <html> <head> <meta charset="UTF-8"> <title>Login</title> <script type="text/javascript" src="../../php-ajax/jquery-3.5.1.js"></script> <link href="../xxx/global_style.css" type="text/css" rel="stylesheet" madia="all"/> </head> <body> <div class="logon"> <form name="logon" id="logon" action="index.php" method="POST" > <span style="clear: both; float: left; margin-top: 20px; "> <label for="userid">User Id</label> <input type="text" name="userid" id="userid" class="regular_textbox" value="<?php echo $userid ?>" placeholder="<?php echo userid; ?>"/> <input type="text" name="userid_desc" id="userid_desc" class="regular_textbox" value="<?php echo $username ?>" readonly="readonly" disabled="disabled"/> <label for="password">Password</label> <input type="password" name="password" id="password" class="regular_textbox" placeholder="<?php echo password;?>"/> </span> <span style="clear: both; float: left; margin-top: 20px"> <label for="compid">Company</label> <input type="text" name="compid" id="compid" class="regular_textbox" value="<?php echo $compid ?>" placeholder="<?php echo compid;?>"/> <input type="text" name="compid_desc" id="compid_desc" class="regular_textbox" value="<?php echo $compname ?>" readonly="readonly" disabled="disabled" /> <label for="language">Language</label> <input type="text" name="language" id="language" class="regular_textbox" placeholder="<?php echo language;?>"/> <input type="text" name="language_desc" id="language_desc" class="regular_textbox" value="" readonly="readonly" disabled="disabled" /> </span> <span style="clear: both; float: right; margin-top: 20px"> <input type="submit" value="Login" id="login" style="margin-right: 500px; border-radius: 40px ; text-align:center;width: 220px; height: 30px;" class="" placeholder="<?php echo login;?>"/> </span> </form> </div> </body> </html> php file: open_empty.php - contains only html in it <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div class="logo_image"> <form name="logo_image" id="logo_image" > <img class="img" src="Images/logo_transparent.png" alt="header" /> </form> </div> <br> <div class="external_block"> </div> <br> <div class="footer"> <form name="footer" id="footer" > <footer> <a href="mailto:info@xxx.com">Contact Us</a> </footer> </form> </div> </body> </html> css file: global_style.css body { margin: 5px; background-color: rgb(245,245,235); } .logo_image{ transform: scale(0.5) translate (-110%, -100%); color: #0a2430; border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-top-left-radius: 10px; box-shadow: 5px 3px 7px 1px rgba(51, 51, 60, 0.61); } .regular_textbox { border-radius: 10px; text-align:center; width: 230px; height: 20px; } label { float: left; width: 85px; font: 18px 'Exo Medium 500', tahoma; } .footer { border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-top-left-radius: 10px; box-shadow: 5px 3px 7px 1px rgba(51, 51, 60, 0.61); height:30px; } .external_block, .logon { border-top-right-radius: 10px; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-top-left-radius: 10px; box-shadow: 5px 3px 7px 1px rgba(51, 51, 60, 0.61); height:720px; } input { display: run-in; float: left; margin: 6px; } Thank you

Till you replied I already noticed that and fixed it. I couldnt find a way to delete a post here. Sorry for that