John Davidson

javascript - Data fetch from a dropdown in one page to other dropdowns to a new page and other problems

0 comments
Message:


So far you have been more than helpful in all my newbie questions, and I really appreciate it! Moving to my next problem...


I have a page (see photo below), where on the left, I have a tree with circuits. These circuits have an edit page like the photo, so when I change a value in the edit of a circuit, then it's stored in the database. Imagine having 100 circuits where you have to go to each one and change their settings.



I also have second page with a table (see photo below), where I have summarized only the important settings. In that table, I am trying to fetch the data from page 1 to second page.



The problem is that most of the dropdowns in page 1 are dependable from another dropdown, so I am trying to create the same dropdowns in the second page inside the data table, where I will have the same dependable dropdowns. These are saved in the database, for sure, but I want when I change a value in page 2 to update page 1 and vice versa.


I would appreciate it if you could help me.


This page has something similar, but its impossible for me to implement, as I am new at this and I don't even really know where to put the JavaScript code.


https://markcell.github.io/jquery-tabledit/#examples
Example #6


<?php



    include ('./config/config.php');

    include ('./config/settings.php');

    include ('./controller/scripts/checklogin.php');



    $sql = "SELECT * FROM `Circuits` WHERE `id`=".$_REQUEST['db'];

    $sqltype='select';

    include ('./controller/scripts/query.php');

    $db=$records;



       $sql = "SELECT * FROM `Cables` WHERE `id`=".$db[0]['Cables_id'];

    $sqltype='select';

    include ('./controller/scripts/query.php');

    $cable=$records;

        

        $sql = "SELECT * FROM `MCBs` WHERE `id`=".$db[0]['MCBs_id'];

    $sqltype='select';

    include ('./controller/scripts/query.php');

    $mcb=$records;

        

    $sql = "SELECT * FROM `Meletes` WHERE `id`=".$_REQUEST['study'];

    $sqltype='select';

    include ('./controller/scripts/query.php');

    $study=$records;



//<---->    

    $sql = "SELECT * FROM `Meletes` WHERE `id`=".$tmpvalues[0]['Study'];

    $sqltype='select';

    include './controller/scripts/query.php';

    $study=$records;



    $sql = "SELECT `id` FROM `Circuits` WHERE `Meletes_id`=".$tmpvalues[0]['Study'];

    $sqltype='select';

    include './controller/scripts/query.php';

    $Dbs=$records;

    $Db = $Dbs[0]['id'];

    

    $sql = "SELECT id FROM `Circuits` WHERE `Symbol`=8 AND `Tree` like '%-".$Dbs[0]['id']."-%'";

    //echo $sql;

        //$sql="SELECT Calc1 FROM `DBOrder` WHERE CID=".$db[0]['id'];

    $sqltype='select';

    include ('./controller/scripts/query.php');

    $solar=$records;



// echo $tmpvalues[0]['Study'];

?>

    <style>

      #study-output img {

        width: 90px;

      }

    </style>

<body class="">

    <div class="container-fluid">

        <div class="row">

            <header class="main-header">

                <!-- Logo -->

                <a href="index.php?workflow=home" class="logo">

                    <!-- mini logo for sidebar mini 50x50 pixels -->

                    <span class="logo-mini"><b>E</b>C</span>

                    <!-- logo for regular state and mobile devices -->

                    <span class="logo-lg"><b>EL</b>Culator</span>

                </a>

                <!-- Header Navbar: style can be found in header.less -->

                <nav class="navbar navbar-static-top" role="navigation">

                  <?php include './blocks/navbar.php'; ?>

                </nav>

            </header>

            <!-- Left side column. contains the logo and sidebar -->

            <aside class="main-sidebar el-sidebar-color">

                <!-- sidebar: style can be found in sidebar.less -->

                <section class="sidebar">

                    <?php include './blocks/sitebar.php'; ?>

                </section>

                <!-- /.sidebar -->

            </aside>



            <!-- Content Wrapper. Contains page content -->

            <div class="el-right-sid content-wrapper">

            <!-- Content Header (Page header) -->



            <section class="content-header">

                <h1>

                  Elculator

                  <small>Edit Circuits </small>

                </h1>

                <ol class="breadcrumb">

                    <li><a href="/index.php"><i class="fa fa-file"></i> Home</a></li>

                    <li><a href="./index.php?workflow=studies"><?php echo "Studies";?></a></li>

                    <li><a href="./index.php?workflow=study&id=<?php echo $tmpvalues[0]['Study'];?>&page=db"><?php echo $study[0]['Name'];?></a></li>

                    <li class="active"><a href=""><?php echo "Edit Circuits"; ?></a></li>

                </ol>



