Ajax Collaboration Problem

[Jack Brown]

The code below isn't working for me. What did I do wrong? The ajax realtime updating doesn't work even though I used the code one of your coworkers suggested here..
https://groups.google.com/forum/#!searchin/pdfnet-webviewer/ajax$20polling/pdfnet-webviewer/_QeJeSPVpeY/La31QAOL6vsJ

This is my code below...

<script type='text/javascript'>
$(function() {
    var viewerElement = document.getElementById('viewer');
    var myWebViewer = new PDFTron.WebViewer({
        type: 'html5',
        mobileRedirect: false,
        documentId: '$x',
        cloudApiId: '$x2',
        path: '/lib',
        config: '/lib/config.js',
        serverUrl: '/lib/html5/annotationHandler.php',
        enableAnnotations: true,
        streaming: false,
        showToolbarControl: true,
        }, viewerElement);

$(viewerElement).bind('documentLoaded', function(event){

            setInterval(function(){
                var am = me.docViewer.GetAnnotationManager();
                var clientAnnotData= am.GetAnnotCommand();
                $.ajax({
                    url: serverurl
                    cache: false,
                    data : clientAnnotData,
                    success: function(data) {
                        //server returned some annotation commands
                        if (data !== null) {
                            am.ImportAnnotCommand(data);
                        }
                    },
                    error: function() {
                        //server gave an error
                    },
                    dataType: 'xml'
                });
            },3000); //execute this code every 3 seconds

});

});
</script>";

I also put just this portion below in my config file in a documentLoaded event function and it still didn't work...

$(viewerElement).bind('

documentLoaded', function(event){

            setInterval(function(){
                var am = me.docViewer.GetAnnotationManager();
                var clientAnnotData= am.GetAnnotCommand();
                $.ajax({
                    url: serverurl
                    cache: false,
                    data : clientAnnotData,
                    success: function(data) {
                        //server returned some annotation commands
                        if (data !== null) {
                            am.ImportAnnotCommand(data);
                        }
                    },
                    error: function() {
                        //server gave an error
                    },
                    dataType: 'xml'
                });
            },3000); //execute this code every 3 seconds

});

I am not the best with AJAX so in your reply please just make this simple for me to understand why this isn't working and paste the code that will work. This is crucial for my application to work. It seems so simple but I don't understand what I am missing.

[Matt Parizeau]

So there are a few things to say here. In the first block of code that you posted you have $(viewerElement).bind('documentLoaded') and it will be executing this code in the outer page (i.e. not inside the iframe). The page inside the iframe is where DocumentViewer and AnnotationManager are defined. The code that is inside the config file will be executed inside the inner page and it looks like you already have the exact same code in your config file so you should be able to remove the documentLoaded code in the first block.

Now for the code in your config file. "me" is not defined anywhere and is really referring to readerControl, so you'll want to change that to readerControl.docViewer.GetAnnotationManager();. The next thing is that you don't mention what your server is doing. If you're just using the default annotationHandler.php then this will not work. You'll have to make some changes to annotationHandler.php to be able to store and send out the commands. Here is a description copied from the post that you linked:

• now your server should process this these annot commands. This is where extra logic may be needed regarding permissions and how you persist the annotation data. It is up to your implementation.
• an example, is that your server temporarily saves the annot commands (to database or file). And returns any new annot commands it has received (from other users).
• in a simple scenario, you can keep track of annot commands by using timestamps on when it was sent to the server.
• your server will respond with any new annot commands created from other clients

So for this to work you'll have to implement these things in your server script (annotationHandler.php). You'll want it to store at least all of the annotation commands it received in the last three seconds and you'll want to return these commands in the response to the clients so they are updated with the changes. The implementation for these things will be up to you.

Matt Parizeau

Software Developer

PDFTron Systems Inc.

[Jack Brown]

I almost thought I got it set up thanks to your suggestions but I'm sure I'm missing something simple. Here is the EXACT code in my config file and the EXACT code in my annotationHandler.php file. So what do I still have left to do or modify to get this all to work properly?

$(document).on('documentLoaded', function() {
setInterval(function(){
                var am = readerControl.docViewer.GetAnnotationManager();
                var clientAnnotData= am.GetAnnotCommand();
                $.ajax({
                    url: '/lib/html5/annotationHandler.php',

                    cache: false,
                    data : clientAnnotData,
                    success: function(data) {
                        //server returned some annotation commands
                        if (data !== null) {
                            am.ImportAnnotCommand(data);
                        }
                    },
                    error: function() {
                        //server gave an error
                    },
                    dataType: 'xml'
                });
            },3000); 

});

---------------------------------------

<?php

if (!is_dir("annotations")) {
  // dir doesn't exist, make it
  mkdir("annotations");
}

//Simple annotation handler
if(isset($_REQUEST['did']) && $_REQUEST['did'] != "null"){
    $did = $_REQUEST['did'];
    $xfdf_file = "annotations/".$did.".xfdf";
} else{
    $xfdf_file = "annotations/default.xfdf";
}

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    //POST request
    if(isset($_POST['data'])){
       
        if (get_magic_quotes_gpc()) {
            $xfdfData = stripslashes($_POST['data']);   
        } else{
            $xfdfData = $_POST['data'];
        }

        if(file_put_contents($xfdf_file, $xfdfData)){
            //save successful
            //echo $xfdf_file;
        }else{
            header("HTTP/1.1 500 Internal Server Error");
        }
    }
} else{
    //GET request
    if(file_exists($xfdf_file)){
        header("Content-type: text/xml");
        echo file_get_contents($xfdf_file);
    }else{
        header("HTTP/1.1 204 No Content");
    }
   
}
?>

I modified my annotationHandler.php file so it doesn't save comments based on sessions.

[Matt Parizeau]

The annotationHandler.php file you have is basically the default one that will handle saving and loading all of the annotations at once. Annotation commands are sending only what has changed and since there could be several of them by the same or different users your server will have to hold onto them somehow (file, database, etc) so that they can be sent out when the user polls the server.

If you would like more in depth assistance with implementing this then you can fill out the custom engineering form here: https://www.pdftron.com/support/professionalservices.html

Matt Parizeau

Software Developer
PDFTron Systems Inc.