We Keep Coding

iBooks Author/iAd Producer Widget User Text Disappears

I'm using iAd producer to create HTML widgets for iBooks I'm making using iBooks Author. I've done some research and learned that I can have user input saved into local storage by way of a variable that is called every time the widget is opened. This is great except for the new problem of having to create hundreds of text box widgets all with different variables so I can use these text boxes on multiple pages. Is there a way for me to automate this using Java Script? One idea I had was to use a "while" function to tell the script to ++ the variable if the one it tried to use was not empty. Example: the variable "001" was already used so the code would ideally set the next user text to variable "002". Preferably, I'd like to be able to create one widget with this code that I could reuse anywhere else.
Here is the code I'm currently using:
/*Widget code*/
this.onViewControllerViewWillAppear = function (event) {
var theValue = this.outlets.textField;
if (localStorage.getItem("theKey102") === null) {
theValue.value = "";
} else {
theValue.value = localStorage.getItem("theKey102");
}
};
/*This is the code for one of the text boxes I'm using */
this.onControlValueChange = function (event) {
var theValue = this.viewController.outlets.textField;
localStorage.setItem("theKey102", theValue.value);
};

Javascript coding help. Skipping a certain part of code

I'm trying to code a web application and I have encountered a slight issue.
In the top part of the code there is a moving item around the screen. I called that item to randomly move around the screen in the beginning of my code. But then when I click a button its suppose to stop. So what I did was I created a function for when it's clicked, and it captures the x,y,z into a local variable in the function. I then entered these fixed x,y,z values into the item so it remains stationary, but for some reason I think its being overwritten by the top code and still keeps on moving. Is there any way to skip a line of code in the top section of a code when a specific function is made to run?
Code I'm talking about
function motionUpdate()
{
xvalues= //huge code which is obtained from device sensors
yvalues= //huge code which is obtained from device sensors
zvalues= //huge code which is obtained from device sensors
//There are two objects that move id1 and id2. When clicking on button id2 should stop
ui.elememenTranslate(xvalues,yvalues,zvalues,"id1") //moves according to x,y,z location
ui.elememenTranslate(xvalues,yvalues,zvalues,"id2")
}
self.Click = function()
{
var localX = xvalues;
var localY = yvalues;
var localZ = yvalues;
ui.elememenTranslate(xvalues,yvalues,zvalues,"id2")
}

Use a global variable as a condition for the code to run. Example:
var run_code = true;
Then in the code:
function motionUpdate()
{
if(run_code) // if run_code is true, else skip this part
{
....
}
}
In other part of code under certain condition, set as required:
run_code = false;
Once set, above code will be skipped.

Expanding on Ashad Shanto's comment, you can use a flag to save if the button has been clicked.
// Save if the button was clicked
var id2IsStopped = false;
function motionUpdate(){
...
ui.elememenTranslate(xvalues,yvalues,zvalues,"id1") //moves according to x,y,z location
// Don't run translate if the button was clicked
if(!id2IsStopped){
ui.elememenTranslate(xvalues,yvalues,zvalues,"id2")
}
}
self.Click = function(){
...
ui.elememenTranslate(xvalues,yvalues,zvalues,"id2");
// Record that the button was clicked
id2IsStopped = true;
}
This will record the clicked button and stop running the translation on id2. However, if you want to toggle id2's movement, you just need to toggle the value of the flag:
// Previously: id2IsStopped = true;
id2IsStopped = !id2IsStopped;

Ionic Angular - Resetting scope variables

