Develop Reference

Javascript button event not working after page 1

Essentially I have some datatable like this: Now for some reason when I go to the second page, none of the buttons I have are working. Like when I click them nothing happens! But on the first page they work perfectly! Not sure how to fix this issue! [enter image description here][1]
//creation method of the table
var volunteerTable = $('#volunteerTable').DataTable({
paging: true,
pagingType: 'simple_numbers',
columns: [ title:"First Name", title:"Last Name", title:"Email"
The trash can button code:
$('.buttonVDelete').click(function () {
//fill out the fields
//open the delete volunteer modal
//prepare data to send
}

When you use click() you are reading the elements available at the moment of loading the page.
In order to read new rendered elements, you must use on
$(document).on('click','.buttonVDelete', function () {
// Your code
});

is it jQuery required? maybe better vanilla javascript:
document.querySelector('.buttonVDelete').addEventListener('click',
function(){
})
Most of modern browser can easy deal with es5/es6
I hope I helped.

Calling ajax:beforeSend and ajax:complete on any link_to where remote is true ruby on rails

I'm working on a webapp using Ruby on Rails as framework. For all the partial renders, we used link_to with remote true as explained in this answer. However, I would like to bind the all those links to something equivalent to ajax:beforeSend and ajax:complete in order to implement a loader anytime a page is called in jQuery. So far I tried the following but it is not working :
$('a').on('ajax:beforeSend', function() {
alert("BEFORE");
});
$('a').bind('ajax:complete', function() {
alert("AFTER");
});
So if you have any other ideas it would be really appreciated if you could let me know. Thanks in advance.
EDIT: Here's an example of how I have been using link_to :
<%= link_to({action: "show_card", controller: "pages", id: activ.id, method: :get, :remote => true}, class: "nav-link p-0") %>

What is not working ajax or loader if your ajax is working then for loader it should be like this
<div id="mySpinner" style="displany:none;">
<img src="loader.gif">
</div>
$(function () {
$(document).ajaxStart(function() {
//$("#mySpinner").show();
alert("BEFORE");
}).ajaxStop(function() {
//$("#mySpinner").hide();
alert("AFTER");
});
});

How about to show loader on element onclick event and hide it on ajax:success?
$('a').on('click', function() {
alert("BEFORE");
});
$('a').ob('ajax:success', function() {
alert("AFTER");
});
Make sure to also cover ajax:error
You might also try to subscribe to ajax:send instead of ajax:beforeSend. Because ajax:beforeSend is a local event and can be subscribed to only within the Ajax request object as docs say

I found out what it was, when I render new staff partially, I need to rebind it to the event, and apparently even using
$( window ).load(function() {
$('a').on('ajax:beforeSend', function() {
alert("BEFORE");
});
$('a').bind('ajax:complete', function() {
alert("AFTER");
});
});
In the application.js file did not work, so basically to bind it initially I had to put a script tag at the bottom of my page which binds everything once it already rendered everything. Furthermore, anytime I do any remote partial rendering, I also need to rebind everything in the .js.erb file, that way it actually works. I'm there has to be a better way because this seems an awful solution; it is however, a solution for now.

Javascript not working on more loaded content

I have this script where it adds some effects on my items listed.
$(document).ready(function(){
$('.ui.card.work .image').dimmer({
on: 'hover'
});
$('.carouselCollaborators')
.popup({
boundary: '.ui.card.work',
});
})
However, when I click
= link_to_next_page #works, 'Load more...', params: params, :remote => true, id:'view_more', class: 'fluid ui basic button'
load more button coded above, javascript i mentioned above is not working on loaded items...
How could I fix this...?
Thank you for you time!

The problem is that you're calling the "effects" script only on document.ready you need to call it when you add an item as well.
These are the steps you should take:
First make a "wrapper" function that does the "effects"
function card_effects(){
$('.ui.card.work .image').dimmer({
on: 'hover'
});
$('.carouselCollaborators').popup({
boundary: '.ui.card.work',
});
}
Then call it where you want the "effects" to happen.
$(function(){ // jQuery document.ready shorthand
card_effects();
});
function that_adds_new_items(){
/***functions-code***/
card_effects();
}

Bootsrap-select retains default options inside SetTimeout call

I am initializing a bootstrap-select control successfully on document.ready, but if I put it inside a setTimeout, all my options are ignored and the default options are used instead. I have tried debugging through the selectpicker js code but I can't figure out why this behavior is different. Please note I did see a very similar question but it was never successfully answered (Bootstrap-Select plugin not working with time consuming page load).
Here is my JS code:
$(document).ready(function () {
...display code
setTimeout(function () {
$('#mySelect').selectpicker({
container: 'body',
actionsBox: true,
liveSearch: true,
maxOptions: 16,
noneSelectedText: 'Sites',
selectedTextFormat: 'count>0'
});
...more display code
}, 100);
});
If I remove the setTimeout, the selectpicker displays with the options listed in the code, but if I leave the setTimeout, only the default options are used. Does anyone know why this is the case and how to get it to use the correct options when called from within the setTimeout?

Best method of using jquery load and re-loading a script at the same time

I have a table that uses jquery's .load function to reload all of the data in the table after something is moved.
The issue is that when the table loads, the external javascript files on the page aren't being used in the table any longer.
To resolve this issue myself, i've started using jquery's .getScript. This works (sometimes), but it's not working well. I think the script is taking a long time to load whereas the table instantly loads, resulting in the scripts messing up sometimes.
I've also tried using a function after the getScript which still seems to not work properly.
This is what i'm using currently
$(function() {
$("#sortable").sortable({
update: function(event, ui) {
serial = $('#sortable').sortable('serialize');
$.ajax({
url: "./menu-controller.php",
type: "post",
data: serial,
success: function() {
$.getScript("./menu-admin.js");
$("#sortable").load("./menu-manager.php #menu-table");
},
error: function(){
alert("A problem occurred when moving this menu item. Please try again or contact support.");
}
});
},
handle:'.move-item',
connectWith:'#menu-table',
placeholder: "highlight",
containment: "parent",
revert: true,
tolerance: "pointer",
items: 'tbody > *'
});
});
Specifically, we're looking at the "success" of the update of .sortable. Is there any better solutions to this?
My ultimate goal would be to have the script fully loaded before the table starts to load. And again, i've already tried using a function of getScript, this didn't seem to work.
I appreciate any advice, tips, or solutions provided.

Try using get() only with a callback as such:
$.get('http://ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js', function(response){
// Start table
});