I am using phonegap and jquery mobile to build a web app, django on the server side. First, i start out from index.html page,and inject a login form from server into index.html and change page to the jquery mobile page containing the sign in form. But the problem is that the form is getting submitted but not in ajax, but if i test it in web browser,it works. I have already white listed the domain name in config.xml file.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<title>Hello World</title>
</head>
<body>
<div data-role="page">
<div class="app" style="display:none;">
<h1>PhoneGap</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
<p class="event received">Device is Ready</p>
</div>
</div>
<div data-role="header">
<h1>DOCTORSLOG</h1>
</div>
<div data-role="content">
</div>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
$(function(){
$.ajax({
url: 'http://doctorslog.net/mobile/login-test/',
success: function(data){
//append the response(sign-in.html) to the body
$('body').append(data);
}
});
});
</script>
</body>
</html>
sign-in.html
<div data-role="page" data-fullscreen="true" id="login">
<div data-role="header" data-theme="b">
<h1 id="title">DOCTORSLOG</h1>
</div>
<div data-role="content">
<form id="sign_in_form" method="post" action="http://doctorslog.net/mobile/login/">{% csrf_token %}
<div data-role="fieldcontain">
<label for="id_username" style="font-size: 1.3em;line-height: 350%;">Username</label>
<input id="id_username" style="font-size: 1.8em;font-weight: bold;font-family: Tahoma,Verdana,serif;" type="text" maxlength="30" name="username" autocomplete="off">
</div>
<div data-role="fieldcontain">
<label for="id_password" style="font-size: 1.3em;line-height: 350%;">Password</label>
<input id="id_password" style="font-size: 1.8em;font-weight: bold;font-family: Tahoma,Verdana,serif;" type="password" name="password">
</div>
<div style="width: 100%;text-align: center;font-size: 1.6em;">
<input id="sign-in-btn" type="submit" data-inline="true" value="Sign me in" />
</div>
<input type="hidden" name="next" value="{% firstof next '/home/' %}"/>
<input id="hiddenID" type="hidden" name="regID" value=""/>
</form>
</div>
<script>
$(function(){
//change active page to this page and since it is a jquery mobile page with data-role=page,i expect automatic ajax submission on clicking submit button
$(':mobile-pagecontainer').pagecontainer('change','#login');
$('#sign_in_form').trigger('create');
});
</script>
</div>
The question is, if i can make Ajax GET request,why can not i make POST request. Any help is appreciated. Thanks.
Ok, i have solved this issue by disabling jquery mobile default form hijacking by setting data-ajax="false" on the form tag and submitting the form by $.ajax . Nothing like $.mobile.allowCrossDomainPages worked. And i also have set Access-Control-Allow-Origin response headers on the server side , really did not know if this is required.
Here is the script to submitform -
$(function(){
$('#sign_in_form').submit(function(e){
e.preventDefault();
$.mobile.loading('show');
var url = $(this).attr('action');
var data = $(this).serializeArray();
$.ajax({
beforeSend:function(jqXHR,settings){
jqXHR.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
},
url:url,
type:'POST',
data:data,
crossDomain:false,
success: function(data){
$.mobile.loading('hide');
$('body').append(data);
}
});
});
});
Related
I'm trying to build a basic chat function for a site and am following along with this tutorial...
(https://www.youtube.com/watch?v=tHbCkikFfDE&list=WL&index=4)... but socket.io doesn't seem to be loading on the page. I used the most recent CDN. I have a feeling my file path is off but I'm not quite sure how to repair it. I'm new, be gentle.
<html>
<head>
<title>IO Chat</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.slim.js" integrity="sha256-DrT5NfxfbHvMHux31Lkhxg42LY6of8TaYyK50jnxRnM=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.3.0/socket.io.js"></script>
<style>
body {
margin-top: 30px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="well">
<h3>Online Users</h3>
<ul id="users" class="list-group"></ul>
</div>
</div>
<div class="col-md-8">
<div class="chat" id="chat"></div>
<form id="messageForm">
<div class="form-group">
<label>Enter Message</label>
<textarea class="form-control" id="message">
</textarea>
<br />
<input type="submit" class="btn btn-primary" value="Send Message" />
</div>
</form>
</div>
</div>
</div>
<script>
$(function(){
var socket = io.connect();
var $messageForm = $('#messageForm');
var $message = $('#message');
var $chat = $('#chat');
$messageForm.submit(function(e){
e.preventDefault();
socket.emit('send message', $message.val());
$message.val('');
});
socket.on('new message', function(data){
$chat.append('<div class="well">'+data.msg+'</div>')
})
})
</script>
</body>
</html>
I am doing POC on login application using angular js. On button click I need to navigate to another page. The code which I have written is only updating the url but the view is not getting loaded. I have used ng-view or ui- view also. And I have used $location.path. But still unable to navigate to other page
Here is my code
index.html:
<html ng-app='myApp'>
<head>
<title>Jasmine</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/angular-route.min.js"></script>
<script src="routing.js" type="text/javascript"></script>
</head>
<body>
<div id='content' ng-controller='LoginController'>
<div class="container">
<form class="form-signin" role="form" name="myForm" ng-submit="login()">
<h3 class="form-signin-heading">Login Form</h3>
<span>
<b>Username :</b> <input type="text" class="form-control" ng-model="user.name" required>
</span> <br />
<br /> <span>
<b>Password :</b> <input type="password"
class="form-control" ng-model="user.password" required>
</span>
<br><br>
<button class="btn btn-lg btn-primary btn-block" type="submit" ng-disabled="myForm.$invalid">
<b>Sign in</b>
</button>
</form>
</div>
{{message}}
</div>
<div ui-view></div>
</body>
</html>
Here I have used ui-view.. when i use this, url is updating but not the view..
when i use ng-view, the script block is happening both in chrome and firefox.
routing.js:
var applog = angular.module('myApp', ['ngRoute']);
applog.controller("LoginController", function ($scope, $location, $window) {
$scope.message = "hi";
$scope.login = function () {
var username = $scope.user.name;
var password = $scope.user.password;
$location.path('/home');
};
});
applog.controller("HomeController", function ($scope, $location) {
$scope.msg = "qwerty";
});
applog.config(function ($routeProvider) {
$routeProvider
.when('/', {
templateUrl: 'index.html',
controller: 'LoginController'
}).when('/home', {
templateUrl: '/home.html',
controller: 'HomeController'
}).otherwise({
redirectTo: 'index.html'
});
});
Here I tried with hash also.. not working
Home.html:
<div ng-controller="HomeController">
Welcome....
</div>
Bootstrap carousel slide is not working in ajax success call. Ajax call is completed without any issue but $("#myCarousel").carousel(); is not working & the next slide is not shown.
<head>
....
<link rel="stylesheet" href="resources/css/bootstrap.min.css">
<link rel="stylesheet" href="resources/css/bootstrap-theme.min.css">
<script src="resources/js/jquery-1.11.1.min.js"></script>
<script src="resources/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myId').click(function(event) {
$.ajax({
url: $("#myId").attr( "action"),
type: 'GET',
dataType: 'json',
contentType : 'application/json',
success: function(data) {
$("#myCarousel").carousel();
}
});
event.preventDefault();
});
});
</script>
</head>
<body>
.....
<div class="container">
<div id="myCarousel" class="carousel slide" data-interval="false" data-ride="carousel">
<div class="carousel-inner">
<div class="active item">
...
<button id="myId" action="${pageContext.request.contextPath}/create" type="submit" class="btn btn-primary">Login</button>
</div>
<div class="item">
<h2>Slide 2</h2>
....
</div>
</div>
</div>
</div>
</body>
</html>
The proper syntax to move to the next slide is $('#myCarousel').carousel('next');
I'm now implement Windows Phone with Phonegap Cordova 2.0.0 and Jquery Mobile 1.1.1 final
and I'm be stuck with using local JSON file due to Window Phone Emulator not load JSON data
to <select> element while both iOS and Android emulators run smoothly. And this is my snippet code
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/jquery.mobile-1.1.1.min.css" />
<link rel="stylesheet" href="css/jqm-icon-pack-2.1.2-fa.css" />
<script type="text/javascript" src="js/cordova-2.0.0.js"></script>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.1.1.min.js"></script>
<script type="text/javascript" src="js/json2.js"></script>
<script type="text/javascript" charset="utf-8">
function changeBaseAmount() {
alert($('#baseAmount').val());
}
$.getJSON('json/currencies.json',
function (data) {
alert("get json");
$.each(data, function (key, value) {
$('#currency1').append("<option value='" + key + "'>" + value + "</option>");
$('#currency2').append("<option value='" + key + "'>" + value + "</option>");
});
});
</script>
</head>
<body>
<!-- Home Page -->
<div data-role="page" data-theme="b">
<div data-role="header" data-theme="b">
<h1>Convert Currency</h1>
</div>
<div data-role="content" data-theme="b">
<div id="baseAmountDiv" data-role="fieldcontain">
<label for="baseAmount">Amount:</label>
<input id="baseAmount" type="text" value="" onchange="changeBaseAmount()"></input>
</div>
<div id="currency1Div" data-role="fieldcontain">
<label for="currency1">Currency From:</label>
<select id="currency1" onchange="changeCurrency1()">
<option value="ZZ">Please Select Currency From</option>
</select>
</div>
<div id="currency2Div" data-role="fieldcontain">
<label for="currency2">Currency To:</label>
<select id="currency2" onchange="changeCurrency2()">
<option value="ZZ">Please Select Currency To</option>
</select>
</div>
<div id="resultAmountDiv" data-role="fieldcontain">
<label for="resultAmount">Result:</label>
<input id="resultAmount" type="text" value="" readonly="readonly" style="background-color: silver"></input>
</div>
</div>
<div data-role="footer" data-theme="b"></i></div>
</div>
</body>
</html>
Cordova for WP7 has its own implementation of XHR requests in order to support fetching local data. See the following:
https://issues.apache.org/jira/browse/CB-208
You might have to use $.ajax in order for this to work properly.
so here's my problem.
i have a html page with a simple form and some javascript (jquery) code to validate it, ok then.
this page would looks like this: test.html
<html>
<head>
<title></title>
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
function validate(){
$('form').submit(function () {
var txt = $('#SYSTEM_NAME').val();
if (txt == '') $('#loading').append('field is empty');
return false;
})
}
window.onload = validate
<form action="SomeAction" id="form0" method="post">
<fieldset>
<legend>Information</legend>
<div class="editor-field">
<input id="SYSTEM_NAME" name="SYSTEM_NAME" type="text" value="" />
</div>
<input type="submit" value="Insert" id="saveCreation" />
<div id="loading"></div>
</fieldset>
</form>
</body>
</html>
In this page above, if you try to insert without any information on the field 'SYSTEM_NAME', it would dysplay a message. Everything is fine here my form is validated.
But when i load this page from another one using ajax(jquery), what occurs is, after loaded it the validation that i made on 'test.html' doenst work.
Example:
<html>
<head>
<title></title>
<script src="jquery-1.7.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('#go').click(function(){
$('#here').load('test.html')
});
</script>
</head>
<body>
<input type='button' id='go' value='go' />
<div id='here'></div>
</body>
</html>
Now if i click on 'Insert' the validation doest work anymore.
How can i solve this problem ? can i interact with loaded page and javascript code together ?
Hope you guys have understood my problem. Thanks and sorry for enlish mistakes.
forgive me if this is too much of a change, but i thought i might suggest another method for you. what about using jquery validate to help you with the validation? here is an example with the ajax-response validating as you want. below is the parent document... (notice that i am including jquery validate in the head. just ignore the 'get_test' i am using to load the partial.)
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#go').click(function() {
$('#here').load('get_test');
});
});
</script>
</head>
<body>
<input type='button' id='go' value='go' />
<div id='here'></div>
</body>
</html>
and the partial i am loading below... (notice that the text input has a class of 'required' - this is how jquery validate works. you will also see a validate method.)
<script type="text/javascript">
$("#form0").validate();
</script>
<form action="SomeAction" id="form0" method="post">
<fieldset>
<legend>Information</legend>
<div class="editor-field">
<input id="SYSTEM_NAME" name="SYSTEM_NAME" type="text" value="" class="required" />
</div>
<input type="submit" value="Insert" id="saveCreation" />
<div id="loading"></div>
</fieldset>
</form>