ajax.reload

crush123

I have a page with 2 datatables, one (parent) acting as filter for another (child).

what i want to do is on editing the child table, the parent data is reloaded.

I can do this with

setInterval( function () {
pagestable.ajax.reload(null, false);
}, 3000 );

which reloads every 3 seconds

if i try

editor
    .on( 'postCreate postEdit postRemove', function () {
        pagestable.ajax.reload( null, false );
    });

nothing happens, the function is not triggered

allan

I'd need a link to a page showing the issue in order to be able to debug it please.

Allan

crush123

oops, sorry

http://hutch.forthwebsolutions.com/admin/content/plugins/cmscontent.php

allan

The postCreate event isn't being triggered because the JSOn returned by the create Ajax request doesn't contain any new rows:

{"data":[]}

So there is nothing to add to the DataTable.

As to why it isn't returning anything - that is presumably an issue with the server-side code. Perhaps a where condition being applied which is not being satisfied.

Allan

crush123

that was it, the record was being saved but the where clause was an empty string.

I managed to overcome that by changing my ajax source, so a wildcard is loaded by default.

now my page refreshes successfully. and i use the data from the newly inserted row to filter the table content. (i updated the link)

         editor.on( 'postCreate', function (e, json, data) {
         var newpage = data.tblcmscontent.PageName;
         //console.log(newpage);
         pagestable.ajax.reload( null, false );
         table.ajax.url('/ajax/CMS_Content.php?PageName='+newpage).load();
         $("caption").html('CMS Content for '+newpage+' page');
    });

the only thing i can't work out, is how to pass the value of newpage into my pagestable and add a 'selected' class

crush123

nearly there

i am looping through every row in my 'pages' table and can identify the name of the new page added in my 'content' table. - the code block starting pages.rows().every( function () {...

where i have a match, how can I add the selected class to the relevant row in my pages table ?

editor.on( 'postCreate', function (e, json, data) {
         var newpage = data.tblcmscontent.PageName;
         pages.ajax.reload( null, false );

         pages.rows().every( function () {
         var d = this.data()['PageName'];

         if(d == newpage) {
             console.log(d);
         }

        d.counter++;

        } );
    });

allan

The row().select() class is probably the best way (assuming you are using the Select extension).

edit Doesn't look like you are. So row().node() and then use $().addClass().

Allan

crush123

closer...

     editor.on( 'postCreate', function (e, json, data) {
         var newpage = data.tblcmscontent.PageName;
         //console.log(newpage);
         pages.ajax.reload( null, false );

         pages.rows().every( function (rowIdx, tableLoop, rowLoop) {
         var data = this.data();

           if(data['PageName'] == newpage) {
              $(this.node()).addClass( 'selected' );
              //console.log(this.node());

           }

         });

         content.ajax.url('/ajax/CMS_Content.php?PageName='+newpage).load();
         $("caption").html('CMS Content for '+newpage+' page');
         pages.draw();
    });

this seems to add the class to the row as intended, but the table doesn't show the selected row on draw()

allan

You shouldn't need to call draw() at all if you are just adding a class.

Does it get visibly added before the Ajax request? (Sorry for not checking the live page - I've got about 20 questions to get through as quickly as possible :-) ).

Allan

crush123

editor.on( 'postCreate postEdit', function (e, json, data) {
         pages.ajax.reload();
         var newpage = data.tblcmscontent.PageName;
         //console.log(newpage);

         pages.rows().every( function (rowIdx, tableLoop, rowLoop) {
         var data = this.data();

           if(data['PageName'] == newpage) {
              $(this.node()).addClass( 'selected' );
              //console.log(this.node());             
           }

         });

         content.ajax.url('/ajax/CMS_Content.php?PageName='+newpage).load();
         $("caption").html('CMS Content for '+newpage+' page');
    });

The class IS added successfully, you can see the row selected for a fraction of a second.
The problem seems to be with the pages.ajax.reload(); if this line is commented out, the row stays selected.

allan

Okay - good. Do you have rowId configured in your DataTable configuration? That is the mechanism that Select can use to retain selection on reload.

Allan

crush123

I didn't, so I added it, but the result is the same

allan

Ah - I see. You are using $(this.node()).addClass( 'selected' ); rather than the row().select() method. That would explain why Select doesn't know the row is selected :-).

Instead of that line, try using:

this.select();

Allan

crush123

that seems to do the same, selecting the row very briefly then losing it again

Is it by any chance the order of events, the select seems to happen, but maybe something is happening afterwards

allan

I'm not sure why I didn't spot this before, but on rereading the code it seems fairly obvious - the pages.ajax.reload() code is being executed before you select the row in the pages table. Since the Ajax call is async (that's what Ajax is after all), this is effectively out of sequence.

Simply reverse the order of that code - select the row first then reload the content for that table and that should do it.

Allan

crush123

I dont think I can set selected before I reload the page, as at the point postCreate, the row may not yet exist in the pages table

Let me explain what i am trying to do, it may clarify

I have 2 tables, pages and content

The pages table uses the page name stored in the content table as its data source

The page names available to the content table come from a select list, populated from the site root, which lists all files with a .php extension

At the point of creating a new page, all of the possible php file names are available from my select list, but they may not yet exist in the content table (and hence not the pages table).

As an example, if i create new page content for the 'about' page, the pages table may not have an entry for the 'about' page yet.

Once the entry is stored in my content table, I want to reload the pages table, (which will now show about.php), then set this new row as selected, then reload the content table applying the recently added page name as a filter.

allan

Okay - I didn't get that before, sorry.

In which case you need to wait for the new data to be loaded before you can search for the new data. Using the callback function option of ajax.reload() would be the correct approach I would say.

Allan

crush123

I managed to get it working.

Not sure if it is the best method, but i'm happy it works

editor.on( 'postCreate postEdit', function (e, json, data) {

         var newpage = data.tblcmscontent.PageName;

         pages.ajax.reload( function () {
            //console.log( newpage );   
            pages.rows().every( function (rowIdx, tableLoop, rowLoop) {
            var data = this.data();
             if(data['PageName'] == newpage) {
                $(this.node()).addClass( 'selected' );
             }
            });
         });

         content.ajax.url('/ajax/CMS_Content.php?PageName='+newpage).load();
         $("caption").html('CMS Content for '+newpage+' page');
    });