I have a flow of few pages/views starting from first page to last page. This is pretty much based on the Ionic tutorial.
I update a factory "Info" with some data as I proceed with the flow. In the final page, after displaying the "summary info" to the user, I use $state.go('firstPage') to navigate back to the first page.
When I make a different selection in the first page this time, it doesn't seem to take effect in the view.
I tried the suggestion from here but that didn't help me. I tried resetting the variables again, but that doesn't help either.
angular.module('my.services', [])
.factory("Info", function(){
// All user data
var infoData = {
type: "",
level: 0
};
var originalInfoData = angular.copy(infoData);
// Reset data
infoData.resetUserDetails = function() {
userData = angular.copy(originalInfoData);
};
Final Page Controller
$scope.finish = function() {
UseInfo.resetUserDetails();
$state.go('firstPage');
}
This takes me back to first page but even though I select something different this time, the pages seem to remember what I did in my first run.
The question is - how do I clear things up so the user can do something else after getting back to the first page without remembering previous selections.

Backbone router not triggering view change

I've been trying to solve a pretty irritating for the last couple of days now, and I'm finally admitting defeat, and appealing to SO.
First I'll give an overview of what I'm trying to do, then I'll give you specifics of where I'm running into issues.
The Goal:
A user is filling out a form, and if any element is changed on the form and the user tries to leave the form without saving the changes, a modal should display with the following message:
You have made changes to this record. Do you want to save the changes?
The user gets a Yes/No/Cancel option.
If the user selects:
Yes: The record should save, then navigate to the originally intended route.
No: The record should not save, and the user should be navigated to the intended route.
Cancel: The modal should close and the user will remain on the current page with no route change.
I am using the backbone.routefilter library to detect route changes before the route change happens.
The Problem:
To solve the problem, I put a route change listener within my initialize method in the view that contains the form. Below is that code:
// If the user tries go to a different section but the record has been changed, confirm the user action
app.circulationRouter.before = function( route, params ) {
app.fn.clearNotifications();
if(app.recordChanged){
var confirmView = new app.views.confirm({
header:"Patron Record Changed",
bodyText:"You have made changes to this record. Do you want to save the changes?",
trueLabel:"Yes",
falseLabel:"No",
cancelLabel:"Cancel",
hasTrue:true,
hasFalse:true,
hasCancel:true,
trueCallback:function(){
// Ignore the patron record change
_this.saveRecord();
// Render the patron section AFTER the save
_this.model.on({
'saved' : function(){
// Render the new seciton
app.circulationRouter.renderPatronSection(_this.model, params[1]);
app.currentPatronSection = params[1];
// Set the record changed to false
app.recordChanged = false;
// Remove the 'before' listener from the circulationRouter
app.circulationRouter.before = function(){};
if(con)console.log('in saved');
// Remove the listener
_this.model.off('saved');
},
'notsaved' : function(){
// Stay on the patron record page, keep the url at record
app.circulationRouter.navigate("patrons/"+_this.model.get('PatronID')+"/record",false);
_this.model.off('notsaved');
}
}, _this);
},
falseCallback:function(){
if(con)console.log(params);
if(params.length){
// Ignore the patron record change
app.circulationRouter.renderPatronSection(_this.model, params[1]);
app.currentPatronSection = params[1];
}else{
if(con)console.log('blah');
setTimeout(function(){
if(con)console.log('should navigate');
app.circulationRouter.navigate("", true);
}, 5000);
}
app.recordChanged = false;
app.circulationRouter.before = function(){};
},
cancelCallback:function(){
// Stay on the patron record page, keep the url at record
app.circulationRouter.navigate("patrons/"+_this.model.get('PatronID')+"/record",false);
}
});
app.el.append(confirmView.render().el);
return false;
}
};
Each of the three options has a callback that gets called within the initialize function that will control the outcome. The Cancel button always behaves correctly. The issue I'm running into is when the user wants to navigate to the home page, ie when this line is called: app.circulationRouter.navigate("", true);. Everything else works correctly if there is a new, defined route to navigate to.
Here is the sequence of events that creates the issue:
1) Modify a record
2) Try to navigate to the home page
3) Route is changed home page route, but record is still in view
4) Modal is automatically displayed with three options
5) Select the No button
6) falseCallback is triggered
7) Modal is closed and view remains on record page, but route displayed in browser is for home page
The expected behavior for #7 was to display the view for home page, but only the url reflects that.
You can see in the falseCallback I even tried delaying the trigger for the redirection to make sure it wasn't a DOM issue, but that didn't work.
Does anyone know what may be happening?

