Hi this is my first question on stackoverflow :)
trying to get coldfusion working with javascript.
I'm trying to pull out data off a database and show it in my page.
but i realized js is a client side language and cf being serverside.
I can't just run cfquery inside a function so i have two files
one is my index.html
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>
</head>
<body class="jumbotron">
<div class="container text-center " >
<div class="row">
<img class="col-sm-4 col-sm-offset-4" src="emp.jpg"/>
</div>
<div class="row" style="margin-top:20px" >
<div class="col-sm-6 col-sm-offset-3">
<div id="imaginary_container">
<div class="input-group stylish-input-group">
<input type="text" class="form-control" id="searchBar" name="searchBar" placeholder="Search" >
<span class="input-group-addon">
<button onclick="search(global,$http)">
<span class="glyphicon glyphicon-search"></span>
</button>
</span>
</div>
</div>
</div>
</div>
</div>
<script>
function search($scope, $http) {
var searchQ = document.getElementById('searchBar').value;
$http.get('/grid.cfc?method=getContact&returnformat=json').
success(function (response) {
$scope.todos = data.DATA;
}).
error(function (data) {
$scope.todos = data;
});
};
</script>
</body>
</html>
and one is my grid.cfc
<cfcomponent>
<cffunction name="getContact" access="remote" >
<cfargument name="firstName" default="">
<cfargument name="lastName" default="">
<cfquery name="searchQry" datasource="MehrabanDSource">
SELECT
*
FROM Contacts
WHERE FirstName=fname;
</cfquery>
<cfreturn searchQry>
</cffunction>
</cfcomponent>
can you help me make sense of my code, i don't really know if im on the right track or how can i pass in a variable to my grid.cfm so it knows what first name to look for. THANKS A LOT in ADVANCE :)
thank you Dan, thank you Leigh :) i used :
<cfajaxproxy cfc="functions" jsclassname="ajax_proxy" />
<cfajaximport>
<script>
function send_ajax(searchBar) {
var instance = new ajax_proxy();
instance.setCallbackHandler(return_ajax);
instance.functionality(searchBar);
}
function return_ajax(result) {
document.getElementById('output').innerHTML = result;
}
</script>
Related
I have created a login page that allows you to log in using username and password. However, it is currently so that you are always redirected to the "profile" page and there is then checked by PHP whether the login data are correct, because the data are on the DB.
Therefore I have the idea with a validate function directly on the loginpage to check if the data is correct and then I just create a session.
Does anyone have an idea how I can do this?
Here is the code:
<?php session_start();?>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Login</title>
<link href="bootstrap_style.css" rel="stylesheet" id="bootstrap-css"> <!-- maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <!-- //maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js or bootstrap.js-->
<script src="jquery.js"></script> <!-- //cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper fadeInDown">
<div id="formContent">
<!-- Tabs Titles -->
<!-- Icon -->
<div class="fadeIn first">
<img src="default_logo2.png" id="icon" alt="User Icon" onclick="window.open('url', '_blank');"/>
</div>
<!-- Login Form -->
<form action="searchpage.php" method="post" onsubmit="validateForm(event);">
<input type="text" id="login" class="fadeIn second" name="username" placeholder="username">
<input type="password" id="password" class="fadeIn third" name="password" placeholder="password">
<input type="submit" class="fadeIn fourth" value="Log In">
</form>
<!-- Remind Passowrd -->
<div id="formFooter">
<a class="underlineHover" style="color:red" id="warning"></a>
</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
function validateForm(event) {
var input_username = document.getElementById("login");
var input_password = document.getElementById("password");
if (input_username.value == '' || input_username.value.charAt(0) == ' ' || input_password.value == '') {
event.preventDefault();
document.getElementById("warning").innerHTML = "Fill empty fields!";
}
else {
return true;
}
}
</script>
with this I reach the DB:
$pdo = new PDO('mysql:host=localhost;dbname=ausleihe', 'root', '');
and that is the SELECT:
$login_session = "SELECT * FROM login WHERE username = '".$hereshouldbetheusernamefromform."' AND password = '".herethepasswordfromform."'";
If you need more code or have questions, ask me!
Thx
Client-side JavaScript cannot directly access a Host-side PHP program except through AJAX calls. Only the Host-side software has access to Host-side databases.
I've got this form with bootstrap but I can't find why it's not working properly ant I've no idea why.
HEAD>>
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<link href="css/bootstrap-theme.css" rel="stylesheet" type="text/css"/>
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"/>
<link href="css/corrections.css" rel="stylesheet" type="text/css"/>
<script src="js/JQuery-2.1.1-min.js" type="text/javascript"></script>
<title></title>
</head>
<body>
--> code here
</body>
HTML >>
<div class="col-lg-4">
<form class="form-inline well">
<div class="form-group">
<label class="sr-only" for="text">Some label</label>
<input id="text" type="text" class="form-control" placeholder="Text here">
</div>
<button type="submit" class="btn btn-primary pull-right">Ok</button>
<div class="alert alert-danger" style="display:none">
<h4>Error</h4>
Required amount of letters is 4
</div>
<div class="success alert-success" style="display:none">
<h4>Success</h4>
You have the required amount of letters
</div>
</form>
</div>
JS >>
<script>
$(function () {
$("form").on("submit", function () {
if ($("input").val().length < 4) {
$("div.form-group").addClass("has-error");
$("div.alert").show("slow").delay(4000).hide("slow");
return;
} else if ($("input").val().length > 3) {
$("div.form-group").addClass("has-success");
$("div.success").show("slow").delay(4000).hide("slow");
return;
}
});
});
</script>
the alert class shows everytime, any idea why?
The use of $("input") here is unusual. That selector will pull back all elements on the page that are <input>s, which is almost certainly not what you mean. (If there are other inputs on the page, you might get exactly what you're describing.) Use a more precise selector, like $("#text"), and maybe use debug to output the value of val().length so you know what you're evaluating.
(On a side note, "text" is not a very useful name for a text input, and your else-if seems redundant, but they probably aren't causing problems in your code.)
I'm extremely new to Ionic/Angular (Started today itself out of necessity),
Taking help of tutorials as well as documentations,
I had been creating a demo/test app that submits data to Parse.com MBaaS service.
But something somewhere is going wrong, clueless on how to go add the three form fields
Details: the App name is TestApp
Class/Table name is data
there are three columns, fname, lname and uname (for firstname lastname and username)
Here's the code I've been following. Any help would be deeply obliged.
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>
<!-- 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">
<div>
<div>
<ion-nav-bar class="bar-stable">
<ion-nav-back-button class="button-icon icon ion-ios7-arrow-back">Back</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</div>
</div>
<!-- Center content -->
<ion-view title="Add Data">
<ion-content padding="true" scroll="false" class="has-header">
<div class="spacer" style="height: 100px;"></div>
<form ng-controller="defaultCtrl">
<ion-list>
<label class="item item-input">
<span class="input-label">First Name</span>
<input type="text" placeholder="First Name here" name="fname" ng-model="starter.fname">
</label>
<label class="item item-input">
<span class="input-label">Last Name</span>
<input type="text" placeholder="Surname Here" name="lname" ng-model="starter.lname">
</label>
<label class="item item-input">
<span class="input-label">Username</span>
<input type="text" placeholder="Username here" name="uname" ng-model="starter.uname">
</label>
</ion-list>
<button class="button button-calm button-block" type='submit' ng-click="create(starter)">Add data</button>
</form>
</ion-content>
</ion-view>
<script type="text/javascript">
angular.module('starter',['ionic']).factory('starter',['$http','PARSE_CREDENTIALS',function($http,PARSE_CREDENTIALS){
return {
create:function(data){
return $http.post('https://api.parse.com/1/classes/data',data,{
headers:{
'X-Parse-Application-Id': PARSE_CREDENTIALS.APP_ID,
'X-Parse-REST-API-Key':PARSE_CREDENTIALS.REST_API_KEY,
'Content-Type':'application/json'
}
});
}
}
}]).value('PARSE_CREDENTIALS',{
APP_ID: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
REST_API_KEY:'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
});
angular.module('starter', ['ionic'])
.controller("defaultCtrl", function ($scope) {
$scope.starter = {};
$scope.create=function(){
starter.create({fname:$scope.starter.fname}).success(function(data){
});
});
</script>
</body>
</html>
Set the authentication headers
PARSE_HEADER_CREDENTIALS = {
"x-parse-application-id": "PARSE-APPLICATION-ID",
"x-parse-rest-api-key": "PARSE-REST-API-KEY"
};
code
addObject: function (_params) {
// for POST, we only need to set the authentication header
var settings = {
headers: PARSE_HEADER_CREDENTIALS,
};
// for POST, we need to specify data to add, AND convert it to
// a string before passing it in as seperate parameter data
var dataObject = {
"name": _params.name,
"room": _params.room,
};
var dataObjectString = JSON.stringify(dataObject);
// $http returns a promise, which has a then function
return $http.post(baseURL + 'classes/stuff', dataObjectString, settings)
.then(function (response) {
// In the response resp.data contains the result
// check the console to see all of the data returned
console.log('addObject', response);
return response.data;
});
},
complete example posted in project here:
https://github.com/aaronksaunders/info-rest-api-ionic-sample
I'm trying to switch a "sign in" form for a "sign up" form whenever the user clicks on the "Sign Up" button in my angular app, but at the moment nothing is happening when the button is clicked; The sign in form remains on the screen and there are no console errors. Can anyone tell me where I'm going wrong?
I'm attempting to do this purely in html, is this even possible to achieve?
EDIT: I included a signup function in my UserCtrl which takes care of signing in/ out. Now when I click on sign up the alert is trigger but I get a console error saying TypeError: boolean is not a function.
$scope.signup = function() {
alert('signup function hit');
$scope.signup = true;
}
EDIT 2:
<!DOCTYPE html>
<html ng-app="myApp" >
<head>
<title> My App</title>
<link rel="stylesheet" type="text/css" href="css/app.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/signin.css">
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet"/>
</head>
<body ng-controller="MainCtrl">
<div ng-switch on="view.name">
<div ng-switch-default ng-controller="UserCtrl">
<div ng-show="!isAuthenticated">
<form class = "form-signin">
<div class="control-group">
<img src="img/logo.png">
<br />
<div class="controls">
<br />
<input type="text" ng-model="username" placeholder = "Email Address" >
</div>
<br />
<div class="controls">
<input type="password" ng-model="password" placeholder = "Password" >
</div>
<div class="controls">
<button class = "btn btn-default" ng-click="signIn()">Sign In</button>
<button class = "btn btn-primary" ng-click="view.name = 'signup'">Register</button>
</div>
</div>
</form>
</div>
<div ng-switch-when="signup" ng-controller = "UserNewCtrl" >
<label>
This is where my form should be when my signup button is clicked.
</label>
</div>
//This part of index.html is only shown when a user has been authenticated
<div ng-show="isAuthenticated">
<div class="col-md-2">
//MenuBar code is here
</div>
//Other templates get loaded here
<div class="col-md-10">
<div ng-view></div>
</div>
</div>
</div>
<script src="js/vendor.js"></script>
<script src="js/app.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/transition.js"></script>
<script src="js/ui-utils.js"></script>
</div>
</body>
</html>
MainCtrl.js:
angular.module('myApp.controllers')
.controller('MainCtrl', function($scope) {
$scope.view={
name: ''
};
})
To achieve your requirement you need a wrapper controller that hold ng-switch on model because ngSwitch creates child scope.
You can design your view like
<body ng-controller="mainCtrl">
<div ng-switch on="view.name">
<div ng-switch-default ng-controller="signInCtrl">
<h1>this is sign in page</h1>
sign in
<br>
go to sign up page
</div>
<div ng-switch-when="signup" ng-controller="signUpCtrl">
<h1>this is sign up page</h1>
sign up
<br>
go to sign in page
</div>
</div>
</body>
Here mainCtrl holds view.name and by default ng-switch-default works means your sign in page, then when you click
go to sign up page
view.name model changed and your sign-up page appear.
Check the Demo
move the app controller to the html tag, then the directive in your body tag should read if you want to match an expression
<html ng-app="myApp">
<body ng-switch="signup">
see here
where signup is a boolean in your myApp scope, that will presumably be changed when the signIn criteria is satisfactory
$rootScope.signup = true;
you can also achieve similar with the ng-show and ng-hide directives
I am trying to pass 2 input values from one page using ajax and if its success then it will alert something else if error it will alert error.When i running either in google chrome or in mozilla firefox,I didnt get any error in console.So I thought that there is no error in but Alert is not coming.neither alerting error also.This is the jsffidle for the html part
Following lines are there in html page in head tag
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
http://jsfiddle.net/P6vhG/
this is the jsp code
<%!String number,message; %>
<%
number=request.getParameter("toNumber");
message=request.getParameter("body");
out.println(number+" "+message);
%>
Please provide a solution for this.
this is the complete JSP code
<!DOCTYPE html>
<html>
<head>
<title>Twilio Messages (Send message Example)</title>
<meta http-equiv="Content-Type" content="text/html; charset=US-ASCII">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
<link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap-responsive.css" rel="stylesheet">
<script type="text/javascript" src="https://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="http://getbootstrap.com/2.3.2/assets/js/bootstrap.js"></script>
<script >
$(document).ready(function(){
$('#openAlert').click(function(){
alert("hi");
var number = $('#number').val(); // If its a text input could use .text()
var msg = $('#body').val(); //If its a text input could use .text()
$.ajax(
{
type: "GET",
url: "messageSending.jsp", //Your full URL goes here
data: { toNumber: number, body: msg}
success: function(data, textStatus, jqXHR){
alert(data);
},
error: function(jqXHR, textStatus, errorThrown){
alert("error");
}
});
});
});
</script>
</head>
<body><span id="res"></span>
<div class="container">
<div class="row">
<div class="span12">
<h2>Twilio Messages (Send message Example)</h2>
<form class="form-signin" action="#" method="post">
<div class="row">
<div class="span3">
Enter Number to send:
</div>
<div class="span3">
<input type="text" name="toNumber" id="number" maxlength="13" placeholder="Enter 10 digits number to send" value="+917676462182"/>
</div>
<div class="span6">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
The number to send an SMS to. This field accepts formatted and unformatted US numbers, e.g. +14155551212, (415) 555-1212 or 415-555-1212.<hr />
To send message from SandBox Account. The Number has to be verified
</div>
</div>
</div>
<div class="row">
<div class="span3">
Enter Message to send:
</div>
<div class="span3">
<textarea name="body" maxlength="160" placeholder="Enter message to send" id="body">
</textarea>
</div>
<div class="span6">
<div class="alert">
<button type="button" class="close" data-dismiss="alert">×</button>
The text of the message you want to send, limited to 160 characters.
</div>
</div>
</div>
<div class="row">
<div class="span3">
</div>
<div class="span9">
<button class="btn" type="submit" id="openAlert" >Send</button>
</div>
</div>
</form>
</div>
</div>
<div id="le-alert" class="alert alert-warn alert-block fade">
<button href="#" type="button" class="close">×</button>
<h4>Successful</h4>
<p>Message sent successfully</p>
</div>
</div>
</body>
</html>
this is the complete messageSending.jsp code
<%# page import="com.twilio.sdk.TwilioRestException" %>
<%# page import="sms.*"%>
<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%!String number,message; %>
<%
number=request.getParameter("toNumber");
message=request.getParameter("body");
out.println(number+" "+message);
%>
problem was in your javascript, comma missing , after-> data: { toNumber: number, body: msg}
working fine after putting comma over there.