0

I have a spreadsheet of data on my website, which is loaded in from a database, and the result looks something like this:

<table>
<tbody id="tbody">
<tr>
    <td><button>Edit</button></td>
    <td><button>Delete</button></td>
    <td>First Name</td>
    <td>Last Name</td>
    ...
</tr>
</tbody>
</table>

More content (rows) appear as the user scrolls down, and this is done with Ajax, like so:

$(document).ready(function(){
/*Get more clients on scroll*/
var clientCount = 33;
$(window).scroll(function(){
    var leftToBottom = $(document).height() - $(window).height() - $(window).scrollTop();
    if( leftToBottom == 0) {
        clientCount = clientCount + 11;
        $("#tbody").load("loadClients.php", {
            clientNewCount : clientCount
        });
        }
});
});

However, each row of data has something like an edit button which opens a modal, a delete button, a multiple-delete-selection, etc. These are all manipulated through jQuery/JS.

This question gave me an idea of what to do, but I just couldn't apply it to my code: Running JQuery scripts on AJAX loaded content

Someone suggested using the ajaxComplete() function, but this means the jQuery code will only work after the ajax content has been completed (duh).

Aside from using the $(document).ajaxComplete() function, what can I do to apply my jQuery code to the new ajax content?

Problem is, the jQuery code won't work UNTIL the user scrolls down to get more content. So a user cannot edit, delete or select any data until they scroll down all the way to fetch the new content.

Pray, how can I apply the jQuery to both the content BEFORE the ajax call as well as AFTER the ajax call?

Currently I am including the jQuery script in both documents; the original document and the loaded-content. I'm sure this isn't the correct way to do it, but for now it is working.

P.S. the jQuery code contains many click events, preventDefaults, and other basic code to open and close modals.

J Doe
  • 121
  • 2
  • 11
  • The code you've provided is not the code that has the problem. This is very confusing for the question. While it's useful to see how you're loading the content, it would only be the `.load(...` lines and the relevant part is how you wire up the `edit` button. – freedomn-m Aug 20 '18 at 15:21
  • @Taplar Does that mean I have to rewrite all the jQuery code in a way that binds it to the newly loaded content? Is there a way to do it without really modifying the code I've already written? – J Doe Aug 20 '18 at 15:22
  • Equally, you say the problem is that the code would only work after they scroll down, yet how would the user get to the edit button if the content has not yet loaded and they haven't yet scrolled down? – freedomn-m Aug 20 '18 at 15:22
  • "*without modifying the code I've already written*" `==` "my code doesn't work, how can I get it to work without changing it" - this makes no sense! – freedomn-m Aug 20 '18 at 15:23
  • Without seeing the code you've already written, you state there's just an edit button - it will be something like `$(".table .row .edit_button").click(...` change to `$(".table").on("click", ".row .edit_button", function() { ..` not a huge change. – freedomn-m Aug 20 '18 at 15:25
  • @JDoe please refer to the duplicate question, specifically the usage of delegate event bindings. You can also fine a reference here: http://learn.jquery.com/events/event-delegation/ – Taplar Aug 20 '18 at 15:25
  • @freedomn-m I mentioned that I have a spreadsheet of data on the website. There is already a spreadsheet of some data, and when a user scrolls down, more data appears. It's a bit like YouTube comments. – J Doe Aug 20 '18 at 15:28
  • What's spreadsheet of "some data"? You show some rows, then load some more later? Or you show all the rows but only with some columns shown? It's not clear why your code doesn't work in the either scenario until after you've scrolled - as you've not provided that part of the code in the question. And if you did, what's stopping you calling the initialisation code on doc ready instead of ajax `.success`? – freedomn-m Aug 20 '18 at 15:31
  • 1
    jQuery is only aware of the elements in the page at the time it runs, so new elements added to the DOM are unrecognized by jQuery. To combat the problem use [event delegation](http://learn.jquery.com/events/event-delegation/), bubbling events from newly added items up to a point in the DOM which was there when jQuery ran on page load. Many people use `document` as the place to catch the bubbled event, but it isn't necessary to go all the way up the DOM tree. Ideally [you should delegate to the nearest parent existing at the time of page load.](http://stackoverflow.com/a/12824698/1011527) – Jay Blanchard Aug 20 '18 at 15:36
  • @Talpar alright, I'll give that a try. I wouldn't have had a clue what to do if you didn't point me in the right direction, so thank you. :-) – J Doe Aug 20 '18 at 15:52
  • 1
    @JayBlanchard That's the most efficient answer I could've received. My understanding of the DOM was a little warped therefore I couldn't point out where the issue really was. My question looks a bit lame now. – J Doe Aug 20 '18 at 15:59

0 Answers0