Here's the problem. Once the route is changed, if you re-navigate to the same route, even if you set the param {trigger:true}, the page won't reload. There is a long discussion about it here.
Based off of the discussion listed in github, I am using this solution and adding the refresh option. If the refresh option is set to true, then the view will reload, even if the url doesn't change. Otherwise, the functionality remains the same.
_.extend(Backbone.History.prototype, {
refresh: function() {
this.loadUrl(this.fragment);
}
});
var routeStripper = /^[#\/]/;
var origNavigate = Backbone.History.prototype.navigate;
Backbone.History.prototype.navigate = function (fragment, options) {
var frag = (fragment || '').replace(routeStripper, '');
if (this.fragment == frag && options.refresh)
this.refresh();
else
origNavigate.call(this, fragment, options);
};

understanding javascript events and timing to fix dynamic email bug

This is a bit hard to explain. I have a search results page with hundred of hospital and physician listings. Each record is loaded into a javascript array when the page loads, so all records are accessible without a page reload. A user may also click a "Details" page which shows detailed information for each individual hospital or physician. This, too, is dynamic and doesn't require a page reload.
Here's where my issue comes in.
On each details page, the user has the ability to Share (email) the hospital/physician information. My issue is that if a user attempts to share multiple hospital/physician listings one after the other, the mailto link seems to open every single email instance that the user has previously opened.
Clicking Share on Hospital A opens an email window for Hospital A. Closing this Share window, then clicking Share for Hospital C opens 2 windows - Hospital A and Hospital C - as if an array is being stored of all successive Shares. Confusing, yes, I know :-)
Let me break down the code a bit. The Details page is handled by a function showDetails(id). The id parameter is the record whose details are being shown, and in this Details page lies the Share button. Here's an overview of the function (very condensed):
function showDetails(id) {
// make visual transitions to details page //
rec = new Array();
// get this record (rec)
for( var i = 0; i < results.length; i++){
if (results[i]['row_id'] == id){
rec = results[i];
break;
}
}
// set record variables
var longName = rec['longName'];
var city = rec['city'];
var state = rec['state'];
...
// output variables into lovely html //
// handle Share button. I think this is where my issue is
$(document).ready(function(){
$("a[rel='email']").each(function(){
// Modify the mailto: value
var mailtoVal = $(this).attr('href');
var body_message = '';
body_message += longName+"%0D%0A%0D%0A ";
body_message += address.replace("<br>","%0D%0A") +"%0D%0A ";
body_message += city+", "+state+" "+zipCode+"%0D%0A ";
body_message += phoneFormat(phone)+"%0D%0A %0D%0A ";
body_message += emailAddress+"%0D%0A ";
body_message += shortURL+"%0D%0A ";
mailtoVal = 'mailto:name#domain.com?subject=Provider Information&body='+body_message;
$(this).click(function(){
window.location.href = mailtoVal;
return false;
});
});
});
}
And down below, this code is my actual link:
<a class="button" href="#" rel="email">Share</a>
Like I said before, this works fine when I click the Share button for my first record when the page loads. If I open another, both my first and second Share open.
When I debug, I can see mailtoVal is never set to the appropriate value. It's almost as if it's storing each successive Share as an array somewhere and looping through each of them when clicking Share.
My gut feeling tells me there's something I'll need to do with setTimeout or some sort of asynchronous coding, but I'm a bit hazy on best ways to go about doing those.
Would it be best to create another function outside of showDetails() to handle the Share? I've put off doing this, because I would need to receive the ID as a parameter and retrieve the results for the ID... again.
Please Note - the bulk of this code was not written by me. I've been assigned to this project fairly late in its dev cycle, and now I'm simply trying to debug it.
I know this is a bit confusing, so please let me know if there is any additional info needed.

You have to disable previous click handlers before you bind another one:
$("a[rel='email']")
.off('click')
.each(...)
Without the .off() the event handlers keep getting added to your Share link, causing what you were experiencing.
Additionally, you can remove the $(document).ready(function() { ... } inside the showDetails() function. It's not necessary there; just make sure showDetails() is not called before the page is fully loaded.