1

So I have div with some php inside. It is executing some records from sql database.

<div id="records">
  <?php
  list_query(select_records()); // some php returning divs
  ?>
</div>

I'm using materialize's collapsible for viewing more info of that record. When you click on that one line (record), it expanses just like in materialize's examples.

And I have html select above, where you can choose from which date you wanna return those records.

<form class="ajax" action="action/timeSort.php" method="post">
  <select name="timeSort" class="timeSortSelect">
    <option value="1">Last 24 hours</option>
    <option value="7">Last 7 days </option>
    <option value="30">Last 30 days</option>
    <option value="365">Last 365 days</option>
    <option value="all" selected>Everything</option>
  </select>
</form>

Than I have jquery ajax called, when you choose any option. It will send post to php file and creates php $_SESSION with timestamp in it, if ajax is successful this function is called:

$('#records').load(document.URL +  ' #records');

And in that php list_query() function, it reads that $_SESSION and sort it from that time.

Problem here:
But the problem is, scripts (click events, on events, just anything) for those newly returned records, which were loaded with jQuery's .load() function doesn't work. on('event') doesn't work, click() doesn't work, custom materialize initializations doesn't work. Not even delegate events.

I tried:
1) Putting new script src tag at the end of that #records div, so it will load those scripts again - doesn't work

2) Executing those functions after running .load() - doesn't work

// try #2 example
$('#records').load(document.URL +  ' #records');
$('.collapsible').collapsible(); // doesn't work
$('#records .clickingElement').on('click', function() {/*blah blah*/}) // doesn't work

Possible solutions, which I don't want to do (yet):
1) Get somehow info about those records from that php action file and append it via jQuery, than delegate events or my try #1 would work. But it's not nice thing to do, but I'll try.

2) Refreshing whole site. Pfff, I'm better than that and nobody likes force refreshes.

Main question: Is there a jQuery solution for it, like some special events? Or do you have an better idea how to achieve the same sorting, but with a better way?

If you don't understand something or want more code, feel free to comment about it. Thanks for your help.

Edit: Image example of how it looks executed and working (it expands like this when you click on it)

image example

SenTisso
  • 579
  • 7
  • 18
  • 1
    you need to (re-) set the event listeners _after_ the new items got loaded/inserted to the dom; in the success-callback of `load()`, right after you add them to the dom. – Jeff Dec 13 '18 at 22:06
  • @Jeff do you mean my try #2? – SenTisso Dec 13 '18 at 22:09
  • kind of. It needs to be in the _callback function_: `$('#records').load(document.URL + ' #records', function() { $('.collapsible').collapsible(); });` – Jeff Dec 13 '18 at 22:10
  • `load()` is an asynchronous function. As you have it now `collapsible()` will start before `load()` has finished. – Jeff Dec 13 '18 at 22:11
  • @Jeff well, I'm testing what you told and it is working pretty well. But when I'm calling those functions again, it can execute twice (maybe not on those dynamic elements). I can unbind click events and than call that load function with click events (this will prevent double or more executing), but is it efficient? – SenTisso Dec 13 '18 at 22:20
  • place all events in $(document).ready(function(){ // here }); and also try $(document).on('click', '#records .clickingElement', function() {/*blah blah*/}) // should work – Eugene Kapustin Dec 13 '18 at 22:23
  • And @Jeff, thank you so much for that function inside .load(), it helped me a lot. – SenTisso Dec 13 '18 at 22:44

1 Answers1

1

You need to set your on click function:

$('#records .clickingElement').on('click', function() {/*blah blah*/}) // doesn't work

To this:

$(document).on('click', '#records .clickingElement', function() {
    /*blah blah*/
});

This makes sure that the event trigger traverses through the entire dom to see if the #records or .clickingElement exist. Instead of it only binding to those elements on load. If that makes any sense.

This has a good answer for you: Click event doesn't work on dynamically generated elements

HyperTextCoffeePot
  • 406
  • 3
  • 14