CODEWITHSUNDEEP
javascriptjqueryhtml
Luke Prior
Luke Prior

Reputation: 967

Run Jquery function on page load once

I have the following Jquery function:

$( document ).ready(function() {
        $(function() {
        $('select[name="CPUmenu"]').change(function(e) {
          let socket = $(this).val();
          $('tbody tr[data-socket]').show();
          if (socket.length) {
            $('tbody tr[data-socket!="' + socket + '"]').hide();
          }
        });
    });
});

Other code:

CPUmenu:

$sql = "SELECT name, socket FROM cpu";
$result = $connection->query($sql);

if ($result->num_rows > 0) {
    echo "<select name='CPUmenu'>";
    echo "<option value=''>CPU</option>";
    // output data of each row
    while($row = $result->fetch_assoc()) {
        if ($row["name"] == $namehref) {
        echo "<option value='". $row["socket"] . "' selected>".$row["name"]."</option>";    
        } else {
        echo "<option value='". $row["socket"] . "'>".$row["name"]."</option>";
        }
    }
    echo "</select>";
} else {
    echo "0 results";
}

myTable:

$sql = "SELECT name, price, id, socket, ramslots, maxram, chipset FROM motherboard";
$result = $connection->query($sql);

if ($result->num_rows > 0) {
    echo "<table id='myTable'><thead><tr><th>Motherboard</th><th>Price</th><th>Socket</th><th>Chipset</th><th>Ram Slots</th><th>Max Ram</th></tr></thead>";
    // output data of each row
    while($row = $result->fetch_assoc()) {
        echo "<tbody><tr data-socket='". $row['socket'] . "'><td><a href='https://au.pcpartpicker.com/product/" . $row["id"] . "' target='_blank'>" . $row["name"] . "</a></td><td>" . $row["price"] . "</td><td>" . $row["socket"] . "</td><td>" . $row["chipset"] . "</td><td>" . $row["ramslots"] . "</td><td>" . $row["maxram"] . "</td></tr></tbody>";
    }
    echo "</table>";
} else {
    echo "0 results";
}

I just tried this but no it doesn't work at all

However it only runs whenever i select a new option in "CPUmenu", I would like it to also run once when the page is opened and loaded.

Thanks

Upvotes: 2

Views: 776

Answers (3)

Bronzdragon
Bronzdragon

Reputation: 355

I would recommend splitting the function you want to run out, and just triggering it manually. For example:

$( document ).ready(function() {

  // This is the function, ready to be called
  function updateSocket() {
    let socket = $(this).val();
    $('tbody tr[data-socket]').show();
    if (socket.length) {
      $('tbody tr[data-socket!="' + socket + '"]').hide();
    }
  }

  // Save the element for usage later
  let dropdownElement = $('select[name="CPUmenu"]')

  // Set up the event listener for the dropdown
  dropdownElement.change(updateSocket);

  // Also call it manually.
  updateSocket.bind(dropdownElement)();
});

edit: I added bind for this solution. Otherwise, $(this) would have the incorrect context.

Upvotes: 0

Giulio Bambini
Giulio Bambini

Reputation: 4755

You can trigger the change on page load:

$('select[name="CPUmenu"]').tigger('change');

Please Note: $( document ).ready(function() {... and $(function() {... basically the same thing. You can refer document-readyfunction-vs-function for more.

Demo:

$(function() {
   $('select[name="CPUmenu"]').change(function(e) {
      let socket = $(this).val();
      $('tbody tr[data-socket]').show();
      if (socket.length) {
        //$('tbody tr[data-socket!="' + socket + '"]').hide();
      }
      alert('change trigger');
   });
   $('select[name="CPUmenu"]').trigger('change'); // trigger here
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="CPUmenu">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

Upvotes: 3

ic3b3rg
ic3b3rg

Reputation: 14937

firstly, $(document).ready( ... ) and the nested $(function() { ... }) are redundant.

you can move the change function outside the handler and call it immediately:

$(document).ready(function() {
  const menu = $('select[name="CPUmenu"]');
  const menuChange = (function(e) {
    let socket = $(this).val();
    $('tbody tr[data-socket]').show();
    if (socket.length) {
      $(`tbody tr[data-socket!="${socket}"]`).hide();
  }).bind(menu.get());
  menuChange();
  $('select[name="CPUmenu"]').change(menuChange);
});

Upvotes: 0

Related Questions