Adamhumbug

HI Both, Thanks for your info here - before seeing your replies, i wrote the following which seems to do what i want but as you said, it copies all of the content with it. I will have a look at cleaning this up and will post the new version once finalized. i=0; function myF() { console.log(i) var chunk = document.getElementById('newMenuItemLine'+i); var clone = chunk.cloneNode(true); i++; chunk.setAttribute("id", "newMenuItemLine" +i); document.getElementById('wrapper').appendChild(clone); }

Hi All, I have posted something on here before that was a lot more complicated that what i am trying to achieve here. I have not worked through the understanding of this yet so was hoping that a more simple method might give me a better start. I have the following HTML and i am looking to, on button click, add a new line with the same html. This will be part of a form so will need to be able to be submitted. I have been playing around with jquery but as i am learning i prefer javascript as i can see on each line what is happening. The html is <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <form action=""> <div class="input-group input-group-lg m-5" style="width:auto;"> <input class="form-control text-center " type="text" placeholder="Enter Menu Name..."> </div> <!-- start clone from here --> <div id="newMenuItemLine" class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text" id="inputGroup-sizing-default">Menu Item</span> </div> <textarea name="newMenuItem[]" type="text" class="form-control" style="height:60px;"></textarea> <div class="input-group-text"> <div class="form-check form-check-inline mr-0"> <input name="newMenuItemVegi[]" class="form-check-input" type="checkbox" data-toggle="toggle" data-style="mr-1" data-on="Vegitarian" data-off="Not Vegi" data-onstyle="success" data-offstyle="danger" data-size="sm"> </div> <div class="form-check form-check-inline mr-0"> <input name="newMenuItemVegan[]" class="form-check-input" type="checkbox" data-toggle="toggle" data-style="mr-1" data-on="Vegan" data-off="Not Vegan" data-onstyle="success" data-offstyle="danger" data-size="sm"> </div> <div class="form-check form-check-inline mr-0"> <input name="newMenuItemGf[]" class="form-check-input" type="checkbox" data-toggle="toggle" data-style="" data-on="Gluten Free" data-off="Not GF" data-onstyle="success" data-offstyle="danger" data-size="sm"> </div> </div> </div> <!-- end clone here --> </form> <div id="newRowButton" class="btn btn-primary float-right">New Line</div> I have added the bootstrap link to make it more clear if copying into something like liveweave

