domCache Not Working


#1

I’m creating an app using the framework7 PhoneGap template. This one has two hyperlinks links in the lower toolbar. I’ve changed these to be buttons and they link to two different html pages in my app. The problem I’m having is that I can click either button once and get to the page. When I click back to go to the index, the links no longer work. I’ve tried setting the domCache to false and true, and neither works. I’ve also tried stackpages: true. No matter what, I can’t click either link more than once from the index.

var mainView = myApp.addView(’.view-main’, {
// Because we want to use dynamic navbar, we need to enable it for this view:
dynamicNavbar: true,
stackPages:true,
//domCache: false
});


#2

Are you using v1 or v2. If v2, what is the link and in your routes?


#4

OK, I found it in the framework7 JS.

app.version = ‘1.5.0’;


#5

can you share the full code?


#6

my-app.js or the framework,js from the lib directory?


#7

your my-app. file. (ignore need 20 char to reply)


#8
// Initialize app
var myApp = new Framework7();

// If we need to use custom DOM library, let's save it to $$ variable:
var $$ = Dom7;

// Add view
var mainView = myApp.addView('.view-main', {
// Because we want to use dynamic navbar, we need to enable it for this view:
dynamicNavbar: true,
});

// Handle Cordova Device Ready Event
$$(document).on('deviceready', function() {
console.log("Device is ready!");
});

$$(document).on('click', '.panel .charts-link', function searchLink() {
  // Only change route if not already on the index
  //  It would be nice to have a better way of knowing this...
  var indexPage = $$('.page[data-page=index]');
  if (indexPage.hasClass('cached')) {
mainView.router.load({
  pageName: 'index',
  animatePages: false,
  reload: true,
});
  }
});


// Option 1. Using page callback for page (for "about" page in this case) (recommended way):
myApp.onPageInit('map_B', function (page) {

	var map;

	require([
     "esri/config",
    "esri/map",
      "esri/arcgis/utils",
    "esri/tasks/Geoprocessor",
    "esri/tasks/GeometryService",
      "esri/graphic",
      "esri/geometry/webMercatorUtils",
      "esri/dijit/Popup",
      "esri/InfoTemplate",
      "esri/dijit/HomeButton",
      "esri/dijit/Search",
      "dojo/dom-construct",
      "dojo/dom",
		  "dojo/i18n!esri/nls/jsapi",
      "dojo/dom-attr",
      "dojo/query",
      "dojo/on",           
      "dojo/parser",
      "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
      "dijit/TitlePane",
    "dojo/domReady!"
  ], function (
    esriConfig, Map,  arcgisUtils, Geoprocessor, GeometryService,
		Graphic, webMercatorUtils, Popup, InfoTemplate, HomeButton, Search, 
		domConstruct, dom, esriBundle, domAttr, query, on, parser
  ) {
		  
      //parser.parse();
		  
		  esriBundle.widgets.Search.main.placeholder = "Find address, place or lat/lon";

        map = new Map("map", {
        basemap: "hybrid",
           center: [-97, 40],
			  zoom: 3,
			   slider: false
		  
      });
	

		  esriConfig.defaults.geometryService = new GeometryService("http://ourserver.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");		
		
        var home = new HomeButton({
      map: map
     }, "HomeButton");
     //home.startup();
       
       var search = new Search({
        map: map,
           showInfoWindowOnSelect: false,
           enableLabel: false,
           enableHighlight: false,
			   enableSuggestions: true
     }, "search");
     search.startup();
		
		var x,y;
        
		//Initial click function	
     $$(document).on("click", function(evt){
			  
        var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint);
        x = mp.x.toFixed(3);
        y = mp.y.toFixed(3);
			
      map.graphics.clear();
      var graphic = new Graphic(evt.mapPoint);

      map.graphics.add(graphic);
      map.infoWindow.setFeatures([graphic]);
		  map.infoWindow.resize(200,200);	
      map.infoWindow.setContent(" Longitude: " + x.toString() + " <br>Latitude: " + y.toString());
      map.infoWindow.show(evt.mapPoint)
		  map.infoWindow.setTitle("Forecast Reports");
		  
    }); 
		
		  var locationStr;
		
		  window.gp_chart = new Geoprocessor("http://ourserver.com/arcgis/rest/services/Three_Week_Chart/GPServer/ThreeWeekChart");
		  
		  //Three week chart link click
		  var link = domConstruct.create("a",{
            "class": "action", 
            "id": "chartLink",
            "innerHTML": "Generate Chart", //text that appears in the popup for the link 
            "href": "javascript: void(0);"
          }, query(".actionList", map.infoWindow.domNode)[0]);
      
		  on(link, "click", function()
				{ 

				window.navigator.notification.prompt(
				  "Enter Location Name: ", // message
				  handleLocationPrompt, // callback
				  "", //title
				  ["Ok", "Exit"] // button titles
				);

				// handle user's dialog action
				function handleLocationPrompt(results) {
				  if (results.buttonIndex === 1) {
					// Ok
					locationStr = results.input1;
					
					 var lat,lon = "";
					 lat = x.toString();
					 lon = y.toString();

				var taskParams = {
				  "Latitude": lat,
				  "Longitude": lon,
				  "Location": locationStr
				  
				};
				
				  domAttr.set(dom.byId("chartLink"), "innerHTML", "Generating Chart...");
				  window.gp_chart.execute(taskParams, gpChartResultAvailable);

				  }
				}
				});
			
			   var content = "";
			   var chartPath;
			   
			  function gpChartResultAvailable(results, messages){
				 domAttr.set(dom.byId("chartLink"),"innerHTML", "Three Week Chart");
				 //clear any existing features displayed in the popup 
				map.infoWindow.startup();
				
				 if(results == 0){
					  var chartPath = "http://ourserver.com/Test_Charts/Three_Week_Chart_for_" + locationStr + ".png";
					  //content = '<IMG SRC="' + chartPath + '" width=100% height=100%>';
			
				 }else{
					  content = " Unable To Generate Chart";
				 }
				
				map.infoWindow.resize(250, 170);
				map.infoWindow.setTitle("Click on Chart");
			
				var img = document.createElement("img");

				img.src=chartPath;
				img.width=240;
				img.height=160;
				img.addEventListener("click", function () {window.location = chartPath;});
				map.infoWindow.setContent(img);
				map.infoWindow.reposition();
				
		
			};
			

    }); 
   
})

