Datasource add() is not creating row on client side using sync() method

[Lee]

I am creating a new item / row on a datasource which works server side but not client side.  Basically I have a mobile app where I list messages in one view and then have a create message form in another view which should in theory update on the server and update the message list using the sync method on the datasource.  It updates the server but does not update the list until I refresh the page.

Can anyone see what I am missing?

Many thanks in advance.

Code in INDEX page

//global vars

var support_selected;

var support_id;

var support_read;  

var ticket_subject;

var ticket_message;

var ThreadID;

var Closed;    

var DateCreated;   

var Subject;

  

var ticketDataSource = new kendo.data.DataSource({

      transport: {

          read: "/support/data",

          dataType: "json",

          create: {

              url:  function() {

                  var url = "/support/newticketpost/";

                  return url;

              },

              type: "POST",

              dataType: "json"                   

          },

          update: {

              url:  function() {

                  var url = "/support/markasread/" + support_id + "/" + support_read;

                  return url;

              },

              type: "POST",

              dataType: "json"

          },               

      },

      schema: {

        model: {

            id: "ThreadID",

            fields: {

                DateCreated:  { type: "string" },

                Subject:  { type: "string" },

                Closed:  { type: "string" }                    

               }

           }

       }

   });

code in LIST MESSAGES page

<div data-role="view" data-title="Control Panel - Mobile" id="listtickets" data-init="listTicketsInit">

        <h2>Tickets</h2>

        <p><?php  echo $unread_responses . ' - unread support responses'; ?></p>  

        <p><a data-align="left" data-role="button" href="/support/newticket/">New ticket</a></p> 

        <ul id="support_list"></ul>

    </div>

         

 

   <script id="support_list_template" type="text/x-kendo-template"><a href="/support/view/#= ThreadID #"><div style="float:left; width:150px;" class="closed_#= Closed #">#= DateCreated # </div><div id="ticket_#= id #" class="closed_#= Closed #">#= Subject #</div></a></script>

    

   <script>

    

       function listTicketsInit() {      

         

          $("#support_list").kendoMobileListView({

              dataSource: ticketDataSource,

              style: "inset",

              template: $("#support_list_template").text()

                  

          });

           

     }

    

   </script>  

    

    <style>

    #listtickets div.closed_0 {font-weight:bold}

    #listtickets div.closed_1 {font-weight:normal}

   </style>

code in NEW MESSAGE page

<div data-title="Control Panel - Mobile" id="newticket" data-role="view" data-init="newTicketInit">

     <h2>New Ticket</h2>

    <div id="error"><p style="color:red">Please enter both subject and message</p></div>

     <ul data-role="listview" data-style="inset">

         <li>Subject<input type="text" name="subject" id="subject" /></li>

         <li>Message<textarea name="message" id="message" style="float:right"></textarea></li>

         <li><a data-role="button" id="sendBtn">Send</a></li>

     </ul>  

</div>

<script>

function newTicketInit() {

          var redirect = "/support/listall";

         //hide reply box & error boxes

         $("#error").hide();

         //send reply

         $("#sendBtn").click(function() { 

              

             ticket_subject = $("input#subject").val()

             ticket_message = $("textarea#message").val(); 

              

             if (ticket_subject == "") { 

               $("div#error").show(); 

               $("#subject").focus(); 

               return false;

             } else if(ticket_message == ""){ 

               $("div#error").show(); 

               $("#message").focus(); 

               return false;            

             } else {

               ticketDataSource.add({ subject: ticket_subject, message: ticket_message });  

               ThreadID = ticketDataSource.data();

               ticketDataSource.sync();

                

               app.navigate(redirect);  

 

             }

         });

          

     }  

 </script>