I posted this in the wrong sub-forum I think, so I've reintroduced it here...

Here is a screencast of the issue to make it clearer....

http://screencast.com/t/KXD8U1oA0yU6

Hello again, still working on the same page! This is my first project where I'm trying to get my head round AJAX so I am running into a few stumbling blocks.

I have a datatable that loads user details from a JSON output via AJAX.

There is a "Deactivate" button which deactivates the user account.

I have applied the popconfirm id to each row...

<script type="text/javascript">

$(document).ready(function() {

$('#user_list').DataTable( {

stateSave: true,

"pageLength": 20,

"ajax": {

"url": "data/JSON_users_list.php",

"dataSrc": "",

},


"columns": [

{ "data": "profile_photo_path" },

{ "data": "namebulk" },

{ "data": "email" },

{ "data": "active" },

{ "data": "id"}

],

"columnDefs": [

{ sClass: "hidden-xs hidden-sm", "targets": [ 0 ] },

{ sClass: "user-name", "targets": [ 1 ] },

{ sClass: "hidden-xs hidden-sm", "targets": [ 2 ] },

{ sClass: "action-links", "targets": [ 3 ] },

{ "width": "1%", "targets": 0 },

{

"targets": [ 4 ],

"visible": false,

"searchable": false

}

],

"fnRowCallback": function( nRow, aData, iDisplayIndex ) {

$('td:eq(0)', nRow).html('<div style="background: url(\''+aData.profile_photo_path+'\');" class="image-circle-50" id="'+aData.id+'-img"></div>');

$('td:eq(1)', nRow).html('<a onclick="$(\'#menu\').load(\'USERS_edit.php?id='+aData.id+'\');" class="name edit" id="showmenu"><span id="'+aData.id+'-first_name">'+aData.first_name+'</span> <span id="'+aData.id+'-last_name">'+aData.last_name+'</span></a><span id="'+aData.id+'-username">'+aData.username+'</span>');


$('td:eq(3)', nRow).html('<a onclick="$(\'#menu\').load(\'USERS_edit.php?id='+aData.id+'\');" id="showmenu" class="edit"><i class="linecons-pencil"></i>Edit</a><a class="delete" id="deactivate"><i class="linecons-trash"></i>Deactivate</a>');


return nRow;

},

} );


var myTable = $('#user_list').DataTable();


yadcf.init(myTable, [

{column_number : 0, filter_type: 'none'},

{column_number : 1, filter_type: 'text'},

{column_number : 2, filter_type: 'text'}

]);



} );

</script>

Which is on the line <a class="delete" id="deactivate"><i class="linecons-trash"></i>Deactivate</a>

The popconfirm JS is found here: https://github.com/Ifnot/PopConfirm

Here is the code to initialise popconfirm on anything with the ID of "deactivate":

        <script type="text/javascript">

            $(document).ready(function() {


                // Custom Title, Content and Placement

                $("#deactivate").popConfirm({

                    title: "Are you sure?",

                    content: "All previous records of this user will be maintained on the system for consistency",

                    placement: "left",

                    noBtn: "Cancel"

                });

            });

        </script>    

I have tried changing it to:

$('#main-content').ready(function() {

and

$('body').ready(function() {

to make sure it is initialised for anything that appears in the body or the main-content DIV, but still no luck....

Am I missing something simple here, or is popconfirm natively not going to work like this?

Thanks

Hello crE,

 

Firstly, there should only ever be one ID on the page so having multiple id="deactivate" maybe a stumbling block.

 

Secondly, are you seeing any errors in the console? If so, what are they?

 

Cheers,

J