The button "logIn " don't fire my method

I tried to make a login screen the user enter his username & pass , and posting the entered data to my server .

but when the button " Login " is pressed nothing done . I want to know what i missed .

here the code in JS

 <JavaScript>
       var Observable=require"FuseJS/Observable"

       var status=0;
       var response_ok=false;

       var username.value=Observable("");
       var password.value=Obserable("");

      function loginPostData() {
        var myVar={
          "users":{
            "username":username,
            "password":password
          }
        };
        fetch('http://osamaarafa96.esy.es/login.php', {
   method: 'POST',
   headers: { "Content-type": "application/json"},
   body: JSON.stringify(myVar)
}).then(function(response) {
   status = response.status;  // Get the HTTP status code
   response_ok = response.ok; // Is response.status in the 200-range?
   console.log("Response: " + JSON.stringify(response));
   return response.json();    // This returns a promise
}).then(function(responseObject) {
   // Do something with the result
   console.log('the API said: ' + JSON.stringify(responseObject));
}).catch(function(err) {
   // An error occured parsing Json
   console.log('Error : the API said: ' + JSON.stringify(responseObject));
});
      }

      module.exports = {
             loginPostData:loginPostData
        }


     </JavaScript>

and UX

<MyPage ux:Name="logpage" ux:AutoBind="false">

          <Image File="Assets/Car2.jpg" Layer="Background" StretchMode="UniformToFill" StretchDirection="Both"/>  
            <Grid Rows="1*,1*">
                <StackPanel Alignment="VerticalCenter">
                    <Text Alignment="HorizontalCenter" FontSize="33"> Car Care Application</Text>
                    <Text Alignment="HorizontalCenter" FontSize="10"> Welcome Sire Your car with the safely Hand</Text>
            </StackPanel>
            <StackPanel Alignment="VerticalCenter">
              <!-- User name input -->
                <TextInput PlaceholderText="user name" Value="{username}" Padding="10"/>
              <!-- Password input --> 
                <TextInput PlaceholderText="password" Value="{password}" IsPassword="true" Padding="10" />
                <!-- log in Button  -->
                <Button Text="LogIn" IsEnabled="{vis}" Padding="10"  >
                  <Clicked Handler="{loginPostData}" />
                </Button>
                <Switch />
                <Text Alignment="HorizontalCenter" FontSize="10">Remmber me</Text>
                <Button Text="Go Back" Width="1" Height="1" IsEnabled="{vis}" Padding="10">
                <Clicked>
                    <GoBack />
                </Clicked>
            </Button>

            </StackPanel>
        </Grid>
    </MyPage>

Hi,

Where is this JavaScript tag in relation to the rest of the code?

Hi,

It’s exist in the MainView.ux file .

Thanks .

Here : https://www.dropbox.com/s/6jyhooxhg0ti5ew/Project20%2B6%2B2016.rar?dl=0

you could find the all project .

You have typos in your javascript: require"FuseJS/Observable" should be require("FuseJS/Observable"); and there’s a missing “v” in Obserable(""); a few lines below.

Fixing those two gave me the expected HTTP response when logging in.

Also, I strongly recommend that you migrate your project to the latest version of Fuse

Hi,

I fixed my code , and installed the latest version 0.21. but i have the same problem

clicked don’t work .

Then I recommend that you try to create a minimal test case which reprodues the issue with as little code as possible, to make it easier to debug.

Also:

  • What platform(s) are you testing on
  • And which exact behavior are you expecting when you click on the button? (As mentioned I got an HTTP response)