myApp.onPageInit('map_A', function (page) {
	
	var map;

	require([
     "esri/config",
    "esri/map",
      "esri/arcgis/utils",
    "esri/tasks/Geoprocessor",
    "esri/tasks/GeometryService",
      "esri/graphic",
      "esri/geometry/webMercatorUtils",
		  "esri/geometry/Point", 
    "esri/symbols/SimpleMarkerSymbol", 
		"esri/symbols/SimpleLineSymbol",
    "esri/graphic", 
		"esri/Color",
      "esri/dijit/Popup",
      "esri/InfoTemplate",
      "esri/dijit/HomeButton",
      "esri/dijit/Search",
      "dojo/dom-construct",
      "dojo/dom",
		  "dojo/i18n!esri/nls/jsapi",
      "dojo/dom-attr",
      "dojo/query",
      "dojo/on",           
      "dojo/parser",
      "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
      "dijit/TitlePane",
    "dojo/domReady!"
  ], function (
    esriConfig, Map,  arcgisUtils, Geoprocessor, GeometryService,
		Graphic, webMercatorUtils, Point,
    SimpleMarkerSymbol, SimpleLineSymbol,
    Graphic, Color, Popup, InfoTemplate, HomeButton, Search, 
		domConstruct, dom, esriBundle, domAttr, query, on, parser
  ) {
		  
      //parser.parse();
		  
		  esriBundle.widgets.Search.main.placeholder = "Find address, place or lat/lon";

        map = new Map("map", {
        basemap: "hybrid",
           center: [-97, 40],
			   zoom: 3,
			   slider: false,
		
      });

		  esriConfig.defaults.geometryService = new GeometryService("http://ourserver.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");		
		  esri.config.defaults.map.zoomDuration = 750; //time in milliseconds; default is 500
      esri.config.defaults.map.zoomRate = 25; //refresh rate of zoom animation; default is 25

		window.gp_chart = new Geoprocessor("http://ourserver.com/arcgis/rest/services/Three_Week_Chart/GPServer/ThreeWeekChart");

		window.setTimeout(generateChart,2500);
		
			function generateChart(){
				
					console.log("generating chart");
				
					var randomNumber = Math.floor((Math.random() * 1000) + 1);
					
					var randNumb = randomNumber.toString();
							
					var locationStr = "Your_Location_" + randNumb;
					console.log(locationStr);
					
					var options = {
						  enableHighAccuracy: true,
						  timeout: 5000,
						  maximumAge: 0
						};
						
					window.navigator.geolocation.getCurrentPosition(gotLocation,onError,options)
					
					function onError(error) {
					console.log('code: ' + error.code + '\n' +
						'message: ' + error.message + '\n');
						}
				
					function gotLocation(position) {
						
						 function addGraphic(pt){
						  var symbol = new SimpleMarkerSymbol(
							SimpleMarkerSymbol.STYLE_CIRCLE, 
							12, 
							new SimpleLineSymbol(
							  SimpleLineSymbol.STYLE_SOLID,
							  new Color([255,0,0, 0.5]), 
							  8
							), 
							new Color([255,0,0, 0.9])
						  );
						  graphic = new Graphic(pt, symbol);
						  map.graphics.add(graphic);
						  
						}
						
					var Latitude = position.coords.latitude;
					var Longitude = position.coords.longitude;
					
					 var pt = new Point(Longitude, Latitude);
					  addGraphic(pt);
					  map.centerAndZoom(pt, 17);
		
					var latitude = Latitude.toFixed(3);
					var longitude = Longitude.toFixed(3);
					
					 var y = latitude.toString();
					 var x = longitude.toString();

		//For some reason PhoneGap swaps lat and lon before it hits the MetCon Server
					var taskParams = {
					  "Latitude": x,
					  "Longitude": y,
					  "Location": locationStr
					};
					
					var content = "";
				    var chartPath;
	
				  function gpChartResultAvailable(results, messages){
					  
					 if(results == 0){
						  var chartPath = "http://ourserver.com/Test_Charts/Three_Week_Chart_for_" + locationStr + ".png";
						  window.location = chartPath;
						  window.open(chartPath,"_self");
					 }
					 
		
				};
				
				window.gp_chart.execute(taskParams, gpChartResultAvailable);
					
				}
			}
		
			   
			
		}); 
	
	
})

