I want to make a select search box. When click on input the dropdown opens and can type on input and filter it in dropdown.
I used Input as a dropdown button. But seems dropdown makes it read-only.
var app = new Vue({
el: '#app',
data() {
return {
form: {
email: ''
}
}
}
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
<template #button-content>
<b-form-group
id="input-group-1"
label="Email address:"
label-for="input-1"
description="We'll never share your email with anyone else."
>
<b-form-input
id="input-1"
v-model="form.email"
type="email"
placeholder="Enter email"
required
></b-form-input>
</b-form-group>
</template>
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item active>Active action</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
</div>
You can try using the #click.stop on input event and setting the input focus.
var app = new Vue({
el: '#app',
data() {
return {
form: {
email: ''
}
}
},
methods: {
inputFocus() {
this.$refs.emailInput.focus()
}
}
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-dropdown id="dropdown-1" text="Dropdown Button" class="m-md-2">
<template #button-content>
<b-form-group
id="input-group-1"
label="Email address:"
label-for="input-1"
description="We'll never share your email with anyone else."
>
<b-form-input
id="input-1"
v-model="form.email"
type="email"
placeholder="Enter email"
required
#click.stop="inputFocus"
ref="emailInput"
></b-form-input>
</b-form-group>
</template>
<b-dropdown-item>First Action</b-dropdown-item>
<b-dropdown-item>Second Action</b-dropdown-item>
<b-dropdown-item>Third Action</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item active>Active action</b-dropdown-item>
<b-dropdown-item disabled>Disabled action</b-dropdown-item>
</b-dropdown>
</div>
Related
i need to do a multiply calculation based on user input. so user have to input a value in Input A and Input B, then the Input C will automatically calculated those multiplication between input A and B. does anyone have any idea on how to do that in sapui5?
i tried to do a calculation using a formatter for value input C but it seems didnt work. after i enter the Input B, there's no value in Input C
<Label text= "Rate"/>
<Input id ="Project Rate" value=""/>
<Label text="Discount"/>
<Input type="Number" id="inputB"/>
<Label text="Total Rate"/>
<Input id="inputC" enabled="false"
value="{parts:[
{path: '/ProjectRate'},
{path: '/Discount'},
{path: '/TotalRate'}],
formatter: 'calcProjectRate'}"/>
calcProjectRate: function(ProjectRate, Discount, TotalRate) {
if (ProjectRate && Discount) {
TotalRate = ProjectRate * Discount / 100;
return TotalRate;
}
return "0";
Your code has error, you need to check your IDE code check result.
id values cannot include space, for example "Project Rate"
Working example below (may be it is not best solution).
sap.ui.getCore().attachInit(function() {
"use strict";
sap.ui.controller("MyController", {
onInit: function() {
}
});
sap.ui.xmlview({
viewContent: jQuery("#myView").html()
}).placeAt("content");
});
calcProjectRate = function() {
ProjectRate = this.oView.byId("ProjectRate").getValue();
Discount = this.oView.byId("inputB").getValue();
TotalRate = 0;
if (ProjectRate && Discount) {
TotalRate = ProjectRate * Discount / 100;
}
this.oView.byId("inputC").setValue(TotalRate);
}
<!DOCTYPE html>
<title>SAPUI5</title>
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-preload="async"></script>
<script id="myView" type="ui5/xmlview">
<mvc:View controllerName="MyController" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:layout="sap.ui.commons.layout">
<layout:MatrixLayout>
<layout:rows>
<layout:MatrixLayoutRow>
<layout:MatrixLayoutCell backgroundDesign="Fill1" padding="None">
<Input id="ProjectRate" value="" liveChange="calcProjectRate" />
<Label text="Discount" />
<Input type="Number" id="inputB" />
<Label text="Total Rate" />
<Input id="inputC" enabled="false" />
</layout:MatrixLayoutCell>
</layout:MatrixLayoutRow>
</layout:rows>
</layout:MatrixLayout>
</mvc:View>
</script>
<body class="sapUiBody">
<div id="content"></div>
</body>
I have a google app engine and I recently decided to add app engine to it. I have gone through the steps, have imported my google project into firebase, added all the initialization code, and some temp functions for logging in and signing up. However, the app never goes past the points where I try to log in. I have been searching everywhere and trying everything I can. I'm sure I'm just missing something small, but could use another set of eyes. Thanks.
Here is my html file:
<!DOCTYPE html>
<html>
<head>
<title>Hello Endpoints!</title>
<script type="text/javascript" src="/js/base.js"></script>
<!-- SCRIPT FOR FIREBASE -->
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase-database.js"></script>
<script type="text/javascript" src="/js/firebaseApp.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link type="text/css" rel="stylesheet" href="/bootstrap/css/bootstrap.css">
<link type="text/css" rel="stylesheet" href="/bootstrap/css/bootstrap-responsive.css">
<link type="text/css" rel="stylesheet" href="/css/style.css">
</head>
<body>
<div class="container">
<input id="txtEmail" type="email" placeholder="Email">
<input id="txtPassword" type="password" placeholder="Password">
<button id="btnLogin" class="btn btn-action" onclick="loginEvent()">
Log in
</button>
<button id="btnSignUp" class="btn btn-secondary" onclick="signupEvent()">
Sign Up
</button>
<button id="btnLogout" class="btn btn-action hide">
Log out
</button>
<script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "<API_KEY>",
authDomain: "<PROJECT_ID>.firebaseapp.com",
databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
projectId: "<PROJECT_ID>",
storageBucket: "<BUCKET>.appspot.com",
messagingSenderId: "<SENDER_ID>",
};
firebase.initializeApp(config);
</script>
</div>
<div class="container">
<form action="javascript:void(0);">
<h2>Add Asteroid</h2>
<div><span class="label">Name: </span><input id="asteroidName" /></div>
<div><span class="label">Diameter: </span><input id="asteroidDiam" /></div>
<div>Dimensions:</div>
<div><span class="dimlabel">Length: </span><input id="asteroidLength" /></div>
<div><span class="dimlabel">Width: </span><input id="asteroidWidth" /></div>
<div><span class="dimlabel">Height: </span><input id="asteroidHeight" /></div>
<div><span class="label">Mean Distance From Sun: </span><input id="asteroidDist" /></div>
<div><input id="addAsteroid" type="submit" class="btn btn-small" value="Submit"></div>
</form>
<form action="javascript:void(0);">
<h2>Refresh Asteroids</h2>
<div><input id="listAsteroids" type="submit" class="btn btn-small" value="Refresh"></div>
</form>
<table id="AsteroidTable">
<tr>
<th>Asteroid</th>
<th>Diameter</th>
<th>Dimensions</th>
<th>Mean Distance From Sun</th>
</tr>
</table>
<script type="text/javascript">
function init() {
google.devrel.samples.hello.init('//' + window.location.host + '/_ah/api');
}
</script>
<script src="https://apis.google.com/js/client.js?onload=init"></script>
</div>
</body>
</html>
And here is my FirebaseApp.js:
function loginEvent()
{
const email = document.getElementById('txtEmail');
const pass = document.getElementById('txtPassword');
email.value = "HELLO";
email.value = firebase.app().name;
pass.value = "NO";
firebase.auth().signInWithEmailAndPassword(email, pass)
.catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
if (errorCode === 'auth/wrong-password') {
alert('Wrong password.');
} else {
alert(errorMessage);
}
console.log(error);
});
pass.value = "YES"
}
function signupEvent()
{
const email = document.getElementById('txtEmail');
const pass = document.getElementById('txtPassword');
firebase.auth().createUserWithEmailAndPassword(email, pass).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// ...
});
}
I was changing the values of the email and password just to make sure I was reaching that point. printing out the value of firebase.app().name returns [DEFAULT]. I also made sure email/password option was selected in Firebase. Thank you for any help you can provide.
You only need to include https://www.gstatic.com/firebasejs/4.3.1/firebase.js which contains all the modules needed. No need to include all the others: firebase-app.js, firebase-auth.js, etc.
Also signInWithEmailAndPassword and createUserWithEmailAndPassword accept string arguments. You are passing input elements instead. There should errors thrown in the console because of this. So instead of email, pass email.value.
I've created a simple "helloworld" web component, in that I put a "button" tag and I want that button to be clicked by triggering it but i'm unable to trigger it. What am I doing wrong?
Here is my code for "Index.html" file in which i've called my Own component and values for my button:
<!doctype html>
<html>
<head>
<title>First Polymer component</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<script src="bower_components/lib/jquery-1.11.2.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap_theme/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="bootstrap_theme/css/bootstrap-theme.css" />
<script src="bootstrap_theme/js/bootstrap.js"></script>
<link rel="import" href="hello-world.html">
<script>
var button_data = [{
"name": "litrary vocabulary",
"span_id": "mostbasic",
"description": "This is a sample description about litrary vocabulary"
}, {
"name": "no contractions",
"description": "This is a sample description about no contractions"
}];
window.addEventListener('WebComponentsReady', function(e) {
var element = document.querySelector('hello-world');
element.buttonsdata = button_data;
});
</script>
</head>
<body>
<hello-world> </hello-world>
<script>
$('.answerButtons').trigger("click");
function k12() {
window.open("http://www.w3schools.com");
}
</script>
</body>
</html>
And the 2nd file contain code for my web component:
<link rel="import" href="bower_components/polymer/polymer.html">
<dom-module id="hello-world">
<style>
p {
color: red;
}
</style>
<template>
<template is="dom-repeat" items="{{buttonsdata}}" as="button_data">
<button type="button" class="btn btn-info answerButtons" onclick = "k12()">{{_getButtonName(button_data)}} </button>
</template>
<p>This is my first own component </p>
<p>This is my first ....... </p>
<p>Kumaran is IDIOT </p>
</template>
<script>
Polymer({
is: 'hello-world',
_getButtonName: function(buttondata) {
return buttondata.name;
}
});
</script>
</dom-module>
button_data should be a property in hello-world
onclick should be on-click for Polymer binding https://www.polymer-project.org/1.0/docs/devguide/events.html
I'm new to Ionic framework and am struggling to post data from HTML to PHP.
1.index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">HTML</h1>
</ion-header-bar>
<ion-view title="Signup">
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
<div class="list list-inset">
<label class="item item-input">
<input class="form-control" type="text" ng-model="userdata.username" placeholder="Enter Username">
</label>
<label class="item item-input">
<input type="text" ng-model="userdata.email" placeholder="Enter Your Email">
</label>
<label class="item item-input">
<input class="form-control" type="password" ng-model="userdata.password" placeholder="Enter Your Password">
</label>
<button class="button button-block button-positive button-dark" ng-click="signUp(userdata)">SignUp</button><br>
<span>{{responseMessage}}</span>
</div>
</ion-content>
</ion-view>
</ion-pane>
</body>
</html>
app.js:
.controller('SignupCtrl', function($scope, $http) {
$scope.signup = function () {
var request = $http({
method: "post",
url: "http://myurl.com/signup.php",
crossDomain : true,
data: {
email: $scope.email,
password: $scope.password,
username: $scope.username
},
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
});
/* Successful HTTP post request or not */
request.success(function(data) {
if(data == "1"){
$scope.responseMessage = "Successfully Created Account";
}
if(data == "2"){
$scope.responseMessage = "Create Account failed";
}
else if(data == "0") {
$scope.responseMessage = "Email Already Exist"
}
});
}
})
3.PHP file:
<?php
header("Content-Type: application/json; charset=UTF-8");
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
$postdata = file_get_contents("php://input");
$request = json_decode($postdata);
$email = $postdata->email;
$password = $postdata->password;
$username = $postdata->username;
$con = mysql_connect("localhost","username",'password') or die ("Could not connect: " . mysql_error());;
mysql_select_db('dbname', $con);
$qry_em = 'select count(*) as cnt from users where email ="' . $email . '"';
$qry_res = mysql_query($qry_em);
$res = mysql_fetch_assoc($qry_res);
if($res['cnt']==0){
$qry = 'INSERT INTO users (name,pass,email) values ("' . $username . '","' . $password . '","' . $email . '")';
$qry_res = mysql_query($qry);
if ($qry_res) {
echo "1";
} else {
echo "2";;
}
}
else
{
echo "0";
}
?>
edit: I wrote a detailed post on how to post data from Ionic to PHP and you can view it here.
In the index.html file you have:
ng-click="signUp(userdata)
but then in the app.js file you have this:
$scope.signup = function () {
instead of something like:
$scope.signup = function (userdata) {
If you would go this route then your data should look like this:
data: {
email: userdata.email,
password: userdata.password,
username: userdata.username
}
However, you don't have to do it like this! You can do it like so that you remove the userdata from ng-click="signUp(userdata) and then in the app.js file in the data part you do it like this:
data: {
email: $scope.userdata.email,
password: $scope.userdata.password,
username: $scope.userdata.username
}
I have the following problem.
If I put he JavaScript code into the head or body tag, I need to click twice the submit button and then the Ajax form or whatever I need to do it does correctly, but I need to click twice.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>XXXX</title>
<!--Este es el JS que hace que funcione Phonegap-->
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
<!--JS específicos de Jquery Mobile-->
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<!--Estos son script creados para la aplicacion-->
<script src="js/md5.js"></script>
<script src="js/login.js"></script>
<!--CSS del tema que he creado para apotecalia-->
<link rel="stylesheet" href="themes/XXXX.css" />
<link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="css/jquery.mobile.structure-1.4.2.min.css" />
</head>
<div id="login">
<div data-role="header" data-position="fixed">
</div>
<div data-role="content">
<form id="check-user" data-ajax="false">
<fieldset>
<div data-role="fieldcontain">
<label> Usuario </label>
<input type="text" id="correo" name="correo">
</div>
<div data-role="fieldcontain">
<label> Contraseña </label>
<input type="password" id="pwd" name="pwd" >
</div>
<input type="submit" data-role="button" value="Acceder" name="enviar" id="enviar">
</fieldset>
</form>
</div>
<div data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
Login.js
$(function () {
$('#enviar').click( function() {
if($('#correo').val().length > 0 && $('#pwd').val().length > 0){
alert($('#correo').val() + $('#pwd').val());
}
});
});
But if I put the script code into the tag page where I need to use it, I don't need to click twice, but I cannot get the data form to do my Ajax request.
The same code, but if I put the script code into data-role="page" I have to put this code into all the tags... The alert in this case is empty.
<div id="login">
<script src="js/login.js"></script>
<div data-role="header" data-position="fixed">
</div>
<div data-role="content">
Please I don't know how to do it, I tried two weeks fixing this, I need your help.
Add simple type="button" instead of type="submit" .
<input type="button" data-role="button" value="Acceder" name="enviar" id="enviar">
$(function () {
$('#enviar').click( function() {
if($('#correo').val().length > 0 && $('#pwd').val().length > 0){
alert($('#correo').val() + $('#pwd').val());
// Add code here submit form data using Ajax
var ajax_call = your_serviceURL;
var str = $('#check-user').serialize();
$.ajax({
type: "POST",
url: ajax_call,
data: str,
dataType: "json",
success: function(response){
// It's success json response
}
}).done(function() {
})
}
});
});
Include your script in the head tag.
Declare your page container <div data-role="page" id="login">.
Change your code in login.js to:
$(document).on("pageinit", "#login", function(event, ui)
{
$(document).on("click", "#enviar", function(event)
{
if ($('#correo').val().length > 0 && $('#pwd').val().length > 0)
alert($('#correo').val() + $('#pwd').val());
});
});