Binding working in browser, but not on emulator and device


#1

I am building an Ionic app. When I run the following template in the Chrome browser on my computer, it works fine (the {{formData.username}} binds and shows up when the user starts typing in the textbox. I’m also seeing ‘signup’ being printed to the console in the browser, so it seems to be using the right controller.

However, when I run it in the iOS emulator and on an iPhone, the {{formData.username}} shows up statically and doesn’t bind.

Any idea what is happening? Why is it working in the browser but not emulator and iPhone?

controllers.js

.controller('SignupCtrl', function($scope, $ionicLoading, $state, $stateParams){
	console.log('signup');

	Parse.initialize("xyz", "xyz");

	$scope.formData = {};

	//Go to the guessing page
	$scope.signUp = function(item,event){
		console.log($scope.formData.email);

		var user = new Parse.User();
		user.set("username", $scope.formData.username);
		user.set("password", $scope.formData.password);
		user.set("email", $scope.formData.email);
		 
		user.signUp(null, {
		  success: function(user) {
		    // Hooray! Let them use the app now.
		    console.log('sign up worked!');
		    $state.go('dashboard');
		  },
		  error: function(user, error) {
		    // Show the error message somewhere and let the user try again.
		    alert("Error: " + error.code + " " + error.message);
		  }
		});
	};

	$scope.backToFirstRun = function(item,event){
		$state.go('firstrun');
		console.log('back button tapped');
	};



});

template

<!-- Header -->
<div class="bar bar-header bar-light">
  
  <button on-touch="backToFirstRun()" class="button icon-left ion-chevron-left button-clear button-dark">
    Back
  </button>

  <h1 class="title">Signup</h1>
</div>

<!-- Space between header and signup form -->
<div class="spacer" style="width: 300px; height: 50px;"></div>


<div class="list list-inset">
    
    <!-- Signup form text fields -->
  <form>
    
    <label class="item item-input">
      <span class="input-label">Email</span>
      <input type="email" ng-model = "formData.email">
    </label>

    

    <label class="item item-input">
    <span class="input-label">Username</span>
    <input type="text" ng-model = "formData.username">
    </label>

    <label class="item item-input">
    <span class="input-label">Password</span>
    <input type="password" ng-model = "formData.password">
    </label>

    <!-- Submit button for signup form -->
    <button on-touch="signUp()" class="button button-positive button-block">
      Sign up
    </button>

  </form>
</div>

{{formData.email}} <br>
  {{formData.username}} <br>
    {{formData.password}}

#2

Is it binding anything at all, like when the user clicks the sign up button, does the console.log log the email the user input?


#3

Do you get any error messages in the terminal when running emulation? Various aspects of my app can fail to work when e.g. a plugin failed to load. Sometimes this process goes a bit differently from the browser.

Beyond that though, do you define a controller to be used on that particular page anywhere? Try setting a generic ng-controller. Don’t think it should be necessary but still. Another thing to consider is that it used to be the case that binding wouldn’t happen for form inputs that aren’t valid. Don’t think it should matter in your case, but keep that in mind, too.

Anyway, check for error messages. If you’re not getting them, consider trying the phonegap developer app, it pushes back messages to the console including your own console.log stuff. Might help you debug this thing.


#4

Thanks for replying and sorry for the delay!

When I run the app on a device:
When the page loads, ‘signup’ appears in the console
When I tap the submit button after an email is entered in the email field, the email does not get returned to the console. Instead I see Resetting plugins due to page load and then ‘signup’ gets returned to the console again.

Full details:

2014-12-03 21:54:48.897 sliding[11195:3115262] Apache Cordova native platform version 3.7.0 is starting.
2014-12-03 21:54:48.898 sliding[11195:3115262] Multi-tasking -> Device: YES, App: YES
2014-12-03 21:54:48.902 sliding[11195:3115262] Unlimited access to network resources
2014-12-03 21:54:48.990 sliding[11195:3115262] [CDVTimer][keyboard] 0.162959ms
2014-12-03 21:54:48.990 sliding[11195:3115262] [CDVTimer][TotalPluginStartup] 0.477016ms
2014-12-03 21:54:49.246 sliding[11195:3115262] Resetting plugins due to page load.
2014-12-03 21:54:49.779 sliding[11195:3115262] Finished load of: file:///private/var/mobile/Containers/Bundle/Application/208E1472-1067-4F78-A714-0F3B82C867A8/sliding.app/www/index.html#/firstrun
2014-12-03 21:54:54.337 sliding[11195:3115262] signup

When I tap the button:

2014-12-03 21:54:58.559 sliding[11195:3115262] Resetting plugins due to page load.
2014-12-03 21:54:58.704 sliding[11195:3115262] Finished load of: file:///private/var/mobile/Containers/Bundle/Application/208E1472-1067-4F78-A714-0F3B82C867A8/sliding.app/www/index.html?#/signup
2014-12-03 21:54:58.745 sliding[11195:3115262] signup

#5

Hi abbarra-- I am getting some messages in the console. Particularly when I tap the button, I see:

2014-12-03 21:54:58.559 sliding[11195:3115262] Resetting plugins due to page load.
2014-12-03 21:54:58.704 sliding[11195:3115262] Finished load of: file:///private/var/mobile/Containers/Bundle/Application/208E1472-1067-4F78-A714-0F3B82C867A8/sliding.app/www/index.html?#/signup
2014-12-03 21:54:58.745 sliding[11195:3115262] signup

I’ve also put the full list of what gets returned earlier in the thread. You mentioned that the form inputs can be invalid…what does that mean and how do I know figure out if I’m doing this?


#6

So I did a test on another page where I removed the line that initializes Parse:

Parse.initialize("xyz", "xyz");

When I removed it, the texbox binds and I’m seeing the content of the textbox as I type. When I add it, it doesn’t work anymore and I just see {{test}} (the textbox has ng-model = “test”).

This is what made it work:
In my index.html file I had

<script src="//www.parsecdn.com/js/parse-1.3.2.min.js"></script>

Apparently if I add an http: to the beginning of that, it started working!

<script src="http://www.parsecdn.com/js/parse-1.3.2.min.js"></script>

Anyone know why this is?


#7

//www.parsecdn.com/js/parse-1.3.2.min.js

is not a correct path to a file. Try it in your browser! It tries to load it but can’t, and then when you run the Parse.initialize function it tries to run a function that doesn’t exist, which causes various problems later on apparently.

Either www. or http://www. Nice work on figuring it out!