We Keep Coding

jQuery doesn't work on Firefox but works on Chrome

I have this jQuery code:
function action(action){
event.preventDefault();
var products = $("#check-list input:checkbox:checked").map(function(){
return $(this).val();
}).get();
var string = JSON.stringify(products);
var table = $('#table').val();
if(products.length != '0' || action === 'old-all'){
$.ajax({
type: 'post',
url: 'app/toolbar.php',
data: {action:action, table:table, ids:string},
success:function(data){
localStorage.setItem('notify', data);
location.reload();
},
});
} else{
notify('You must choose an element first');
}
}
I'm using jQuery 3.3.1.
If i click a button without checking a checkbox i should get You must choose an element first but if i choose an element the toolbar.php should run and do the thing it has to be done(according to which button was pressed:
<button class="grey-btn" onClick="action('delete')">Delete</button>
<button class="grey-btn" onClick="action('update')">Update</button>
It works on Chrome perfectly but it doesn't work on Firefox. I was trying some answers that i found on some other similar 'works on chrome but not on firefox' questions but neither one of them worked :(

You do not define event so that is your problem. Get away from using inline event handlers and bind it with jQuery.
$("[data-action]").on("click", function (event) {
event.preventDefault();
var btn = $(this);
var action = btn.data("action");
console.log(action);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="grey-btn" data-action='delete'>Delete</button>
<button class="grey-btn" data-action='update'>Update</button>
If you really want to use inline event handlers than do
function action (event, method) {
event.preventDefault();
console.log(method);
}
<button class="grey-btn" onClick="action(event, 'delete')">Delete</button>
<button class="grey-btn" onClick="action(event, 'update')">Update</button>

$(this) not "refreshing" with $(document).on('click')

I'm using JavaScript (or jQuery) and I can't retrieve correctly the id of the button calling the event.
Here is a simplified example :
I have 2 buttons with the same class (the class is used for the listener) with id "button_1" and "button_2", I'll click on one of them, launch the event and get the correct id. Now, I'll click on the other button, launch the event and I still get the id of the first button.
Here is the code :
$(document).on('click', '.list-button' , function(e){
var target = e.target || e.srcElement;
var button_id = target.id;
alert(button_id);
}
or with jQuery :
$(document).on('click', '.list-button' , function(e){
var button_id = $(this).attr('id');
alert(button_id);
}
Both output only the first event caller. The second time, it'll launch the function but it's like " $(this) " is still the first event caller.
EDIT : I simplified too much my example, the alert is working fine and it was crashing later in the code. It was linked to wordpress and I had to undefine the variable to correct it. Thanks for your help even if my request was exceptionnaly useless, I guess you helped me to step back and reading step by step.

Your code works perfectly fine.
$(document).on('click', '.list-button', function(e) {
var button_id = $(this).attr('id');
alert(button_id);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="list-button" id="button1">Button 1</button>
<button class="list-button" id="button2">Button 2</button>
Make sure you check your HTML to have it right.

The code is working fine !
$(document).on('click', '.list-button', function(e) {
var target = e.target || e.srcElement;
var button_id = target.id;
alert(button_id);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="list-button" id="button_1">Button 1</button>
<button class="list-button" id="button_2">Button 2</button>

datatables jquery click event not working after pagination

I am using http://datatables.net/
<button class='btn btn-success activeAccount'>Activate Account</button>
I trigger ajax call on onclick event, below is ajax call code:
$(".activeAccount").click(function() {
var intCounselorId = $(this).parent().parent().find('input[class="counselorId"]').attr("value");
var intOwnerId = $(this).parent().parent().find('input[class="userID"]').attr("value");
var strAction = 'activateAccount';
performAction(intCounselorId, intOwnerId, strAction);
});
function performAction(intCounselorId, intOwnerId, strAction) {
$.ajax({
url: '/admin/counselormanagement/expertmanagementgridaction',
data: 'intCounselorId='+intCounselorId+'&intOwnerId='+intOwnerId+'&strAction='+strAction,
type: "POST",
async:false,
success: function(intFlag) {
if(intFlag == 1){
location.reload();
}
}
});
}
I'm trying to run an onclick event which works normally on page one, but as soon as I go to page 2 (or any other) it stops working.
I'm using jquery-1.10.2.min.js and 1.9.4 version of datatable

Because the event is attached only to existing elements.
You should change it to:
$("#tableId").on("click", ".activeAccount", function(){
// your code goes here
});
Read more in the documentation of jQuery.on.

$(document).on("click",".activeAccount",function(e){
// your code goes here
});

I had the same issue. Every time my AJAX function(modalContentAjaxRefresh) update the table the paging stop. SO I just had to change my code from :
From :
$('.modal-toggle').off('click', modalContentAjaxRefresh).on('click',
modalContentAjaxRefresh);
to:
$('#DataTables_Table_0_wrapper').on("click", ".modal-toggle",
modalContentAjaxRefresh);
My button inside datatable is :
< a title="Edit" class="btn btn-xs btn-info modal-toggle"
data-style="zoom-in"
href="/setting/account/{{account_turn.uuid}}/update"
data-toggle="modal" data-target="#editAccount" wecare-method="GET">

As #squaleLis said, the event is attached to only existing elements.
So, in my case I defined onclick event for the button and called it.
<button class='btn btn-success activeAccount' onclick="YourMethod();">Activate Account</button>
function YourMethod() {
....same code..
}

$("#product-list").on("click",".btn-delete-product",function(e){
e.preventDefault();
var prodId = $(this).attr("product-id");
.... code to delete the record from the db...
});
product-list is the table where data gets loaded and has paging enabled.
This works perfectly for me.

I thinks a good and easy solution is to use drawCallback option

The main important thing is to reassign the elements when click the pagination.
//function to assign event
var assign_actions = function(){
//Some code
}
//when the page is ready
$( document ).ready(function() {
assign_actions();
//Code to assign event when paginate
$('.paginate_button').on('click', function(){
assign_actions();
});
});

AJAX/JQUERY Can't seem to delete data

Well my main problem is the button. I can't seem to find the reason why the button doesn't show up when I already clicked a certain tr
Here is the code that displays the returned employee data from the database
$.each(data, function(index, val) {
$("#employee_list").append('<tr class="emp_delete" id="'+val.emp_id+'"><td>'+val.emp_id+'</td><td>'+val.last_name+'</td><td>'+val.first_name+
'</td><td>'+val.middle_in+'</td>'+
'<td><input type="button" value="Resigned Employee" class="deleteBtn" id="delete_"'+val.emp_id+'"></td></tr>');
});
and here is the code that shows the button if .emp_delete is clicked. then the .deleteBtn code to delete the certain data
$(".emp_delete").click(function(){
var ID=$(this).attr('id');
$("#delete_"+ID).show();
});
$(".deleteBtn").click(function(){
var ID=$(".emp_delete").attr('id');
if (confirm("Are you sure you want to delete?")) {
var dataString = 'emp_id='+ID;
$.ajax({
type: "POST",
url: "<?php echo site_url('c_employee/delete_employee'); ?>",
data: dataString,
cache: false,
success: function(html){
location.reload();
}
});
}
UPDATE
The code that #Satpal gave worked but the .deleteBtn still doesn't show up after going through the each loop.
Here is the updated code:
$('#employee_list').delegate( ".emp_delete", 'click', function() {
var ID=$(this).attr('id');
$("#delete_"+ID).show();
});
$(".deleteBtn").click(function(){
var ID=$(".emp_delete").attr('id');
if (confirm("Are you sure you want to delete?")) {
var dataString = 'emp_id='+ID;
$.ajax({
type: "POST",
url: "<?php echo site_url('c_employee/delete_employee'); ?>",
data: dataString,
cache: false,
success: function(html){
location.reload();
}
});
}
else
return false;
});

As you are adding HTML dynamically.
You need to use Event Delegation. You have to use .on() using delegated-events approach.
Use
$(document).on(event, selector, eventHandler);
In above example, document should be replaced with closest static container.
In Your case
$('#employee_list').on('click', ".emp_delete", function() {
var ID=$(this).attr('id');
$("#delete_"+ID).show();
});
Similarly you have to delegate event for ".deleteBtn"
Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.
EDIT
As per comment.
Since you are using jQuery 1.5, use .delegate()
$(elements).delegate( selector, events, data, handler );
In Your case
$('#employee_list').delegate( ".emp_delete", 'click', function() {
var ID=$(this).attr('id');
$("#delete_"+ID).show();
});
EDIT 2
Use similar syntax for delete button also
$('#employee_list').delegate( ".deleteBtn", 'click', function() {
});

You mean the button does not fire?
If so, that is because you define the function before you insert the element in the DOM, you need to bind it.
So instead of:
$(".deleteBtn").click(function(){
Put:
$("#employee_list").on("click",".deleteBtn",function(){

Once the document has been fully loaded, each time you add a new object to the DOM dynamically (like adding a new table row with buttons) you'll need to bind the generated element to an event or action, you cannot say "do something when someone clicks any button" you'd say "do something when someone clicks THIS button" meaning that you have to have the object created first in order to "attach" some action to it.
So let's say that you have these:
<button class="action-button" id="1">Button 1</button>
<button class="action-button" id="2">Button 2</button>
And then this javascript:
$(document).ready(function(){
$(".action-button").click(function(){
alert('My id is ' + $(this).attr('id'));
});
});
And then you later decide to add a button with some action on your js/html:
<button class="action-button" id="3">Button 3</button>
Surprise! If you click button 3 you'll get no alert...? Why, because the function that you set up for click event on document.ready parsed only the initial two buttons that existed at that moment, but since you added a third one dynamically later, the document.ready code wasn't aware of it.
So as Emil pointed out, each time you create a new element you'll want to bind it, in our example, for our button 3:
$('#3').bind('click', function(){
alert('My id is ' + $(this).attr('id'));
});
Or by the class, which is not adequate cause it would rebind existing elements and you lose performance:
$('.action-button').bind('click', function(){
alert('My id is ' + $(this).attr('id'));
});
So make sure that if you add elements that do actions or call functions you bind them when you add them, ideally, have a separate function which does whatever the button needs to do and then when you bind the new element, bind it to that function instead of putting a direct callback.

Try jquery version less than 1.9:
$('selector').live('click', function(){
});

you have a problem with the id delete
<div id="di"></div>
Algo
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
$('#algo').click(function(){
var a = 1;
//THIS IS IMPORTANT , SEE ID = "delete_" <- has a problem
$('#di').html('<td><input type="button" value="Resigned Employee" class="deleteBtn" id="delete_'+a+'"></td></tr>');
});
</script>
Is id="delete_'+val.emp_id+'" and not id="delete_"'+val.emp_id+'" (" <- error)

How to execute .click() code when previous click binding finishes

I am trying to use a Twitter Bootstrap button group with data-toggle="buttons-radio" in my site. Bootstrap markup as follows.
<div class="btn-group program-status" data-toggle="buttons-radio">
<button class="btn">All</button>
<button class="btn">Active</button>
<button class="btn">Planning</button>
<button class="btn">End of Life</button>
<button class="btn">Cancelled</button>
</div>
I need to redirect to the same page with query depending on the pressed button. I tried to use following jQuery code to achieve this.
<script>
var sParamStr = '';
function addToParamStr(str) {
sParamStr += str;
}
function redirectToUpdatedLocation() {
$('.program-status > .btn.active').each(function () {
addToParamStr( '?status=' + $(this).text());
});
console.log(sParamStr);
window.location.href = "program" + sParamStr;
}
$document.ready(function () {
$('.program-status > .btn').on('click', function (e) {
redirectToUpdatedLocation();
});
});
</script>
But the browser always redirects to {site}/program without the query string. By commenting out window.location.href = "program" + sParamStr; line, I managed to observe that second click onwards, sParamStr getting appended properly.
It seems that, my code tries to read the text of the pressed button before, .button('toggle') method form bootstrap.js finished. Code worked as intended when I changed function as follows.
$document.ready(function () {
$( '.program-status > .btn').on('click', function (e) {
$(this).addClass('active');
redirectToUpdatedLocation();
});
});
While this method works for me right now, I would like to know the proper way to achieve this. i.e How to execute my code after previous click binding finishes?
UPDATE:
I found this link in the Twitter Bootstrap forum. Seems it is a known issue.
https://github.com/twitter/bootstrap/issues/2380

I'm not sure what Bootstrap's .toggle is doing exactly, but it seems like it does some sort of animation that completes with the setting of the active class. You can try enqueing your code instead:
$( '.program-status > .btn').on('click', function (e){
$(this).queue(function (next) {
redirectToUpdatedLocation();
next();
});
});
For example, click the div as it is being toggled: http://jsfiddle.net/9HwYy/
It also seems a bit silly to me to update every href instead of just the one you clicked on since you are changing the window location anyway.

try
$('.program-status > .btn.active').each(function(i,v){
v = $(v);
addToParamStr( '?status=' + v.text());
});
since im not sure "this" is working in your case.