<input type="text" ui-mask="**** **** ****" ui-mask-placeholder-char="space" ng-model="user.aadhaar">
as user types in characters should turn into star how do we achieve this using angular-ui-mask.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>
<body>
<input type="tel" maxlength="14" id="aadhaar" autocomplete="off"/>
<button onclick="displayVal()">Show Value</button>
<script>
let aadhaar = "";
let aadhaarStack = [];
let maskStack = [];
let flag = 0;
jQuery(function($) { // DOM ready and $ alias secured
$('#aadhaar').on('input',function(e){
console.log("this.value.length",this.value,this.value === " ");
let key = e.which || this.value.substr(-1).charCodeAt(0);
console.log("key",key)
if(key === 32){
aadhaarStack.pop();
maskStack.pop();
updateUi();
return;
}
console.log("here also", this.value.length + ":" + aadhaarStack.length);
if(this.value.length < aadhaarStack.length){
aadhaarStack.pop();
maskStack.pop();
}else{
key = String.fromCharCode(key);
if(aadhaarStack.filter(i => i !== " ").length <= 11 && !isNaN(key)){
if(aadhaarStack.length > 1 && (aadhaarStack.filter(i => i !== " ").length) % 4 === 0){
aadhaarStack.push(" ");
aadhaarStack.push(key);
maskStack.push(" ");
if(aadhaarStack.filter(i => i !== " ").length > 8){
maskStack.push(key);
}else{
maskStack.push("X");
}
}else{
aadhaarStack.push(key);
if(aadhaarStack.filter(i => i !== " ").length > 8){
maskStack.push(key);
}else{
maskStack.push("X");
}
}
}
}
updateUi();
});
function updateUi(){
setTimeout(function(){
aadhaar = maskStack.join("");
$('#aadhaar').val(aadhaar);
},100);
}
});
function displayVal(){
alert(aadhaarStack.filter(i => i != " ").join(""));
}
</script>
</body>
</html>
found a better way
Related
What I'm trying to achieve: Firebase email and password based authentication (user register) using Knockout.js in a game environment.
Issue: While retrieving and writing to the database works, I'm facing difficulties implementing user registration. The response returns following error: "This browser is not supported".
What are the requirements in order to perform an authentication process, issues might arise due to not using a regular browser but a game built-in one.
Edit: html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<noloc><title>UberBar</title></noloc>
<link href="bundle://boot/boot.css" rel="stylesheet" type="text/css" />
<link href="uberbar.css" rel="stylesheet" type="text/css" />
<script src="https://www.gstatic.com/firebasejs/5.0.0/firebase.js"></script>
<script>
// Initialize Firebase
var config = {
apiKey: "*************************************",
authDomain: "**************.firebaseapp.com",
databaseURL: "https://**********.firebaseio.com",
projectId: "**************",
storageBucket: "****************.appspot.com",
messagingSenderId: "**********"
};
firebase.initializeApp(config);
</script>
<script src="bundle://boot/boot.js" type="text/javascript"></script>
<script src="coui://ui/main/shared/js/jabber.js" type="text/javascript"></script>
<script src="coui://ui/main/shared/js/leaderboard_utility.js" type="text/javascript"></script>
<script src="uberbar.js" type="text/javascript"></script>
</head>
<body data-bind="click: hideContextMenu">
<div id="social-wrapper">
<!-- ko if: (model.showUberBar()) -->
<div id="uberbar_watermark">
<loc>Offline</loc>
</div>
<!-- /ko -->
<!-- ko if: (model.showUberBar() && model.hasJabber()) -->
<!-- ko if: showUserDetails -->
<!-- File continues here... -->
Edit: js
var model;
var handlers;
$(document).ready(function () {
function PaChatModel() {
var self = this;
self.setColor = ko.observable(false);
self.setVisibility = ko.observable(false);
self.verificationStatus = ko.observable();
var chat_auth_status = 0;
self.verificationStatus('PA Community Chat (Authentication Required)');
self.awaitPermissionClose = function() {
self.verificationStatus('PA Community Chat (Authentication Required)');
self.setVisibility(false);
chat_auth_status = 0;
}
self.chatVerificationStatus = function() {
switch(chat_auth_status) {
case 0:
self.verificationStatus('Authentication in progress: Awaiting permission...');
self.setVisibility(true);
chat_auth_status = 1;
break;
}
}
}
PaChatModel();
function AwaitPermissionSubmit() {
var self = this;
self.mailValue = ko.observable();
self.pswValue = ko.observable();
self.awaitPermissionError = ko.observable();
var firebaseRef = firebase.database().ref();
self.awaitPermissionSubmitBtn = function() {
console.log(self.pswValue().length);
if(!validateEmail(self.mailValue()) && self.pswValue().length < 8) {
self.awaitPermissionError("Wrong E-Mail and Password format");
} else if(self.pswValue().length < 8) {
self.awaitPermissionError("Password must be at least 8 characters long");
} else if(!validateEmail(self.mailValue())) {
self.awaitPermissionError("Invalid E-Mail format");
}
else {
firebase.auth().createUserWithEmailAndPassword(self.mailValue(), self.pswValue()).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
// [START_EXCLUDE]
if (errorCode == 'auth/weak-password') {
self.awaitPermissionError("The password is too weak.");
} else {
self.awaitPermissionError(errorMessage);
}
console.log(error);
// [END_EXCLUDE]
});
}
}
}
function validateEmail(email) {
var type = /^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return type.test(email);
}
AwaitPermissionSubmit();
When following Google API Directions i ran into a problem. I cannot find a solution to get this working correctly. Seems like it has to be a google issue.
If you check the images and snippet example you can see between waypoint A end B there is a road that is only open during summertime. During wintertime closed and gets a longer route which is normal.
When stopover is set to FALSE (during summertime) then the route is correct but there are no legs anymore. I need those legs between the waypoints. When triple checking the google API i cannot find why this behavior occurs. I'm aware some things are not working with TRANSIT but this is not the case here.
So i need the SHORT summer route with stopovers and with leg information as result. Any ideas to get this?
Image: stopover=false
Image: stopover=true
When switching between stopover mode change 2 vars at line 36-37
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3";></script>
<script type="text/javascript">
var directionDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var wptruefalse;
function initialize() {
directionsDisplay = new google.maps.DirectionsRenderer();
var myOptions = {
zoom: 6,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
directionsDisplay.setMap(map);
calcRoute();
}
function calcRoute() {
var first = new google.maps.LatLng(61.84448683734486, 8.85223388671875);
var second = new google.maps.LatLng(61.75298123367897, 9.078826904296875);
var start = new google.maps.LatLng(61.484039,7.645798);
var end = new google.maps.LatLng(61.944118091023746,7.97882080078125);
var request = {
origin: start,
destination: end,
waypoints: [{location: first, stopover: wptruefalse},
{location: second, stopover: wptruefalse}],
optimizeWaypoints: true,
travelMode: google.maps.DirectionsTravelMode.DRIVING,
drivingOptions: {
departureTime: new Date("08/08/2018")
},
};
directionsService.route(request, function (response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
var route = response.routes[0];
var summaryPanel = document.getElementById("directions_panel");
summaryPanel.innerHTML = "";
// For each route, display summary information.
for (var i = 0; i < route.legs.length; i++) {
var routeSegment = i + 1;
summaryPanel.innerHTML += "<b>Route Segment: " + routeSegment + "</b><br />";
summaryPanel.innerHTML += route.legs[i].start_address + " to ";
summaryPanel.innerHTML += route.legs[i].end_address + "<br />";
summaryPanel.innerHTML += route.legs[i].distance.text + "<br /><br />";
}
} else {
alert("directions response " + status);
}
});
}
function doClick(myRadio) {
if (myRadio.value === "true") {
wptruefalse = true;
} else {
wptruefalse = false;
}
calcRoute();
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="float:left;width:70%;height:100%;"></div>
<div id="control_panel" style="float:right;width:30%;text-align:left;padding-top:20px">
API Key is needed to test properly
<form>
<input type="radio" name="wpradio" onclick="doClick(this);" value="true" checked> True
<input type="radio" name="wpradio" onclick="doClick(this);" value="false"> False
</form>
<div id="directions_panel" style="margin:20px;background-color:#FFEE77;"></div>
</div>
</body>
</html>
Thanks in advance!
I am trying to build a SignalR application in Visual Studio 2012. My problem is that it works well under Visual Studio debug (using Visual Studio 2012 on Windows 7), but when I try to deploy the application on IIS 7.5 , the app does nothing more than displaying the index.html page.
my Index.html page is like :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link type="text/css" rel="stylesheet" href="Css/ChatStyle.css" />
<link rel="stylesheet" href="/Css/JQueryUI/themes/base/jquery.ui.all.css">
<!--Script references. -->
<!--Reference the jQuery library. -->
<script src="/Scripts/jquery-1.8.2.min.js"></script>
<script src="/Scripts/ui/jquery.ui.core.js"></script>
<script src="/Scripts/ui/jquery.ui.widget.js"></script>
<script src="/Scripts/ui/jquery.ui.mouse.js"></script>
<script src="/Scripts/ui/jquery.ui.draggable.js"></script>
<script src="/Scripts/ui/jquery.ui.resizable.js"></script>
<!--Reference the SignalR library. -->
<script src="/Scripts/jquery.signalR-1.0.0.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="/signalr/hubs"></script>
<script type="text/javascript">
$(function () {
setScreen(false);
// Declare a proxy to reference the hub.
var chatHub = $.connection.chatHub;
registerClientMethods(chatHub);
// Start Hub
$.connection.hub.start().done(function () {
registerEvents(chatHub)
});
});
function setScreen(isLogin) {
if (!isLogin) {
$("#divChat").hide();
$("#divLogin").show();
}
else {
$("#divChat").show();
$("#divLogin").hide();
}
}
function registerEvents(chatHub) {
$("#btnStartChat").click(function () {
var name = $("#txtNickName").val();
if (name.length > 0) {
chatHub.server.connect(name);
}
else {
alert("Please enter name");
}
});
$('#btnSendMsg').click(function () {
var msg = $("#txtMessage").val();
if (msg.length > 0) {
var userName = $('#hdUserName').val();
chatHub.server.sendMessageToAll(userName, msg);
$("#txtMessage").val('');
}
});
$("#txtNickName").keypress(function (e) {
if (e.which == 13) {
$("#btnStartChat").click();
}
});
$("#txtMessage").keypress(function (e) {
if (e.which == 13) {
$('#btnSendMsg').click();
}
});
}
function registerClientMethods(chatHub) {
// Calls when user successfully logged in
chatHub.client.onConnected = function (id, userName, allUsers, messages) {
setScreen(true);
$('#hdId').val(id);
$('#hdUserName').val(userName);
$('#spanUser').html(userName);
// Add All Users
for (i = 0; i < allUsers.length; i++) {
AddUser(chatHub, allUsers[i].ConnectionId, allUsers[i].UserName);
}
// Add Existing Messages
for (i = 0; i < messages.length; i++) {
AddMessage(messages[i].UserName, messages[i].Message);
}
}
// On New User Connected
chatHub.client.onNewUserConnected = function (id, name) {
AddUser(chatHub, id, name);
}
// On User Disconnected
chatHub.client.onUserDisconnected = function (id, userName) {
$('#' + id).remove();
var ctrId = 'private_' + id;
$('#' + ctrId).remove();
var disc = $('<div class="disconnect">"' + userName + '" logged off.</div>');
$(disc).hide();
$('#divusers').prepend(disc);
$(disc).fadeIn(200).delay(2000).fadeOut(200);
}
chatHub.client.messageReceived = function (userName, message) {
AddMessage(userName, message);
}
chatHub.client.sendPrivateMessage = function (windowId, fromUserName, message) {
var ctrId = 'private_' + windowId;
if ($('#' + ctrId).length == 0) {
createPrivateChatWindow(chatHub, windowId, ctrId, fromUserName);
}
$('#' + ctrId).find('#divMessage').append('<div class="message"><span class="userName">' + fromUserName + '</span>: ' + message + '</div>');
// set scrollbar
var height = $('#' + ctrId).find('#divMessage')[0].scrollHeight;
$('#' + ctrId).find('#divMessage').scrollTop(height);
}
}
function AddUser(chatHub, id, name) {
var userId = $('#hdId').val();
var code = "";
if (userId == id) {
code = $('<div class="loginUser">' + name + "</div>");
}
else {
code = $('<a id="' + id + '" class="user" >' + name + '<a>');
$(code).dblclick(function () {
var id = $(this).attr('id');
if (userId != id)
OpenPrivateChatWindow(chatHub, id, name);
});
}
$("#divusers").append(code);
}
function AddMessage(userName, message) {
$('#divChatWindow').append('<div class="message"><span class="userName">' + userName + '</span>: ' + message + '</div>');
var height = $('#divChatWindow')[0].scrollHeight;
$('#divChatWindow').scrollTop(height);
}
function OpenPrivateChatWindow(chatHub, id, userName) {
var ctrId = 'private_' + id;
if ($('#' + ctrId).length > 0) return;
createPrivateChatWindow(chatHub, id, ctrId, userName);
}
function createPrivateChatWindow(chatHub, userId, ctrId, userName) {
var div = '<div id="' + ctrId + '" class="ui-widget-content draggable" rel="0">' +
'<div class="header">' +
'<div style="float:right;">' +
'<img id="imgDelete" style="cursor:pointer;" src="/Images/delete.png"/>' +
'</div>' +
'<span class="selText" rel="0">' + userName + '</span>' +
'</div>' +
'<div id="divMessage" class="messageArea">' +
'</div>' +
'<div class="buttonBar">' +
'<input id="txtPrivateMessage" class="msgText" type="text" />' +
'<input id="btnSendMessage" class="submitButton button" type="button" value="Send" />' +
'</div>' +
'</div>';
var $div = $(div);
// DELETE BUTTON IMAGE
$div.find('#imgDelete').click(function () {
$('#' + ctrId).remove();
});
// Send Button event
$div.find("#btnSendMessage").click(function () {
$textBox = $div.find("#txtPrivateMessage");
var msg = $textBox.val();
if (msg.length > 0) {
chatHub.server.sendPrivateMessage(userId, msg);
$textBox.val('');
}
});
// Text Box event
$div.find("#txtPrivateMessage").keypress(function (e) {
if (e.which == 13) {
$div.find("#btnSendMessage").click();
}
});
AddDivToContainer($div);
}
function AddDivToContainer($div) {
$('#divContainer').prepend($div);
$div.draggable({
handle: ".header",
stop: function () {
}
});
////$div.resizable({
//// stop: function () {
//// }
////});
}
</script>
</head>
<body>
<div id="header">
ABC BANK CHAT ROOM
</div>
<br />
<br />
<br />
<div id="divContainer">
<div id="divLogin" class="login">
<div>
Your Name:<br />
<input id="txtNickName" type="text" class="textBox" />
</div>
<div id="divButton">
<input id="btnStartChat" type="button" class="submitButton" value="Start Chat" />
</div>
</div>
<div id="divChat" class="chatRoom">
<div class="title">
Welcome to Chat Room [<span id='spanUser'></span>]
</div>
<div class="content">
<div id="divChatWindow" class="chatWindow">
</div>
<div id="divusers" class="users">
</div>
</div>
<div class="messageBar">
<input class="textbox" type="text" id="txtMessage" />
<input id="btnSendMsg" type="button" value="Send" class="submitButton" />
</div>
</div>
<input id="hdId" type="hidden" />
<input id="hdUserName" type="hidden" />
</div>
</body>
</html>
I have tried some of the methods listed here: Signalr/Hub not loading in IIS 7 but working correctly in Visual Studio, but none of them seem to work. Any help would be greatly appreciated. Thanks, chiranjit
I think you have to remove all the leading slashes "/"
(Ans maybe also upgrade to at least jquery-1.9.1)
<link type="text/css" rel="stylesheet" href="Css/ChatStyle.css" />
<link rel="stylesheet" href="Css/JQueryUI/themes/base/jquery.ui.all.css" />
<!--Script references. -->
<!--Reference the jQuery library. -->
<script src="Scripts/jquery-1.9.1.min.js"></script>
<script src="Scripts/ui/jquery.ui.core.js"></script>
<script src="Scripts/ui/jquery.ui.widget.js"></script>
<script src="Scripts/ui/jquery.ui.mouse.js"></script>
<script src="Scripts/ui/jquery.ui.draggable.js"></script>
<script src="Scripts/ui/jquery.ui.resizable.js"></script>
<!--Reference the SignalR library. -->
<script src="Scripts/jquery.signalR-1.0.0.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="signalr/hubs"></script>
I have a problem with vieport in Chrome. Document width is 1309px in Chrome and 1440px in Firefox. I read a lot of references but I don't understand where is the problem.
My html header:
<!DOCTYPE html>
<html class="js" lang="en" dir="ltr">
<head profile="http://www.w3.org/1999/xhtml/vocab">
<meta charset="utf-8">
<link type="image/png" href="favicon.png" rel="shortcut icon">
<title>Page title</title>
<meta content="width=device-width" name="viewport">
<meta content="on" http-equiv="cleartype">
(...)
I read:
https://stackoverflow.com/a/9027284/1827690
http://www.quirksmode.org/mobile/viewports.html
And I use:
https://github.com/tysonmatanich/viewportSize
var dimensions = (function(){
var dims = {};
// get screen width/height:
dims.screenWidth = function() { window.screen.width };
dims.screenHeight = function() { return window.screen.height };
// get screen width/height minus chrome:
dims.availWidth = function() { return window.screen.availWidth };
dims.availHeight = function() { return window.screen.availHeight };
// get document width/height (with-out scrollbars):
if (window.document.compatMode == "CSS1Compat"){ // if IE Standards Mode
dims.documentWidth = function() { return document.body.offsetWidth };
dims.documentHeight = function() { return document.body.offsetHeight };
}
else {
dims.documentWidth = function() { return document.documentElement.offsetWidth };
dims.documentHeight = function() { return document.documentElement.offsetHeight };
}
// get viewport width/height (with scrollbars):
if (window.innerWidth != null) {
dims.viewportWidth = function () { return window.innerWidth };
dims.viewportHeight = function () { return window.innerHeight };
}
// if IE in Standards Mode
else if (window.document.compatMode == "CSS1Compat"){
dims.viewportWidth = function () {
return window.document.documentElement.clientWidth
};
dims.viewportHeight = function () {
return window.document.documentElement.clientHeight
};
}
// get scrollbar offsets:
if (window.pageXOffset != null) {
dims.scrollXOffset = function() { return window.pageXOffset };
dims.scrollYOffset = function() { return window.pageYOffset };
}
// if IE in Standards Mode
else if (window.document.compatMode == "CSS1Compat"){
dims.scrollXOffset = function() { return document.documentElement.scrollLeft };
dims.scrollYOffset = function() { return document.documentElement.scrollTop };
}
return dims;
}());
console.log(dimensions.viewportWidth())
Any suggestion?
I am trying to get nowelium / socket.io-titanium to work i have it working on the device but on website i get the following error in my console
XMLHttpRequest cannot load http://127.0.0.1:8080/socket.io/1/?t=1345807417891. Cannot use wildcard in Access-Control-Allow-Origin when credentials flag is true.
I am using socket.io here is the chat.js server
var io = require('socket.io').listen(8080);
var archiveMessages = {};
var channels = ['foo channel', 'bar channel'];
var chat = io.of('/chat');
chat.on('connection', function(socket){
console.log('connected: %s', socket.id);
// push available channel list
socket.emit('available_channel', channels);
socket.on('join', function(value){
console.log('%s joined channel: %s', socket.id, value.channelId);
socket.join(value.channelId);
socket.set('channel_id', value.channelId, function(){
var messages = archiveMessages[value.channelId] || [];
socket.emit('joined', messages);
socket.broadcast.to(value.channelId).emit('user:join', {
id: socket.id
});
});
});
socket.on('post', function(message){
socket.get('channel_id', function(err, channelId){
console.log('%s says<%s channel>: %s', socket.id, channelId, message);
if(!(channelId in archiveMessages)){
archiveMessages[channelId] = [];
}
archiveMessages[channelId].push(message);
socket.emit('posted', {
message: message
});
socket.broadcast.to(channelId).emit('user:message', {
id: socket.id,
message: message
});
});
});
socket.on('disconnect', function(){
console.log('%s disconnected', socket.id);
socket.get('channel_id', function(channelId){
socket.leave(channelId);
socket.broadcast.to(channelId).emit('user:leave', {
id: socket.id
});
});
});
});
var image = io.of('/image');
image.on('connection', function(socket){
socket.on('upload', function(param){
console.log('upload base64 size: %d', param.base64.length);
if(param.download){
socket.emit('download', {
base64: 's' + new Array(65534).join('0') + 'e'
});
}
});
});
and here is the index.html i am running
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>chat sample</title>
<style>
#rooms button {
display: block;
}
</style>
<script type="text/javascript" src="http://localhost:8080/socket.io/dist/socket.io.js"></script>
<script type="text/javascript">
var $ = function(id){
return document.getElementById(id);
};
window.addEventListener('load', function (){
var socket = io.connect('127.0.0.1:8080');
var chat = socket.of('/chat');
console.log(chat);
chat.on('available_channel', function(channels){
channels.forEach(function (channelId){
var button = document.createElement('button');
button.appendChild(document.createTextNode(channelId));
$('rooms').appendChild(button);
button.addEventListener('click', function(){
$('chat').style.display = '';
chat.emit('join', {
channelId: channelId
});
});
});
});
var addMessage = function(message){
var li = document.createElement('li');
li.appendChild(document.createTextNode(message));
$('messages').appendChild(li);
};
chat.on('joined', function(messages){
messages.forEach(function(message){
var li = document.createElement('li');
li.appendChild(document.createTextNode(message));
$('archives').appendChild(li);
});
});
chat.on('posted', function(value){
return addMessage('you posted: ' + value.message);
});
chat.on('user:join', function(value){
return addMessage(value.id + ' joined this channel');
});
chat.on('user:leave', function(value){
return addMessage(value.id + ' leaved this channel');
});
chat.on('user:message', function(value){
return addMessage(value.id + ' says ' + value.message);
});
$('submit').addEventListener('click', function (){
var messageValue = $('message').value;
if(/^\s+$/.test(messageValue)){
return;
}
chat.emit('post', messageValue);
$('message').value = '';
});
});
</script>
</head>
<body>
<div id="rooms">
</div>
<div id="chat" style="display:none">
<input type="text" id="message" value="" placeholder="message here" />
<input type="submit" id="submit" value="send" />
<p>archives</p>
<ul id="archives" style="color: #999"></ul>
<p>messages</p>
<ul id="messages"></ul>
</div>
</body>
</html>
CAn anyone tell me why this might be happening???
I wonder if switching it to localhost would fix that.
I researched into Access-Control-Allow-Origin and traced it to the web browser as the culprit if I remember correctly. I eventually started looking for a way to disable the browser from checking for that. In Chrome this is my shortcut path.
...Chrome\Application\chrome.exe --allow-file-access-from-files --disable-web-security
See if that works. I don't know if it really remedies the issue as much as it just suppresses the problem. If you were calling the web page from the host you were trying to access I don't think you'd have this problem at all. For example, when I attempt to access my web service on mydomain.com using the web page mydomain.com/myprogram.html it doesn't complain about cross domain access.