I am attempting to display the data fetched from my database (via html form and javascript) on a new page instead of the same page as the form.

I am receiving the alert(JSON.stringify(formElements)); which displays the column names as well the data. However, after this alert the new page is not opening.

I am using Cordova and JQuery mobile.

Can anyone see the issue here?

JavaScript:

function fetchEvent() {
   db = window.openDatabase("SoccerEarth", "2.0", "SoccerEarthDB", 2 * 1024 * 1024);
   db.transaction(function(tx) {
   var TitleT = document.getElementById("texttitle").value;
   tx.executeSql("SELECT * FROM SoccerEvents WHERE Title LIKE '%" + TitleT + "%'", [], successCBValue,errorCB);
         });

 function successCBValue(tx, response) {
     var page_id='20';
      var formView = "<div data-role='content'>"+"<h1>"+"Header"+"</h1>"+"<div id='datadisplay'>" +"{formElements}"+ "</div>"+ "</div>";
       var formElements = "<table><tr><th>Title</th><th>Location</th><th>NoPeople</th><th>Date</th><th>Description</th></tr>";
       for (var i = 0; i < response.rows.length; i++) {
       formElements += "<tr><td>" + response.rows.item(i).Title + "</td><td>" + response.rows.item(i).Location +"</td><td>" + response.rows.item(i).NoPeople + "</td><td>" + response.rows.item(i).Date +"</td><td>" + response.rows.item(i).Description + "</td></tr>";
                     }
   console.log(JSON.stringify(formElements));
    formView =  formView.replace("{formElements}", formElements);
     $('#page_body').append('<div data-role="page" id="20"><div data-role="content">' + formView + '</div></div>');
     $.mobile.initializePage();
     $.mobile.changePage("#" + page_id, "pop", false, true);
 $('#page_0 div[data-role="content"]').append('<br><br><a href="#' + page_id + '">go to ' + page_id + ' page</a>');
   }
     }