<html>

<head>

<style>

table, th, td {

  font-family: Arial, Helvetica, sans-serif;

  border-collapse: collapse;

  width: 100%;

}



table, th, td {

  border: 1px solid #ddd;

  padding: 2px;

}



table tr:nth-child(even){background-color: #f2f2f2;}



table trr:hover {background-color: #ddd;}



table th {

  padding-top: 3px;

  padding-bottom: 3px;

  text-align: left;

  background-color: #FF5733;

  color: white;

}

</style>

</head>

<body>

<h4 style="text-decoration: underline; font-weight:bold"> EDIT CIRCUITS </h4>

<div style="overflow-x:auto;">

  <table>



  <tr>

    <th>ID</th>

    <th>DESCRIPTION</th>

    <th>LOAD (KW)</th>

    <th>LOAD (A)</th>

    <th>VOLT</th>

    <th>MCB</th>

    <th>(A)</th>

    <th>POLES</th>

    <th>(KA)</th>

    <th>RCD</th>

    <th>RCD TYPE</th>

    <th>CABLE TYPE</th>

    <th>REF. METHOD</th>

    <th>INST. METHOD</th>

    <th>PH+N CSA</th>

    <th>CPC CSA</th>

    <th>LENGTH</th>

    <th>V.DROP</th>

    <th></th>

 

 </tr>





<td>

<input type="text" name="Name" value="<?php echo  $formdata[0]['BRBLGR']; ?>" size="2"/>

</td>

<td>

<input type="text" name="Name" value="<?php echo  $formdata[0]['Name']; ?>" size="40"/>

</td>

<td>

<input type="text" name="Name" value="<?php echo  $formdata[0]['Load']; ?>" size="2"/>

</td>



<td>

<input type="text" name="Name" value="<?php echo  $formdata[0]['IDF']; ?>" size="2"/>

</td>



<td>

<input type="text" name="Name" value="<?php echo  $formdata[0]['Phase']; ?>" size="2"/>

</td>

<td>



<form>

  <select>

    <option>-- Select --</option>

    <?php

        $records = mysqli_query($db, "SELECT MCBs_id From Circuits");  // Use select query here 



        while($data = mysqli_fetch_array($records))

        {

            echo "<option value='". $formdata['MCBs_id'] ."'>" .$formdata['MCBs_id'] ."</option>"; 

        }   

    ?>  

  </select>

</form>

</td>



<td>

<input type="text" name="Name" value="<?php echo  $formdata[0]['MCBs_id']; ?>" size="2"/>

</td>



<td>

<input type="text" name="Name" value="<?php echo  $formdata[0]['MCBsRatingZS_id']; ?>" size="2"/>

</td>





<td>

<input type="text" name="Name" value="<?php echo  $formdata[0]['poles']; ?>" size="2"/>

</td>



<td>

<input type="text" name="Name" value="<?php echo  $formdata[0]['IscMCB']; ?>" size="2"/>

</td>



<td>

<input type="text" name="Name" value="<?php echo  $formdata[0]['Rcd']; ?>" size="2"/>

</td>



<td>

<input type="text" name="Name" value="<?php echo  $formdata[0]['RcdType']; ?>" size="2"/>

</td>



<td>

<input type="text" name="Name" value="<?php echo  $formdata[0]['Cables_id']; ?>" size="2"/>

</td>



<td>

<input type="text" name="Name" value="<?php echo  $formdata[0]['ReferenceMethod']; ?>" size="2"/>

</td>



<td>

<input type="text" name="Name" value="<?php echo  $formdata[0]['InstallationMethod']; ?>" size="2"/>

</td>



<td>

<input type="text" name="Name" value="<?php echo  $formdata[0]['Csa']; ?>" size="2"/>

</td>



<td>

<input type="text" name="Name" value="<?php echo  $formdata[0]['Cpc']; ?>" size="2"/>

</td>



<td>

<input type="text" name="Name" value="<?php echo  $formdata[0]['Length']; ?>" size="2"/>

</td>



<td>

<input type="text" name="Name" value="<?php echo  $formdata[0]['VD']; ?>" size="2"/>

</td>



        <td>

            <span class="table-remove">

              <button type="button" mdbBtn color="danger" rounded="true" size="sm" class="my-0" (click)="remove(id)">Delete</button>

            </span>

          </td>

        </tr>

      </table>

    </div>

  </div>

</div>



</table>



</style>

</head>







<br>



            </section><!-- /.content -->

            </div><!-- /.content-wrapper -->

            <?php include './blocks/footer.php'; ?>



        </div><!-- row -->

    </div><!-- container-fluid -->



        <!-- jQuery 2.1.4 -->

        <script src="./template/<?php echo $template;?>/plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>

        <!-- Bootstrap 3.3.2 JS -->

        <script src="./template/<?php echo $template;?>/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>

        <!-- <script src="./template/<?php echo $template;?>/dist/js/ajax.js"></script>

        <script src="./template/<?php echo $template;?>/dist/js/context-menu.js"></script>

        <script src="./template/<?php echo $template;?>/dist/js/drag-drop-folder-tree.js"></script> -->

        <!-- <script src="./template/<?php echo $template;?>/dist/js/Chart.js"></script> -->

        <script src="./template/<?php echo $template;?>/dist/js/custom.js"></script>



        <!-- FastClick -->

        <script src="./template/<?php echo $template;?>/plugins/fastclick/fastclick.min.js" type="text/javascript"></script>

        <!-- AdminLTE App -->

        <script src="./template/<?php echo $template;?>/dist/js/app.min.js" type="text/javascript"></script>

        <!-- ChartJS 1.0.1 -->

        <!-- <script src="./template/<?php echo $template;?>/plugins/chartjs/Chart.min.js" type="text/javascript"></script> -->

        <!-- AdminLTE dashboard demo (This is only for demo purposes) -->

        <script src="./template/<?php echo $template;?>/dist/js/pages/dashboard2.js" type="text/javascript"></script>



</body>

My Answer:
To achieve this functionality, you can use JavaScript to fetch the data from the dropdown in the first page and populate the dropdowns in the second page with the same data. You can also use JavaScript to update the dropdown in the first page when a value is changed in the second page.

Here is a general outline of how you can approach this:

1. In the first page, when a dropdown value is changed, you can use an event listener to capture the change event and update the corresponding dropdown in the second page. You can use AJAX to send the updated value to the server and fetch the updated data for the dropdown in the second page.

2. In the second page, when a dropdown value is changed, you can use a similar approach to update the corresponding dropdown in the first page. Again, you can use AJAX to send the updated value to the server and fetch the updated data for the dropdown in the first page.

3. You can use localStorage or sessionStorage to store the selected values in the dropdowns so that they can be accessed and updated across different pages.

4. You can include the JavaScript code in the HTML file of both pages, either in the head section or at the end of the body section.

5. You can use jQuery or plain JavaScript to manipulate the DOM and update the dropdown values.

Here is a simple example of how you can update a dropdown in the second page based on the selected value in the first page:

javascript
// First page
$('#dropdown1').on('change', function() {
var selectedValue = $(this).val();

// Update dropdown in second page
$('#dropdown2').val(selectedValue);
});


This is just a starting point, and you may need to modify and expand on this code based on your specific requirements and the structure of your pages. Let me know if you need further assistance or clarification.

Rate this post

4 of 5 based on 1829 votes

Comments



© 2024 Hayatsk.info - Personal Blogs Platform. All Rights Reserved.
Create blog  |  Privacy Policy  |  Terms & Conditions  |  Contact Us