Problem with Multi-page design using JQuery Mobile

Question

I have a simple web app using the multi-page architecture in JQuery Mobile.

I have two pages as now in the same html and will add a third later.

The home page consists of a list of 5 links which when the user clicks on any one will take transition them to the second page.

These 5 links actually link to the same second page but the only difference is the header of the second page changes to reflect the link that user pressed in the home page.

On the second page, I have two buttons called Next and previous in the footer. On clicking next, the page should refresh and the header should reflect the immediate next link in the home page. For example if user is on Foghorn and clicks next, then the next page would be "Little" and so on.

I have IDs for all the 5 links starting from 0 for foghorn and so on. I keep a track of ID of the link of the second page the user is on as a global variable in JS called "chickenNumber".

I need to implement the next and previous buttons by incrementing / decrementing this global variable which I've done but it doesn't appear to replace the header with the next link in the list.

Any idea what I'm doing wrong?

Below is my form code for the second page:

<div data-role="page" id="entry_page">
        <div id="chickenNameContainer" data-role="header">
            <a href="#" onclick="clearFields()" data-icon="refresh">Clear</a>
            <h3 id="chickenNameHeader"></h3>
            <a href="#" data-icon="action" >Show Logs</a>
        </div>

        <div class="form-container">
            <form action="#" method="post">

                <label for="ID_input">ID:</label>
                <input id="ID_input" type="number" placeholder="xxxx">

                <label for="weight_input">Weight (g):</label>
                <input id="weight_input" type="number" step="any" min="0" max="10000" placeholder="0. &rarr; 10000">

                <label for="eggs_input">Eggs laid:</label>
                <input id="eggs_input" type="number" min="0" max="4" placeholder="0 &rarr; 4">

                <label for="grain_input">Grain eaten (g):</label>
                <input id="grain_input" type="number" step="any" min="0" max="1000" placeholder="0. &rarr; 1000">

                <label for="category_input">Category:</label>
                <select id="category_input" required="true">
                    <option value="empty" selected></option>
                    <option value="poor">Poor</option>
                    <option value="average">Average</option>
                    <option value="good">Good</option>
                </select>

                <button id="submitBtn" type="submit" name="button">Save log entry</button>
            </form>
        </div>

        <div data-role="footer" class="ui-bar">
            <a id="6" href="#"  onclick="traverse(this)" data-icon="arrow-r" data-ajax="false" >Next</a>
            <a id="7" href="#" onclick="traverse(this)" data-icon="arrow-l" data-ajax="false" >Previous</a>
            <a id="5" onclick="getID(this)" href="#" data-icon="home" >Home</a>
        </div>
    </div>

And here is my JS code:

var chickenNumber;
var watchGeo;
var latitude;
var longitude;
var today;
var time;
var dateTime;
var chickenNames = ["Foghorn", "Little", "Tweety", "Hawk", "Bertha"];
var foghorn_items = [];
var little_items = [];
var tweety_items = [];
var hawk_items = [];
var bertha_items= [];

function getID(theValue)
{
  chickenNumber = theValue.id;
  if (chickenNumber < 5)
  {
    $.mobile.changePage ("ChickenLogs.html#entry_page", { transition: "slide"});

  }
  else {
    $.mobile.changePage ("ChickenLogs.html#home_page", { transition: "slide", reverse: true});
  }

}

//Increment or decrement the chickenNumber page id if user clicks next or previous 
function traverse(event)
{
  if(event.id == "6")
  {
    if(chickenNumber == 4)
    {

      chickenNumber = 0;
      clearFields();
    }
    else
    {
      chickenNumber++;
      clearFields();
    }

  }
  else
  {
    if(chickenNumber == 0)
    {
      chickenNumber = 4;
      clearFields();
    }
    else
    {
      chickenNumber--;
      clearFields();
    }
  }
}

//Retrieve stored values from the phone for all the chicken breeds on app launch
$(document).ready(function()
{
  foghorn_items = JSON.parse( localStorage.foghorn_items || '[]');
  little_items = JSON.parse( localStorage.little_items || '[]');
  tweety_items = JSON.parse( localStorage.tweety_items || '[]');
  hawk_items = JSON.parse( localStorage.hawk_items || '[]');
  bertha_items = JSON.parse( localStorage.bertha_items || '[]');

});