So i copied what you have above directly into my code and have selected one user, backed out and selected another, here are the console logs that i get. My code to show second modal $('#userDeleteConfirmationModal').on('show.bs.modal', function(event) { // Button that triggered the modal var button2 = $(event.relatedTarget) console.log(button2[0]); console.log(button2.data('userid')) console.log(event.relatedTarget) //data elements var userid = button2.data('userid') var firstname = button2.data('firstname') var lastname = button2.data('lastname') var activesheets = button2.data('activesheets').split(", ").join("<br/>") var modal = $(this) modal.find('#deleteUserConfLabel').text(firstname + ' ' + lastname) modal.find('#active-sheets-label').text('This user has the following active sheets') modal.find('#active-sheets').html(activesheets) modal.find('#staffMemberId').val(userid) }); First Try first modalhttps://adamhumbug.co.uk/user-list.php#userModal 2 <a id="callDeleteUserConf" class="btn btn-danger" data-toggle="modal" data-userid="2" data-activesheets="A new event, Chelsea's Event" href="#userDeleteConfirmationModal" data-firstname="Chelsea" data-lastname="Hockley"> 2 <a id="callDeleteUserConf" class="btn btn-danger" data-toggle="modal" data-userid="2" data-activesheets="A new event, Chelsea's Event" href="#userDeleteConfirmationModal" data-firstname="Chelsea" data-lastname="Hockley"> Second Try first modalhttps://adamhumbug.co.uk/user-list.php#userModal 8 <a id="callDeleteUserConf" class="btn btn-danger" data-toggle="modal" data-userid="8" data-activesheets="" href="#userDeleteConfirmationModal" data-firstname="First Name" data-lastname="Last Name"> 2 <a id="callDeleteUserConf" class="btn btn-danger" data-toggle="modal" data-userid="8" data-activesheets="" href="#userDeleteConfirmationModal" data-firstname="First Name" data-lastname="Last Name">

<a id="callDeleteUserConf" class="btn btn-danger" data-toggle="modal" data-userid="8" data-activesheets="" href="#userDeleteConfirmationModal" data-firstname="First Name" data-lastname="Last Name"> Yes its the right thing

Object [ a#callDeleteUserConf.btn.btn-danger ]

If i convert to json, i get the following {"0":{"jQuery33102125766444507042":{"lastname":"Jones","firstname":"Steve","activesheets":"","userid":9,"toggle":"modal"},"jQuery33102125766444507041":{"hasDataAttrs":true}},"length":1} when i select a new person it does update

console.log('button2' +button2) gives me button2[object Object]

Ahh, thanks yeah i updated that without positive effect.

The data-userid=8 is from the first go around when everything works as expected and doesnt seem to shed any light on it. Ahh, i caught and corrected that. Thanks

The confirmation modal has had its code updated $('#userDeleteConfirmationModal').on('show.bs.modal', function(event) { // Button that triggered the modal var button2 = $(event.relatedTarget) console.log(button2.data('userid')) console.log(event.relatedTarget) //data elements var userid = button2.data('userid') var firstname = button2.data('firstname') var lastname = button2.data('lastname') var activesheets = button2.data('activesheets').split(", ").join("<br/>") var modal = $(this) modal.find('#deleteUserConfLabel').text(firstname + ' ' + lastname) modal.find('#active-sheets-label').text('This user has the following active sheets') modal.find('#active-sheets').html(activesheets) modal.find('#staffMemberId').val(userid) }; Note the console logs: The first console.log(button2.data('userid')) gives me 8 and the second console.log(event.relatedTarget) gives me <a data-toggle="modal" data-userid="10" data-activesheets="" href="#userDeleteConfirmationModal" id="callDeleteUserConf" class="btn btn-danger" data-firstname="Sally" data-lastname="Lawrence">Delete User</a> which is very confusing as they are looking at the same thing

I have noticed that when the first modal is populated, the event.related target is /user-list.php#userModal On the second modal the event.related target is the delete button on the first modal that populates the second.

I have not but that sounds like a plan

i have just put some console logs in. i put the first at the end of the section with the comments "pass info from modal to modal putting data on the button" and the second at the end of the section with the comments "populate confirmation modal". The second one works fine first time but never changes after it has been used once. Keeps dumping the same value. I dont know if this is helpful

It would appear that that is correct. However, when the first modal launches, everything is being updated, it is only when the second launches that IT is not being updated. The button to launch the second modal has the following html <a data-toggle="modal" data-userid="10" data-activesheets="" href="#userDeleteConfirmationModal" id="callDeleteUserConf" class="btn btn-danger" data-firstname="Sally" data-lastname="Lawrence">Delete User</a> showing me that it is being updated and updates every time i pick a new user. First time around i can see the second modal being populated in inspector and can also see it not changing the second time it runs.

ok so the JS that is doing all of the work here is as follows: /////////////////////// //popuate user modal // /////////////////////// $('#userModal').on('show.bs.modal', function(event) { // Button that triggered the modal var button = $(event.relatedTarget) //data elements var userid = button.data('userid') var firstname = button.data('firstname') var lastname = button.data('lastname') var email = button.data('email') var level = button.data('accountlevel') var mobile = button.data('mobile') var role = button.data('role') var modal = $(this) modal.find('.modal-title').text('Update User') modal.find('.modal-body #UM-uid').val(userid) modal.find('.modal-body #UM-firstname').val(firstname) modal.find('.modal-body #UM-lastname').val(lastname) modal.find('.modal-body #UM-emailAddress').val(email) modal.find('.modal-body #UM-accountLevelId').val(level) modal.find('.modal-body #UM-mobileNumber').val(mobile) modal.find('.modal-body #UM-roleId').val(role) ///////////////////////////////////////////////////////////// //pass info from modal to modal putting data on the button // ///////////////////////////////////////////////////////////// var x = modal.find('#callDeleteUserConf'); x[0].dataset.userid = button.data('userid') x[0].dataset.activesheets=button.data('activesheets') x[0].dataset.firstname=button.data('firstname') x[0].dataset.lastname=button.data('lastname') }) //////////////////////////////// //populate confirmation modal // //////////////////////////////// $('#userDeleteConfirmationModal').on('show.bs.modal', function(event) { // Button that triggered the modal var button = $(event.relatedTarget) //data elements var userid = button.data('userid') var firstname = button.data('firstname') var lastname = button.data('lastname') var activesheets = button.data('activesheets').split(", ").join("<br/>") console.log(activesheets); var modal = $(this) modal.find('#deleteUserConfLabel').text(firstname + ' ' + lastname) modal.find('#active-sheets-label').text('This user has the following active sheets') modal.find('#active-sheets').html(activesheets) modal.find('#staffMemberId').val(userid) }) /////////////////// //stacking modal // /////////////////// $(document).ready(function () { $('#openBtn').click(function () { $('#myModal').modal({ show: true }) }); $(document).on('show.bs.modal', '.modal', function (event) { var zIndex = 1040 + (10 * $('.modal:visible').length); $(this).css('z-index', zIndex); setTimeout(function() { $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'); }, 0); }); I am not sure why the data on the confirmation modal is only populated once and not every time it is laoded

Thanks

@Barand are you able to move this to the JS forum please?

Its the js that is at the end of the code. var x = modal.find('#callDeleteUserConf'); x[0].dataset.userid = button.data('userid') x[0].dataset.activesheets=button.data('activesheets') x[0].dataset.firstname=button.data('firstname') x[0].dataset.lastname=button.data('lastname') }) pulling it from the button on the first modal and putting it on the delete button to be passed onto the second modal. I expected that it would update every time the modal was popped

I have a user table that is being used to show all of the users in the system. To edit a user you click the manage button at the end of a line -> this pops a modal. On that model there is the option to delete the user -> this pops a confirmation modal. This all works great. The issue comes when you get to the confirmation page and back out. If you then select another user and try and delete them, the information on the confirmation modal is that of the first user you went to delete. Find code below <?php if (session_status() == PHP_SESSION_NONE) { session_start(); } if (!isset($_SESSION['user_id'])){ header("location: index.php"); exit; } $_SESSION['this_page'] = 'users'; include '_includes/head.php'; ?> <div class="container-fluid"> <div class="row"> <?php include '_includes/header.php'; ?> </div> <div class="row"> <div class="col-sm-2 p-0 bg-dark text-light" style="height: calc(100vh - 50px);"> <?php include '_includes/nav.php'; ?> </div> <div class="col-sm-10"> <?php if(isset($_SESSION['updateUser'])){ $eqn = $_SESSION['user']; echo '<div id="infomessage" class="alert alert-'.$_SESSION["actionstatus"].' mt-3 text-center text-uppercase">'; echo $eqn . " " . $_SESSION['updateUser']; echo "</div>"; } unset($_SESSION['updateUser']); unset($_SESSION['user']); ?> <div class="userList"> <?php include '_includes/dbconn.php'; $stmt = $conn->prepare(" SELECT user_id, user_email, user_firstname, user_lastname, user_mobile, user_role_id, role_name, user_account_level_id, user_level_name, GROUP_CONCAT(job_eventname SEPARATOR ', ') as eventname from ssm_user left join ssm_role on role_id = user_role_id left join ssm_user_level on user_account_level_id = user_level_id left join ssm_job on job_manager_id = user_id Group by user_id "); $stmt->execute(); $stmt->bind_result( $uid, $ue, $ufn, $uln, $um, $urid, $urole, $ualid, $ulname, $ename); echo "<table class='table table-striped table-hover table-bordered text-center mt-3'><thead class='thead-dark'><tr> <th>User ID</th> <th>Full Name</th> <th>Email Address</th> <th>User Role</th> <th>System User Level</th>"; if($_SESSION['user_level']=='100'){ echo "<th>Admin</th>"; } echo "</thead></tr> <tbody>"; while($stmt->fetch()){ echo "<tr> <td class='align-middle'>" . $uid . "</td> <td class='align-middle'>" . $ufn . ' '. $uln . "</td> <td class='align-middle'>" . $ue . "</td> <td class='align-middle'>" . $urole."</td> <td class='align-middle'>" . $ulname . "</td>"; if($_SESSION['user_level']=='100'){ echo <<<TEXT <td><a class="btn btn-primary col-sm-12" data-toggle="modal" data-userid="$uid" href="#userModal" data-firstname="$ufn" data-lastname="$uln" data-email="$ue" data-accountlevel="$ualid" data-mobile="$um" data-role="$urid" data-activesheets="$ename">Manage</a></td> TEXT; } } echo "</tr> </tbody></table>"; ?> </div> <!-- User Modal --> <div class="modal fade" id="userModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="userModalLabel">Users</h4> <button type="button" class="close" data-dismiss="modal" > <span >&times;</span> </button> </div> <form method="POST" id="updateUserSubmit"> <div class="modal-body"> <ul class="nav nav-tabs mb-3 ml-3 mr-3"> <li class="nav-item"><a class="nav-link active" href="#tab1" data-toggle="tab">User Info</a></li> <li class="nav-item"><a class="nav-link" href="#tab2" data-toggle="tab">Password</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="tab1"> <input type="hidden" name="UM-uid" id="UM-uid"> <div class="md-form"> <div class="col-md-12 mb-3"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text modalprew">First Name</span> </div> <input name="UM-firstName" id="UM-firstName" type="text" class="form-control" placeholder="First Name" required> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text modalprew">Last Name</span> </div> <input name="UM-lastName" id="UM-lastName" type="text" class="form-control" placeholder="Last Name" required> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text modalprew">Mobile Number</span> </div> <input name="UM-mobileNumber" id="UM-mobileNumber" type="text" class="form-control" placeholder="Mobile Number" required> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text modalprew">Email Address</span> </div> <input name="UM-emailAddress" id="UM-emailAddress" type="text" class="form-control" placeholder="Email Address" required> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text modalprew">Role</span> </div> <select name="UM-roleId" id="UM-roleId" class="custom-select"> <?php $sql = "SELECT role_id, role_name FROM ssm_role ORDER BY role_name ASC"; if($result = mysqli_query($conn, $sql)){ if (mysqli_num_rows($result)>0){ while ($row = mysqli_fetch_array($result)){ echo "<option value='{$row['role_id']}'>{$row['role_name']}</option>"; } } } ?> </select> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text modalprew">User Level</span> </div> <select name="UM-accountLevelId" id="UM-accountLevelId" class="custom-select"> <?php echo "<option value ='0'>Please Select</option>"; $sql = "SELECT user_level_id, user_level_name, user_level_value From ssm_user_level ORDER BY user_level_name ASC"; if($result = mysqli_query($conn, $sql)){ if (mysqli_num_rows($result)>0){ while ($row = mysqli_fetch_array($result)){ echo "<option value='{$row['user_level_id']}'>{$row['user_level_name']}</option>"; } } } ?> </select> </div> </div> </div> </div> <div class="tab-pane" id="tab2"> <div class="md-form"> <div class="col-md-12 mb-3"> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text modalprew">New Password</span> </div> <input name="UM-pass" id="UM-pass" type="text" class="form-control" placeholder="New Password"> </div> <div class="input-group mb-3"> <div class="input-group-prepend"> <span class="input-group-text modalprew">Confirm Password</span> </div> <input name="UM-pass-conf" id="UM-pass-conf" type="text" class="form-control" placeholder="Confirm Password"> </div> </div> </div> </div> </div> </div> <div class="modal-footer"> <button id="updateUser" formaction="actions/update-user-action.php" type="submit" class="btn btn-success">Update User</button> <a data-toggle="modal" data-userid="" data-activesheets="" href='#userDeleteConfirmationModal' id="callDeleteUserConf" class="btn btn-danger">Delete User</a> </div> </form> </div> </div> </div> <!-- End Of User Modal --> <!-- Start of modal --> <div class="modal fade" id="userDeleteConfirmationModal" tabindex="-1" role="dialog"> <div class="modal-dialog" > <div class="modal-content"> <div class="modal-header"> <h4 class="modal-title" id="deleteUserConfLabel">Delete - </h4> <button type="button" class="close" data-dismiss="modal" > <span >&times;</span> </button> </div> <form method="POST" id="deleteUserConfForm"> <?php $uid = $_SESSION['user_id']; $stmt = $conn->prepare("SELECT user_firstname, user_lastname FROM ssm_user WHERE user_id = ?"); $stmt -> bind_param('i', $uid); $stmt -> execute(); $stmt -> store_result(); $stmt -> bind_result($fname, $lname); $stmt -> fetch(); ?> <div class="modal-body"> <div class="md-form"> <div class="col-md-12 mb-3"> <p id="active-sheets-label"></p> <p id="active-sheets"></p> <p>This action cannot be reversed</p> <div class="form-group"> <label id="reqConfVal" for="confirmationWithName"><?php echo $fname." ".$lname ?></label> <input type="text" class="form-control" id="confirmationWithName" placeholder="Enter Name"> <input name="staffMemberId" type="hidden" value="" id="staffMemberId"> <small id="conconfirmationWithNameHelp" class="form-text text-muted">Enter your full name as shown above to delete the user.</small> </div> </div> </div> </div> <div class="modal-footer"> <button class="btn btn-default">Cancel</button> <button name="delete-user-button" formaction="actions/delete-user-action.php" id="deleteUserButton" type="submit" class="btn btn-danger">Delete User</button> </div> </form> </div> </div> </div> <!-- end of modal --> <div class="col-sm-12"><?php include '_includes/footer.php'; ?></div> </div> </div> </div> <script> /////////////////////// //popuate user modal // /////////////////////// $('#userModal').on('show.bs.modal', function(event) { // Button that triggered the modal var button = $(event.relatedTarget) //data elements var userid = button.data('userid') var firstname = button.data('firstname') var lastname = button.data('lastname') var email = button.data('email') var level = button.data('accountlevel') var mobile = button.data('mobile') var role = button.data('role') var modal = $(this) modal.find('.modal-title').text('Update User') modal.find('.modal-body #UM-uid').val(userid) modal.find('.modal-body #UM-firstname').val(firstname) modal.find('.modal-body #UM-lastname').val(lastname) modal.find('.modal-body #UM-emailAddress').val(email) modal.find('.modal-body #UM-accountLevelId').val(level) modal.find('.modal-body #UM-mobileNumber').val(mobile) modal.find('.modal-body #UM-roleId').val(role) ///////////////////////////////////////////////////////////// //pass info from modal to modal putting data on the button // ///////////////////////////////////////////////////////////// var x = modal.find('#callDeleteUserConf'); x[0].dataset.userid = button.data('userid') x[0].dataset.activesheets=button.data('activesheets') x[0].dataset.firstname=button.data('firstname') x[0].dataset.lastname=button.data('lastname') }) //////////////////////////////// //populate confirmation modal // //////////////////////////////// $('#userDeleteConfirmationModal').on('show.bs.modal', function(event) { // Button that triggered the modal var button = $(event.relatedTarget) //data elements var userid = button.data('userid') var firstname = button.data('firstname') var lastname = button.data('lastname') var activesheets = button.data('activesheets').split(", ").join("<br/>") console.log(activesheets); var modal = $(this) modal.find('#deleteUserConfLabel').text(firstname + ' ' + lastname) modal.find('#active-sheets-label').text('This user has the following active sheets') modal.find('#active-sheets').html(activesheets) modal.find('#staffMemberId').val(userid) }) ///////////////////////////////// //set sidebar active indicator // ///////////////////////////////// if(document.getElementById('user')){ document.getElementById('user').classList.add('show') } if(document.getElementById('userList')){ document.getElementById('userList').classList.add('blOrange') } $('#infomessage').fadeIn('fast').delay(3000).fadeOut('3000'); /////////////////// //stacking modal // /////////////////// $(document).ready(function () { $('#openBtn').click(function () { $('#myModal').modal({ show: true }) }); $(document).on('show.bs.modal', '.modal', function (event) { var zIndex = 1040 + (10 * $('.modal:visible').length); $(this).css('z-index', zIndex); setTimeout(function() { $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'); }, 0); }); }); </script>

Yes i saw that one, i have checked the file and that is already in there.

Hi, This is from workbench. I get the same from sequel pro - both unable to connect yet i can with command line. Yes the credentials are correct as i am using the same ones with command line. I do indeed. It was a whimsical purchase a while ago but yes it is still remote for the next 6 months.

I am using 1&1 as my host and keep getting: Lost connection to MySQL server at 'reading initial communication packet', system error: 0

Excellent - thanks so much. Took me all day but i have learned how to get access to this and am now able to use it. Thanks again ssh username@host mysql --host=dbhostname --user=dbusername --password=dbpassword dbname

HI All, I have noticed that when people show database structure on forums like this one, they have it as a table, like the following: How do you create this?

I like this idea, makes a lot of sense.