Run Jquery function on page load once

Question

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

Add the code within the function from let socket to rest.. call that function on page load and on change — MJN, Dec 23 '18 at 05:34

Giulio Bambini · Accepted Answer · 2018-12-23T05:48:19.927

3

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>

edited Dec 23 '18 at 05:48

answered Dec 23 '18 at 05:34

Giulio Bambini

4,695
4
21
36

I just tried that but it doesn't seem to work on page load – Luke Prior Dec 23 '18 at 05:42
@Uskompuf, please update the question with relevant HTML so that we can test the code. – Giulio Bambini Dec 23 '18 at 05:44
will do, give me a minute – Luke Prior Dec 23 '18 at 05:44
I have added the code for CPUmenu and myTable, the select tag for CPUmenu is carried via href and get's auto selected but does not perform sort function on page load hence i am trying to do this. – Luke Prior Dec 23 '18 at 05:48

Bronzdragon · Answer 2 · 2019-05-03T15:01:12.143

0

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.

edited May 03 '19 at 15:01

answered Dec 23 '18 at 05:40

Bronzdragon

345
3
13

are you sure `$(this)` on a function will catch the right element?? – Mohamed-Yousef Dec 23 '18 at 05:41
@Mohamed-Yousef You're right, it wouldn't. Thanks, I've updated the sample. – Bronzdragon Dec 23 '18 at 05:49
for your knowledge .. `$(this)` inside the function will refer to `window` or something but not to the element you want .. so to use it a right way .. you need to pass an argument for a function `function updateSocket(Element)` then use `Element` instead of `this` inside the function like `let socket = $(Element).val();` and when you use the function for the element you can then use `updateSocket(this)` .. have a nice day :-) – Mohamed-Yousef Dec 23 '18 at 05:59
Sorry.. I tested it and it works without need to add argument(Element).. sorry about that .. Actually I don't know in which case we need to use argument .. anyway keep it in your mind maybe it'll be useful to know one day .. and sorry again :-) – Mohamed-Yousef Dec 23 '18 at 06:10
Yup, that's what I added the bind for. It wouldn't have worked the way I wrote it originally. `this` binding can get a little confusing. – Bronzdragon Dec 23 '18 at 06:13

score 0 · Answer 3 · answered Dec 23 '18 at 05:47

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);
});

Run Jquery function on page load once

3 Answers3