//Initialise entry page for the first time and handle form submission validation
$(document).delegate("#entry_page","pageinit",function()
{

  if (navigator.geolocation)
  {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
  }

  $("#chickenNameHeader").text(chickenNames[chickenNumber]);

  $("#submitBtn").click(function(event)
  {
    var id = $.trim($("#ID_input").val());
    var weight = $.trim($("#weight_input").val());
    var eggs = $.trim($("#eggs_input").val());
    var grain = $.trim($("#grain_input").val());
    var category = $("#category_input").val();
    var error_free = 1;

    if(id == "")
    {
      alert("Please enter a 4 digit ID");
      error_free = 0;
    }

    if(weight == "")
    {
      alert("Please enter the amount of weight");
      error_free = 0;
    }

    if(eggs == "")
    {
      alert("Please enter the amount of eggs laid");
      error_free = 0;
    }

    if(grain == "")
    {
      alert("Please enter the amount of grain eaten");
      error_free = 0;
    }

    if(category == "empty")
    {
      alert("Please select a category");
      error_free = 0;
    }

    if(Number(id) < 1000 || Number(id) > 9999)
    {
      alert("ID must be 4 digits");
      error_free = 0;
    }

    if(Number(weight) < 0 || Number(weight) > 10000)
    {
      alert("Weight must be between 0. and 10000");
      error_free = 0;
    }

    if(Number(grain) < 0 || Number(grain) > 1000)
    {
      alert("Grains eaten must be between 0. and 1000");
      error_free = 0;
    }

    if(latitude == "" || longitude == "")
    {
      alert("Location not given. Please allow location access and refresh the application");
      error_free = 0;
    }

    if(dateTime == "")
    {
      alert("Date & Time not acquired");
      error_free = 0;
    }

    if(!Boolean(error_free))
    {
      alert("Error saving log");
      event.preventDefault();
    }
    else
    {
      var item = {
        id:id,
        dateTime:datTime,
        latitude:latitude,
        longitude:longitude,
        weight:weight,
        eggs:eggs,
        grain:grain,
        category:category };

        switch (chickenNumber) {
          case 0:
          foghorn_items.push(item);
          localStorage.foghorn_items = JSON.stringify(foghorn_items);
          break;
          case 1:
          little_items.push(item);
          localStorage.little_items = JSON.stringify(little_items);
          break;
          case 2:
          tweety_items.push(item);
          localStorage.tweety_items = JSON.stringify(tweety_items);
          break;
          case 3:
          hawk_items.push(item);
          localStorage.hawk_items = JSON.stringify(hawk_items);
          break;
          case 4:
          bertha_items.push(item);
          localStorage.bertha_items = JSON.stringify(bertha_items);
          break;
        }
      }
    });
  });


  //Get location and time values 
  function onSuccess(position)
  {
    latitude = position.coords.latitude;
    longitude = position.coords.longitude;
    alert(latitude);
    today = new Date();
    date = today.getDate()+'/'+(today.getMonth()+1)+'/'+today.getFullYear();
    time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
    dateTime = date+' '+time;
    alert(dateTime);

  }

  //Throw error if location access is not possible
  function onError(error) {
    var txt;
    switch(error.code)
    {
      case error.PERMISSION_DENIED:
      txt = 'Location permission denied';
      break;
      case error.POSITION_UNAVAILABLE:
      txt = 'Location position unavailable';
      break;
      case error.TIMEOUT:
      txt = 'Location position lookup timed out';
      break;
      default:
      txt = 'Unknown position.'
    }
    alert(txt)
  }

  //Handle entry page when it is showed again after the first time
  $(document).on("pageshow", "#entry_page", function()
  {
    $("#chickenNameHeader").text(chickenNames[chickenNumber]);
    clearFields();

  });

  //Clear inputs fields on the entry page
  function clearFields()
  {
    $("#ID_input").val("");
    $("#weight_input").val("");
    $("#eggs_input").val("");
    $("#grain_input").val("");
    $("#category_input").val('empty').change();

  }

I know I'm not supposed to add a lot of code, but I don't think it would be understandable if I didn't put all of my JS code.

Is there a way to call "pageshow" after the "traverse()" method is done executing? or is there something totally different I should do?

I even tried using $.mobile.changePage() in traverse() after updating the chickenNumber but that didn't work either.

Answer 1

I had a tubelight moment and figured it out.

All I had to do was use $("#chickenNameHeader").text(chickenNames[chickenNumber]); right after changing the chickennumber variable.