#9

And your layout plz.


#10

Layout?

(ignore need 20 char to reply)


#11

your html code. (ignore need 20 char to reply)


#12
<!DOCTYPE html>
<html>
<head>
    <!--
        Customize this policy to fit your own app's needs. For more guidance, see:
            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
        Some notes:
            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->
   <!--  <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
 -->
    <!-- Required meta tags-->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">

	<link rel="stylesheet" href="lib/framework7/css/framework7.ios.min.css">
    <link rel="stylesheet" href="lib/framework7/css/framework7.ios.colors.min.css">
	<link rel="stylesheet" href="https://js.arcgis.com/3.24/esri/css/esri.css"/>
    <link rel="stylesheet" href="lib/font-awesome-4.5.0/css/font-awesome.min.css" />
	<link rel="stylesheet" href="css/styles.css">
	
	
    <!-- Your app title -->
    <title>MetCon</title>

    <!-- This template defaults to the iOS CSS theme. To support both iOS and material design themes, see the Framework7 Tutorial at the link below:
        http://www.idangero.us/framework7/tutorials/maintain-both-ios-and-material-themes-in-single-app.html
     -->

    
</head>

<body class="theme-blue">
    <!-- Status bar overlay for full screen mode (PhoneGap) -->
    <div class="statusbar-overlay"></div>

    <div class="panel-overlay"></div>
  <!-- Left panel with cover effect-->
  <div class="panel panel-left panel-cover">
    <!--<div class="content-block">-->
    <div class="content-block-title">Menu</div>
	<div class="list-block">
      <ul>
        <li>
          <a href="#" class="charts-link item-content list-panel-all close-panel item-link">
            <div class="item-inner">
              <div class="item-title">Three Week Charts</div>
            </div>
          </a>
        </li>
		<li>
          <a href="climate_charts.html" class="charts-link item-content list-panel-all close-panel item-link">
            <div class="item-inner">
              <div class="item-title">Climate Charts</div>
            </div>
          </a>
        </li>
        <li>
          <a href="saved_locations.html" class="favorites-link item-content list-panel-all close-panel item-link">
            <div class="item-inner">
              <div class="item-title" >Saved Locations</div>
            </div>
          </a>
        </li>
      </ul>
    </div>
  </div>

    <!-- Views -->
    <div class="views">
        <!-- Your main view, should have "view-main" class -->
        <div class="view view-main">
            <!-- Top Navbar-->
            <div class="navbar">
                <div class="navbar-inner">
                    <!-- We need cool sliding animation on title element, so we have additional "sliding" class -->
                    <div class="center sliding">Meteorological Connections</div>
                    <div class="right">
                        <!--
                          Right link contains only icon - additional "icon-only" class
                          Additional "open-panel" class tells app to open panel when we click on this link
                        -->
                        <a href="#" class="link icon-only open-panel"><i class="icon icon-bars"></i></a>
                    </div>
                </div>
            </div>
            <!-- Pages container, because we use fixed-through navbar and toolbar, it has additional appropriate classes-->
            <div class="pages navbar-through toolbar-through">
                <!-- Page, "data-page" contains page name -->
                <div data-page="index" class="page">
                    <!-- Scrollable page content -->
                    <div class="page-content" >
						<p style="font-size:125%;"><b>Three Week Charts</b></p>
						<img class="responsive" src="chart_icon.png" alt=""/>
                    </div>
                </div>
            </div>
			
            <!-- Bottom Toolbar-->
            <div class="toolbar">
                <div class="toolbar-inner">
                    <!-- Toolbar links -->
                    <a href="map_B.html" class="button button-medium">Choose Location</a>
                    <a href="map_A.html" class="button button-medium">Use Current Location</a>
                </div>
            </div>
		
			
			
        </div>
    </div>

    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
    <script type="text/javascript" src="js/my-app.js"></script>
	<script type="text/javascript" src="https://debug2.phonegap.com/target/index.js#ee5dc974-230e-11e8-9450-0615b500c154d"></script>
    <script src="https://js.arcgis.com/3.24/"></script>
</body>

</html>

#13

Navigation by pageName in v1 is possible only with enabled domCache. I don’t see you have added domCache: true to your View.

P.S. If your app is not so large, i highly recommend you to migrate it to v2


#14

I’ve set domCache to true and it hasn’t worked. How to I migrate to V2? Change the version number in framework7 JS?


#15

here you have a HOW TO.
migration-to-framework7-v2


#16

That seems far too complicated at this point. I’m brand new to this and I’m using the v1 basic PhoneGap template. Is there a way I can solve this issue with what I’ve got? I need to get this working ASAP.