Displaying conflicts in a single page by clicking on a checkbox

When I click on the <thead> checkbox of the first Table, it also checks the 2nd Table checkbox. However, that is not what I need. When I click on the First thead checkbox, all checkboxes in the first Table should be checked.

Also, when I click on File-Name.mp4, it should go to a URL link path. But if I remove e.preventDefault();, the checkbox stops working.

I've been trying this but encountering errors even in the First Table... :(

$('.dashboard-table-tbody tr').click(function(e) {

  if ($(this).hasClass('active')) {
    $(this).removeClass('active');
    $(this).children('td').children('div').children('input').prop('checked', false);
  } else {
    $(this).addClass('active');
    $(this).children('td').children('div').children('input').prop('checked', true);
  }

  if ($('.table tbody').find('input:checkbox:checked').length === $('.table tbody').find('input:checkbox').length) {
    $(".headerCheckbox").prop('checked', true);
  } else {
    $(".headerCheckbox").prop('checked', false);
  }
  e.preventDefault();

});

$(".headerCheckbox").click(function(e) {

  if ($(this).is(":checked")) {
    $(".table tbody tr").addClass("active");
    $(".table tbody tr input:checkbox").prop('checked', true);
  } else {
    $(".table tbody tr").removeClass("active");
    $(".table tbody tr input:checkbox").prop('checked', false);
  }
});
.dashboard-table-responsive {
  background: #fff;
  box-shadow: 0 7px 23px #eeeff1;
  margin-top: 10px;
}

.dashboard-table {
  margin-bottom: 0;
  font-size: 13px;
  line-height: 15px;
  color: #8b8e8c;
}

.dashboard-table th {
  border: none;
  padding: 8px 12px;
  font-weight: 600;
}

.dashboard-table td {
  padding: 12px 12px 12px 12px;
  vertical-align: middle;
}

.dashboard-table a {
  font-weight: 600;
}

.table-checkbox-col-head {
  width: 44px;
}

.table-checkbox {
  padding: 0;
  min-height: auto;
  width: 16px;
  height: 16px;
  margin: 0 auto;
  display: inline-block;
  vertical-align: middle;
}

.table-checkbox .table-checkbox-label {
  width: 16px;
  height: 16px;
}

.table-checkbox .table-checkbox-label:before,
.table-checkbox .table-checkbox-label:after {
  top: 0;
  left: 0;
  margin-top: 0;
}

.dashboard-table tbody tr:hover {
  background-color: #fafbfe;
  cursor: default;
}

