Route to page on sucessful ajax request using V2

Hello,

Am getting my head around using the new V2 and the app.request() in place of $,post() and $.ajax().

At the moment I can do successful ajax requests and parse the response but the following are still pending.

  1. Show and hide the Indicator during the Ajax request.
  2. Route the screen to index page if Ajax successful.
  3. Stop execution if successful ajax response code. I have noticed the the on error event is executed despite a success response.

This is my code in the template:

<script>
  return {
  
    methods: {
      signIn: function () {
        
		var $ = this.$;
        var app = this.$app;
        var router = this.$router;
        var username = $('input#username').val();
        var password = $('input#password').val();
		
		
		var postData = {"api_key" 			: 'A1234567',
						"mydata" : 
								{	
									"username" : username,
									"password" : password
								}
						};
						
		//Show Indicator
		app.preloader.show();
		
		app.request({
			url: 			'https://example.com/',
			method: 		'POST',
			dataType: 'json',
			crossDomain: 	true,
			data: 			postData, 
			success: function(data, textStatus ){

				// We have received response and can hide activity indicator
				app.preloader.hide();
				
				console.log('Success');

				console.log(data.STATUS_CODE);
				
				if (data.STATUS_CODE == 1) 
				{
					
					localStorage.setItem( 'my_data', JSON.stringify(data));
					
					resolve(
					{
						componentUrl: './pages/index.html',
					}
				}
				
				app.alert('Login was unsuccessful, please verify username and password and try again');
								
				return;
				
			},		
			error: function(xhr, textStatus, errorThrown){ 
				
				// We have received response and can hide activity indicator
				app.preloader.hide(); 
				
				console.log('Fail');
				console.log(xhr.response);
				
				app.alert('Login was unsuccessful, please verify username and password and try again');
				
				return;
				
			}		       
			
			//app.preloader.hide();
      }
    }
	
  }
</script>

Hey @davykiash

Check your server response, if dataType does not match the response of the server it will result in error.

To navigate to the home screen, or some, use.

app.router.navigate("/");

But you need router, check this.

The indicator not show?

app.preloader.show();
app.preloader.show();

Tell my if you question is solved

Regards

1 Like