.dashboard-table tbody tr.active {
  background-color: #f8f9fc;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="row">
  <div class="col-6">
    <div class="table-responsive dashboard-table-responsive">
      <table class="table table-sm dashboard-table">
        <thead>
          <tr>
            <th scope="col" class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input headerCheckbox" id="customControlInline2" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline2"></label>
              </div>
            </th>
            <th scope="col" class="p-l-0">Name</th>
            <th scope="col">Size</th>
            <th scope="col">Upload at</th>
            <th scope="col" class="text-right">Views</th>
          </tr>
        </thead>
        <tbody class="dashboard-table-tbody">
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input checkBox" id="customControlInline3" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline3"></label>
              </div>
              </th>
              <td class="p-l-0"><a href="https://www.nexshot.io">File-Name.mp4</a></td>
              <td>137.3kB</td>
              <td>10/9/2018, 4:53:28 PM</td>
              <td class="text-right">10</td>
          </tr>
          <tr class="active">
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline4" type="checkbox" checked>
                <label class="custom-control-label table-checkbox-label" for="customControlInline4"></label>
              </div>
              </th>
              <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
              <td>137.3kB</td>
              <td>10/9/2018, 4:53:28 PM</td>
              <td class="text-right">10</td>
          </tr>
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline5" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline5"></label>
              </div>
              </th>
              <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
              <td>137.3kB</td>
              <td>10/9/2018, 4:53:28 PM</td>
              <td class="text-right">10</td>
          </tr>
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline6" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline6"></label>
              </div>
              </th>
              <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
              <td>137.3kB</td>
              <td>10/9/2018, 4:53:28 PM</td>
              <td class="text-right">10</td>
          </tr>
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline7" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline7"></label>
              </div>
              </th>
              <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
              <td>137.3kB</td>
              <td>10/9/2018, 4:53:28 PM</td>
              <td class="text-right">10</td>
          </tr>
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline8" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline8"></label>
              </div>
              </th>
              <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
              <td>137.3kB</td>
              <td>10/9/2018, 4:53:28 PM</td>
              <td class="text-right">10</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="col-6">

    <div class="table-responsive dashboard-table-responsive">
      <table class="table table-sm dashboard-table">
        <thead>
          <tr>
            <th scope="col" class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input headerCheckbox" id="customControlInline321" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline321"></label>
              </div>
            </th>
            <th scope="col" class="p-l-0">Name</th>
            <th scope="col">Size</th>
            <th scope="col">Upload at</th>
            <th scope="col" class="text-right">Views</th>
          </tr>
        </thead>
        <tbody class="dashboard-table-tbody">
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input checkBox" id="customControlInline398" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline398"></label>
              </div>
              </th>
              <td class="p-l-0"><a href="https://www.nexshot.io">File-Name.mp4</a></td>
              <td>137.3kB</td>
              <td>10/9/2018, 4:53:28 PM</td>
              <td class="text-right">10</td>
          </tr>
          <tr class="active">
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline544" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline544"></label>
              </div>
              </th>
              <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
              <td>137.3kB</td>
              <td>10/9/2018, 4:53:28 PM</td>
              <td class="text-right">10</td>
          </tr>
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline536541065" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline536541065"></label>
              </div>
              </th>
              <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
              <td>137.3kB</td>
              <td>10/9/2018, 4:53:28 PM</td>
              <td class="text-right">10</td>
          </tr>
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline636" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline636"></label>
              </div>
              </th>
              <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
              <td>137.3kB</td>
              <td>10/9/2018, 4:53:28 PM</td>
              <td class="text-right">10</td>
          </tr>
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline987" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline987"></label>
              </div>
              </th>
              <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
              <td>137.3kB</td>
              <td>10/9/2018, 4:53:28 PM</td>
              <td class="text-right">10</td>
          </tr>
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline898" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline898"></label>
              </div>
              </th>
              <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
              <td>137.3kB</td>
              <td>10/9/2018, 4:53:28 PM</td>
              <td class="text-right">10</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
javascriptbootstrap-4

Answer №1

My assumption is that your requirement includes:

  1. If the checkbox in the table header is checked, all child rows checkboxes should be checked
  2. If any of the child checkboxes are checked, the header checkbox should be checked if all children are checked
  3. This functionality should be implemented on a table by table basis

While this implementation could potentially be simplified, it serves the purpose for now.

$('.dashboard-table-tbody').on('click', 'tr', function(e) {
  var thisTRow = $(this);
  var isActive = !!thisTRow.hasClass('active');
  thisTRow.toggleClass('active', !isActive);
  var rowChecks =
    thisTRow.find('input[type=checkbox]')
    .prop('checked', !isActive);
  var thisTBody = $(e.delegateTarget);
  var thisTable = thisTBody.closest('table.table');
  var allChecks = thisTBody.find('input[type=checkbox]');
  var allAreChecked = allChecks.filter(function() {
    return $(this).is(':checked');
  }).length === allChecks.length;
  var thCheck = thisTable.find(".headerCheckbox");
  thCheck.prop('checked', allAreChecked);

  e.preventDefault();
});
// image click
$('.dashboard-table-tbody').on('click', 'td.p-l-0 a', function(e) {
  // just follow the link, not propagate to the tr
  e.stopPropagation();
});

$('.table').on('click change', ".headerCheckbox", function(e) {
  var thisTable = $(e.delegateTarget);
  var headerChecked = $(this)[0].checked;
  thisTable.find(".dashboard-table-tbody")
    .find('tr').toggleClass("active", headerChecked);
  thisTable.find("input:checkbox").prop('checked', headerChecked);

});
.dashboard-table-responsive {
  background: #fff;
  box-shadow: 0 7px 23px #eeeff1;
  margin-top: 10px;
}

.dashboard-table {
  margin-bottom: 0;
  font-size: 13px;
  line-height: 15px;
  color: #8b8e8c;
}

.dashboard-table th {
  border: none;
  padding: 8px 12px;
  font-weight: 600;
}

.dashboard-table td {
  padding: 12px 12px 12px 12px;
  vertical-align: middle;
}

.dashboard-table a {
  font-weight: 600;
}

.table-checkbox-col-head {
  width: 44px;
}

.table-checkbox {
  padding: 0;
  min-height: auto;
  width: 16px;
  height: 16px;
  margin: 0 auto;
  display: inline-block;
  vertical-align: middle;
}

.table-checkbox .table-checkbox-label {
  width: 16px;
  height: 16px;
}

.table-checkbox .table-checkbox-label:before,
.table-checkbox .table-checkbox-label:after {
  top: 0;
  left: 0;
  margin-top: 0;
}

.dashboard-table tbody tr:hover {
  background-color: #fafbfe;
  cursor: default;
}

.dashboard-table tbody tr.active {
  background-color: #f8f9fc;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>
<div class="row">
  <div class="col-6">
    <div class="table-responsive dashboard-table-responsive">
      <table class="table table-sm dashboard-table">
        <thead>
          <tr>
            <th scope="col" class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input headerCheckbox" id="customControlInline2" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline2"></label>
              </div>
            </th>
            <th scope="col" class="p-l-0">Name</th>
            <th scope="col">Size</th>
            <th scope="col">Upload at</th>
            <th scope="col" class="text-right">Views</th>
          </tr>
        </thead>
        <tbody class="dashboard-table-tbody">
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input checkBox" id="customControlInline3" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline3"></label>
              </div>
            </td>
            <td class="p-l-0"><a href="https://www.nexshot.io">File-Name.mp4</a></td>
            <td>137.3kB</td>
            <td>10/9/2018, 4:53:28 PM</td>
            <td class="text-right">10</td>
          </tr>
          <tr class="active">
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline4" type="checkbox" checked>
                <label class="custom-control-label table-checkbox-label" for="customControlInline4"></label>
              </div>
            </td>
            <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
            <td>137.3kB</td>
            <td>10/9/2018, 4:53:28 PM</td>
            <td class="text-right">10</td>
          </tr>
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline5" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline5"></label>
              </div>
            </td>
            <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
            <td>137.3kB</td>
            <td>10/9/2018, 4:53:28 PM</td>
            <td class="text-right">10</td>
          </tr>
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline6" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline6"></label>
              </div>
            </td>
            <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
            <td>137.3kB</td>
            <td>10/9/2018, 4:53:28 PM</td>
            <td class="text-right">10</td>
          </tr>
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline7" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline7"></label>
              </div>
            </td>
            <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
            <td>137.3kB</td>
            <td>10/9/2018, 4:53:28 PM</td>
            <td class="text-right">10</td>
          </tr>
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline8" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline8"></label>
              </div>
            </td>
            <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
            <td>137.3kB</td>
            <td>10/9/2018, 4:53:28 PM</td>
            <td class="text-right">10</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <div class="col-6">

    <div class="table-responsive dashboard-table-responsive">
      <table class="table table-sm dashboard-table">
        <thead>
          <tr>
            <th scope="col" class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input headerCheckbox" id="customControlInline321" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline321"></label>
              </div>
            </th>
            <th scope="col" class="p-l-0">Name</th>
            <th scope="col">Size</th>
            <th scope="col">Upload at</th>
            <th scope="col" class="text-right">Views</th>
          </tr>
        </thead>
        <tbody class="dashboard-table-tbody">
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input checkBox" id="customControlInline398" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline398"></label>
              </div>
            </td>
            <td class="p-l-0"><a href="https://www.nexshot.io">File-Name.mp4</a></td>
            <td>137.3kB</td>
            <td>10/9/2018, 4:53:28 PM</td>
            <td class="text-right">10</td>
          </tr>
          <tr class="active">
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline544" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline544"></label>
              </div>
            </td>
            <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
            <td>137.3kB</td>
            <td>10/9/2018, 4:53:28 PM</td>
            <td class="text-right">10</td>
          </tr>
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline536541065" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline536541065"></label>
              </div>
            </td>
            <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
            <td>137.3kB</td>
            <td>10/9/2018, 4:53:28 PM</td>
            <td class="text-right">10</td>
          </tr>
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline636" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline636"></label>
              </div>
            </td>
            <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
            <td>137.3kB</td>
            <td>10/9/2018, 4:53:28 PM</td>
            <td class="text-right">10</td>
          </tr>
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline987" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline987"></label>
              </div>
            </td>
            <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
            <td>137.3kB</td>
            <td>10/9/2018, 4:53:28 PM</td>
            <td class="text-right">10</td>
          </tr>
          <tr>
            <td class="table-checkbox-col-head">
              <div class="custom-control custom-checkbox defaultCheckbox table-checkbox">
                <input class="custom-control-input" id="customControlInline898" type="checkbox">
                <label class="custom-control-label table-checkbox-label" for="customControlInline898"></label>
              </div>
            </td>
            <td class="p-l-0"><a href="#">File-Name.mp4</a></td>
            <td>137.3kB</td>
            <td>10/9/2018, 4:53:28 PM</td>
            <td class="text-right">10</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Through the implementation of JavaScript, the element's class is dynamically altered

While working on my project, I encountered an issue with implementing a change in the class of an element using JavaScript. The problem is that when I click on the home page, the last page does not get deselected. Here is my current JavaScript code: const ...

javascripthtml

The response from unirest in node.js came back as undefined

Currently, I am diving into the world of Facebook bots, despite not being well-versed in node.js development. Stepping out of my comfort zone and embracing this new challenge for the first time has been quite exhilarating. Below is the function that I hav ...

javascriptnode.jsresponseunirest

The Vue.js scripts and styles declared in the index.html file seem to be malfunctioning

I acquired a theme that includes html, css3, and js files, and I included the file path as shown below: <!-- Basic --> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Porto - Responsive HTML5 Te ...

javascriptvue.js

React - updating state does not cause changes to elements rendered from variables

Currently, I am facing an issue where I have stored a component in a variable called const span = <span>{this.state.text}</span>. However, when I render this element and update the text within the state, the element fails to re-render. Below i ...

javascriptreactjs

Vue: event triggers malfunctioning and components unresponsive

I am new to Vue.js and I'm attempting to trigger an event from my grand-child component (card) to the child component (hand) and then to the parent component (main): card (emit play event) => hand (listen for play event and emit card-play event) ...

javascriptvue.js

Implementing meta tags in React.js

I am attempting to incorporate dynamic meta-tags on each page of my website. However, despite my efforts, I cannot seem to locate the meta-tags in the page's source code. Do I need to make adjustments in public/index.html, considering that I am not ut ...

javascriptreactjsmeta-tags

Issue encountered while attempting to write KML objects to Google Earth API: NPObject error

Currently, I am working on a script that aims to extract data from Facebook and display it graphically on a Google Map using simple extruded polygons. The social integration and AJAX functionality are both working fine for me. However, whenever I try to ex ...

javascriptphpajaxkmlgoogle-earth-plugin

Show the image on top of the div block as the AJAX content loads

Implementing this task may seem easy and common, but I am struggling to figure it out! What should take five minutes has turned into an hour of frustration. Please lend me your expertise in getting this done. I have a div container block: <div cla ...

javascriptjqueryhtmlcssajax

Tips for customizing the background of form inputs in React-Bootstrap

Currently, I have a next.js project with react-bootstrap. I am attempting to change the default blueish gray background color (#e8f0fe or rgb(232, 240, 254)) that bootstrap uses for form inputs to white. To achieve this, I am customizing the bootstrap var ...

cssbootstrap-4sassnext.jsreact-bootstrap

The collection is not an array

I am currently running the following code: var n = []; jQuery.toJSON( n ); Interestingly, on one page I receive "[]", while on another I get ""[]"". Both pages are utilizing the same version of jQuery along with a toJson Plugin. Upon inspecting the arra ...

javascriptjson

Looking to simplify the complex JSON structure by converting it into an array using JavaScript

Being a newcomer to javascript, I am struggling with breaking down a complex structure into an array. The current structure is as follows: [ { "Key": "ProducePRINKA0370001", "Record": { "docType": "Produce", "PR ...

javascriptjson

Converting an array of objects into a flat array of objects with Javascript

My data array requires conversion to a flattened array returning new header and data. For instance, the first object contains a name with three data points: "title, first, last." The desired output is: From : { gender: 'male', name: { ...

javascriptarraysjsonreactjsvue.js

Assigning multiple identifiers to a single element

Multiple posts have emphasized the importance of using an ID only once. But, I'm facing a situation where I need to pass 2 PHP variables to my JavaScript. I initially thought of using document.getElementById, but since IDs must be unique, this approa ...

javascriptjqueryhtmlajax

What is the best way to extract just the hours and minutes from a timestamp column that includes hours, minutes, and seconds in my dataset and create a new column

Is there a way to extract only the hour and minute values from a timestamp column that includes seconds in my dataset? ...

javascriptpythonsqlrexcel

Remove the background color from a semi-transparent circular CSS div when it is being dragged

My circular div is being dragged for a drag and drop operation, but there's always a translucent square around it. How can I remove this unwanted effect? body{ background : #BBD1DF; } .dragdemo { width: 170px; height: 170px; line-hei ...

javascripthtmlcss

Utilizing AngularJS ng-messages feature across various languages

Utilizing ng-messages to show error messages for form validation in my application. I have a multi-language app, how can I implement ng-messages to support multiple languages? HTML Form <div class="messages" ng-messages="myForm.email.$error"> & ...

javascriptangularjs

The magic of data binding in AngularJS's ng-repeat

Is it possible to dynamically call an attribute of a data-binded object based on the ng-repeat object? I have set up a simple example, but I'm not sure if it can be solved this way. Can anyone help with this? The goal is for the input to receive the ...

javascriptangularjsobjectdata-bindingangularjs-ng-repeat

Patience is key when awaiting the completion of several promises

I am currently utilizing the SQLStorage feature provided by the Ionic platform. The remove function within this tool returns a promise. Within my code, I have a need to remove multiple values and then execute some additional code once all removals are comp ...

javascriptangularpromiseionic2

Promise<IDropdownOption[]> converted to <IDropdownOption[]>

I wrote a function to retrieve field values from my SPFx list: async getFieldOptions(){ const optionDrop: IDropdownOption[]= []; const variable: IEleccion = await sp.web.lists.getByTitle("Groups").fields.getByTitle("Sector").get ...

javascriptreactjstypescriptpromisespfx

Why is my webpage attempting to refresh every time I send an AJAX request?

I have been struggling to send a form using AJAX, but no matter how many times I use e.preventDefault(), the page still tries to reload. Here is my HTML: <form action="/user/changeProfileData" id="edit-profile_form" method="post"> <ul class=& ...

javascriptnode.jsajaxexpress