I tried to implement Signalr notification to my existing MVC project and my code in the View as follows
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<span class="noti glyphicon glyphicon-bell"><span class="count"> </span></span>
<div class="noti-content">
<div class="noti-top-arrow"></div>
<ul id="notiContent"></ul>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home")</li>
<li>#Html.ActionLink("About", "About", "Home")</li>
<li>#Html.ActionLink("Contact", "Contact", "Home")</li>
</ul>
#Html.Partial("_LoginPartial")
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#* Add Jquery Library *#
<script src="~/Scripts/jquery-2.2.3.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<script src="/signalr/hubs"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
#* Add css *#
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
/*Added css for design notification area, you can design by your self*/
/* COPY css content from youtube video description*/
</style>
#* Add jquery code for Get Notification & setup signalr *#
<script type="text/javascript">
$(function () {
// Click on notification icon for show notification
$('span.noti').click(function (e) {
e.stopPropagation();
$('.noti-content').show();
var count = 0;
count = parseInt($('span.count').html()) || 0;
//only load notification if not already loaded
if (count > 0) {
updateNotification();
}
$('span.count', this).html(' ');
})
// hide notifications
$('html').click(function () {
$('.noti-content').hide();
})
// update notification
function updateNotification() {
$('#notiContent').empty();
$('#notiContent').append($('<li>Loading...</li>'));
$.ajax({
type: 'GET',
url: '/home/GetNotificationContacts',
success: function (response) {
$('#notiContent').empty();
if (response.length == 0) {
$('#notiContent').append($('<li>No data available</li>'));
}
$.each(response, function (index, value) {
$('#notiContent').append($('<li>New contact : ' + value.ContactName + ' (' + value.ContactNo + ') added</li>'));
});
},
error: function (error) {
console.log(error);
}
})
}
// update notification count
function updateNotificationCount() {
var count = 0;
count = parseInt($('span.count').html()) || 0;
count++;
$('span.count').html(count);
}
// signalr js code for start hub and send receive notification
var notificationHub = $.connection.notificationHub;
$.connection.hub.start().done(function () {
console.log('Notification hub started');
});
//signalr method for push server message to client
notificationHub.client.notify = function (message) {
if (message && message.toLowerCase() == "added") {
updateNotificationCount();
}
}
})
</script>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
In the Line
// signalr js code for start hub and send receive notification
var notificationHub = $.connection.notificationHub;
$.connection.hub.start().done(function () {
console.log('Notification hub started');
});
$.connection does not have a definition
and When running the application
Uncaught TypeError: Cannot read property 'notificationHub' of undefined
at HTMLDocument.<anonymous> (Login:219)
at i (jquery-2.2.3.min.js:2)
at Object.fireWith [as resolveWith] (jquery-2.2.3.min.js:2)
at Function.ready (jquery-2.2.3.min.js:2)
at HTMLDocument.J (jquery-2.2.3.min.js:2)
It shows the error line as
var notificationHub = $.connection.notificationHub;
But when I tried to implement in a new project it worked after removing some additional scripts references, but in this project it did not worked
Here is the example I followed
http://www.dotnetawesome.com/2016/05/push-notification-system-with-signalr.html
This works fine for empty MVC project but when trying to implement the same to existing one gives this issue.
// signalr js code for start hub and send receive notification var notificationHub = $.connection.notificationHub;
$.connection does not have a definition which should come from jquery.signalR-2.2.0.js
Any idea to solve this issue
i'm also developing a project with signalr and i guess also that this is a referencing problem.
Look at your code again, the line:
<script src="~/Scripts/jquery-2.2.3.min.js"></script>
and the line:
#Scripts.Render("~/bundles/jquery")
Here you are referencing your jQuery libraries 2 times. I would refactor the referencing and keep it only in one place and before the signalr code. Because signalr depends on jquery library. I suggest you to go with this hierarchy:
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/jqueryval")
#Scripts.Render("~/bundles/bootstrap")
#Scripts.Render("~/bundles/jqueryTables")
<script src="~/signalr/hubs"></script>
#RenderSection("scripts", required: false)
Hope it helps. Let me know it you have any question!!
Related
I'm building an app with an Express/Node backend and Angular JS for the front end. Kinda new to using this stack and I'm having a hard time receiving the data in an Angular Service + Controller
Backend: Users can authenticate with Facebook using Passport JS that attaches a users object to every request. I opened up an endpoint that checks if req.user exists, like so:
app.get('/checklogin', function(req,res,next){
if(req.user){
console.log("we found a user!!!");
console.log("name:" + req.user.displayName);
console.log("user id" + req.user.id);
return res.status(201).json(req.user);
} else {
console.log("there is no user logged in");
}
});
If the req.user exists, so the user is authenticated, it sends a JSON response.
What I'm trying to do is in Angular is sending a http.get to this /checklogin endpoint and handle the response. I want to bind to the scope if the user is authenticated (req.user exists or not), and if so bind displayName and Id as well, and hide show nav links and pages.
But my setup in Angular hits the API endpoint but doesnt seem to receive any data????:
.service("Login", function($http){
this.isLoggedIn = function(){
return $http.get("/checklogin")
.then(function(response){
console.log(response)
return response;
}, function(response){
console.log("failed to check login");
});
};
})
.controller("mainController", function($scope, Login){
Login.isLoggedIn()
.then(function(doc){
console.log(doc);
console.log(doc.data);
}, function(response){
alert(response);
});
})
the console.log(doc) and console.log(doc.data) don't log anything...... What am I doing wrong here?????
More info: the mainController is loaded in the index.html file:
<html lang="en" ng-app="myApp" ng-controller="mainController">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--load jQuery-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!--load Bootstrap JS-->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!--load Angular JS-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-route.js"></script>
<!--latest compiled and minified Bootstap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--link custom CSS file-->
<link rel="stylesheet" type="text/css" href="/css/style.css">
<script src="/js/app.js"></script>
</head>
<body>
<!-- NAVBAR ================== ---->
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="nav-header">
<a class="navbar-brand" href="#/">Votely</a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home</li>
<li>Sign in with Facebook</li>
<li>Sign Out</li>
</ul>
</div>
</div>
</nav>
<!-- Dynamically render templates Angular JS -->
<div class="container" ng-view>
</div>
</body>
Any help much appreciated, thanks!
You should return a promise from service if you are using then inside controller i.e.
.service("Login", function($http){
this.isLoggedIn = function(){
return $http.get("/checklogin");
};
.isLoggedIn function in your service should looks like this:
this.isLoggedIn = function(){
return $http.get("/checklogin");
}
thanks, I got it working now. I was using the browser in Cloud 9 IDE and the server was sending a 503 response, not sure why. It works now in Chrome and Firefox etc. after I set the service to return a promise!
I am following this tutorial to integrate SignalR to my project http://venkatbaggu.com/signalr-database-update-notifications-asp-net-mvc-usiing-sql-dependency/
So basically this is my View where I want to show my table.
#{
ViewBag.Title = "PatientInfo";
}
<h2>PatientInfo</h2>
<h3>#ViewBag.pName</h3>
<h5>#ViewBag.glucoseT</h5>
#if (Session["LogedUserFirstname"] != null)
{
<text>
<p>Welcome #Session["LogedUserFirstname"].ToString()</p>
</text>
#Html.ActionLink("Log Out", "Logout", "Home")
<div class="row">
<div class="col-md-12">
<div id="messagesTable"></div>
</div>
</div>
<script src="/Scripts/jquery.signalR-2.2.0.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="/SignalR/Hubs"></script>
<script type="text/javascript">
$(function () {
// Declare a proxy to reference the hub.
var notifications = $.connection.dataHub;
//debugger;
// Create a function that the hub can call to broadcast messages.
notifications.client.updateMessages = function () {
getAllMessages()
};
// Start the connection.
$.connection.hub.start().done(function () {
alert("connection started")
getAllMessages();
}).fail(function (e) {
alert(e);
});
});
function getAllMessages() {
var tbl = $('#messagesTable');
$.ajax({
url: '/home/GetMessages',
contentType: 'application/html ; charset:utf-8',
type: 'GET',
dataType: 'html'
}).success(function (result) {
tbl.empty().append(result);
}).error(function () {
});
}
</script>
}
My project is running but the table doesn't appear at all. I started by pasting the view because I believe that the scripts are not executed in the first place; The Alert Message is NOT being shown even if I try to add one directly after
$(function () {
alert("I am an alert box!");
This is my Layout.cshtml file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#ViewBag.Title - My ASP.NET MVC Application</title>
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
#Styles.Render("~/Content/css")
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/DataTables/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
</div>
</header>
<div id="body">
#RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
#RenderBody()
</section>
</div>
<footer>
<div class="content-wrapper">
<div class="float-left">
<p>© #DateTime.Now.Year - My ASP.NET MVC Application</p>
</div>
</div>
</footer>
<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="SignalR/Hubs"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#p_table").dataTable();
});
</script>
#RenderSection("scripts", required: false)
</body>
</html>
I am using Visual Studio 2012, MVC4.
Please Help..
Make sure you have placed all your script tags from the view inside the scripts section of the view:
#section scripts {
... your <script> tags come here
}
The reason why your alerts don't work is because you have directly put them inside the body of the view which gets rendered at the #RenderBody() call of the Layout. But as you can see it's only at the end of this Layout that we have references to the scripts such as jQuery and signalr.
Now they will appear at the proper location: #RenderSection("scripts", required: false).
By the way use the console window in your webbrowser to see potential script errors you might have. For example in your case it would display that jQuery is not defined error.
Another remark: don't include signalR script twice: right now you seem to have included jquery.signalR-2.2.0.js in your view and jquery.signalR-2.2.0.min.js in your Layout.
I'm building a sample application with YouTube API (v3), that would provide a list of videos based on a search term. The concept is to populate the page using the data from the response.
I have used the client library documented in v3 to access the API, and send my request, however I don't know how to properly navigate through the data provided in the response in order to display the desired elements. The code below shows my script, where I am trying to access and list the title of the videos in the response:
$(function () {
//FUNCTION TO COLLECT QUERY TERM FROM SEARCH FORM
var $searchField = $('#search-text');
$('#mainSearch'). on ('submit', function(e){
e.preventDefault();
if ($searchField.val() !== '') { //IF SEARCH FORM IS NOT EMPTY
var $searchQuery = $searchField.val()+ ' parody'; //PREPARE SEARCH QUERY
makeRequest($searchQuery); //PASS SEARCH QUERY TO REQUEST FUNCTION
}
else {
$searchField.focus(); //ADD ERROR CLASS HERE
$searchField.blur(function (e){
//REMOVE ERROR CLASS HERE
});
}
});
function makeRequest(query){
var request = gapi.client.youtube.search.list({
part: 'snippet',
q: query
});
$('.content').empty();
request.execute(parseResponse);
}
function parseResponse(data) {
$.each(data, function (i, items){
var $infoDiv = $('<div></div>');
$infoDiv.append('<p>'+ items.snippet.title +'</p>');
$('.content').append($infoDiv);
});
}
});
//LOAD API CLIENT
function initClient() {
gapi.client.load('youtube', 'v3');
gapi.client.setApiKey('AIzaSyARVmOp3tBIA3ZgW6z4DK_-1sMJwulPvps');
}
However my page does get not populated with any data, and I get this error in my console:
Uncaught TypeError: Cannot read property 'title' of undefined
And here is the markup for my page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Parrdy Template</title>
<!--
<Bootstrap></Bootstrap>-->
<link href="stylesheets/bootstrap.min.css" rel="stylesheet"/>
<link href="stylesheets/style.min.css" rel="stylesheet"/>
<!--
<HTML5>Shim and Respond.js IE8 support of HTML5 elements and media queries </HTML5>--><!--
<WARNING>
<Respond class="js">doesn't work if you view the page via file:// </Respond>
</WARNING>--><!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->
</head>
<body>
<div class="container">
<div class="header">
<img src="/images/Logo1_mod.png" width="200">
<form role="form" id= "mainSearch" class="navbar-form navbar-right pull-right">
<div class="form-group">
<input type="text" id="search-text" placeholder="Search" class="form-control">
</div>
<button type="submit" id="vid-search" class="btn btn-sm btn-warning">Search</button>
</form>
</div>
{{{body}}}
<div class="footer">
<ul class="nav nav-pills pull-left">
<li><a class="customcolor" href="#">About</a></li>
<li><a class="customcolor" href="#">Contact Us</a></li>
</ul>
</div>
</div><!--container ends-->
<!--
<jQuery>(necessary for Bootstrap's JavaScript plugins) </jQuery>-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><!--
<Include>all compiled plugins (below), or include individual files as needed</Include>-->
<script src="js/bootstrap.min.js"></script>
<script src="js/core1.1.js"></script>
<script src="https://apis.google.com/js/client.js?onload=initClient" type="text/javascript">
</script>
</body>
</html>
Any help on how to access the elements correctly from a YouTube API response would be appreciated. Thanks.
The first thing you'll want to keep in mind is that the stuff you are after is nested in the response as data so you need to access 'response.data' and within that data is an array of items. You'll want to access the first array with items[0] now you can grab the id from here or go deeper with .snippet or .statistic
get(url)
.then(response => {
id: response.DATA.items[0].id
title: response.DATA.items[0].snippet.title
}
.catch(
error => {console.log(error)}
You should change your loop like this:
$.each(data.videos, function (i, items){
var $infoDiv = $('<div></div>');
$infoDiv.append('<p>'+ items.snippet.title +'</p>');
$('.content').append($infoDiv);
});
I apologize ahead of time if this is something stupid like a semi-colon, but I'm having a hard time getting angular to recognize my controller (im a newbie to angular).
I get an error, Image Controller is undefined.
Notes: I am using the angular file upload plugin and this is a web api 2.0 application.
I have 2 Javascript files UniqueAPIStart, UniqueAPIImages
UniqueAPIStart(Fixed):
var UniqueAPI = angular.module('UniqueAPI', ['angularFileUpload']);
UniqueAPIImages(Fixed):
UniqueAPI.controller('ImageController', ['$scope', '$upload', function ($scope, $upload) {
$scope.$watch('myFiles', function() {
for (var i = 0; i < $scope.myFiles.length; i++) {
var file = $scope.myFiles[i];
$scope.upload = $upload.upload({
url: '/api/AdminImages', // upload.php script, node.js route, or servlet url
//method: 'POST' or 'PUT',
//headers: {'Authorization': 'xxx'}, // only for html5
//withCredentials: true,
data: { myObj: $scope.myModelObj },
file: file, // single file or a list of files. list is only for html5
//fileName: 'doc.jpg' or ['1.jpg', '2.jpg', ...] // to modify the name of the file(s)
//fileFormDataName: myFile, // file formData name ('Content-Disposition'), server side request form name
// could be a list of names for multiple files (html5). Default is 'file'
//formDataAppender: function(formData, key, val){} // customize how data is added to the formData.
// See #40#issuecomment-28612000 for sample code
}).progress(function(evt) {
console.log('progress: ' + parseInt(100.0 * evt.loaded / evt.total) + '% file :' + evt.config.file.name);
}).success(function(data, status, headers, config) {
// file is uploaded successfully
alert('file ' + config.file.name + 'is uploaded successfully. Response: ' + data);
}).error(function (data, status) {
alert(data.error);
});
//.then(success, error, progress); // returns a promise that does NOT have progress/abort/xhr functions
//.xhr(function(xhr){xhr.upload.addEventListener(...)}) // access or attach event listeners to
//the underlying XMLHttpRequest
}
/* alternative way of uploading, send the file binary with the file's content-type.
Could be used to upload files to CouchDB, imgur, etc... html5 FileReader is needed.
It could also be used to monitor the progress of a normal http post/put request.
Note that the whole file will be loaded in browser first so large files could crash the browser.
You should verify the file size before uploading with $upload.http().
*/
// $scope.upload = $upload.http({...}) // See 88#issuecomment-31366487 for sample code.
});
}]);
And then my cshtml:
#section scripts
{
<script type="text/javascript" src ="/Scripts/API/ImageController.js"></script>
}
<div class="container" ng-app="UniqueAPI">
<div class="row">
<div class="col-md-4" ng-controller="ImageController">
<form action="javascript:void(0);">
<div class="form-group">
<label for="imgDescription">Email address</label>
<input type="text" class="form-control" id="imgDescription" placeholder="Image Description">
<button ng-file-select ng-model="files" multiple="true">Attach Any File</button>
<div ng-file-drop ng-model="files" class="drop-box"
drag-over-class="{accept:'dragover', reject:'dragover-err', delay:100}"
multiple="true" allow-dir="true" accept="image/*">
Drop Images here
</div>
</div>
</form>
</div>
</div>
</div>
LayoutFile:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
#Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { #class = "navbar-brand" })
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li>#Html.ActionLink("Home", "Index", "Home", new { area = "" }, null)</li>
<li>#Html.ActionLink("API", "Index", "Help", new { area = "" }, null)</li>
</ul>
</div>
</div>
</div>
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.5/angular.min.js"></script>
<script type="text/javascript" src="~/Scripts/angular-file-upload-all.js"></script>
<script type="text/javascript" src="~/Scripts/angular-file-upload-shim.js"></script>
<script type="text/javascript" src="~/Scripts/angular-file-upload.js"></script>
<script type="text/javascript" src="~/Scripts/API/UniqueAPIStart.js"></script>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
First of all I could't see you importing the required libraries:
<script src="https://angular-file-upload.appspot.com/js/angular-file-upload-shim.js"></script>
<script src="https://angular-file-upload.appspot.com/js/angular-file-upload.js"></script>
and. You are creating the module twice:
var UniqueAPI = angular.module('UniqueAPI', []);
angular.module('UniqueAPI', ['angularFileUpload']);
It should be something like this
var UniqueAPI = angular.module('UniqueAPI', ['angularFileUpload']);
I am trying to load a web app on android using WebView and the JavaScript in my html files is not executing properly.
I create the WebView and load the home page like this:
web = new WebView(this);
web.getSettings().setJavaScriptEnabled(true);
web.getSettings().setDomStorageEnabled(true);
JavaScriptInterface jsInterface = new JavaScriptInterface(web, this);
web.setWebChromeClient(new WebChromeClient());
web.addJavascriptInterface(jsInterface, "JSInterface");
web.loadUrl("file:///android_asset/web/home.html");
Once the home page is loaded I click a link to another local page, register.html, where I have a JavaScript function in the head
<script type="text/javascript">
function doRegister() {
var user = document.getElementById("username").value;
var email = document.getElementById("email").value;
var pass = document.getElementById("password").value;
var confPass = document.getElementById("confirmPassword").value;
var message = "";
if (user.length < 6 || user.length > 16) {
message = message + "Username must be between 6 and 16 characters.<br>";
}
if (pass.length < 8 || pass.length > 16) {
message = message + "Password must be between 8 and 16 characters.<br>";
}
if (pass !== confPass) {
message = message + "Password and confirm password do not match.<br>";
}
if (email.indexOf("#") === -1) {
message = message + "Email address is invalid.<br>";
}
if (message === "") {
message = JSInterface.register(user, email, pass);
if (message === "") {
window.location.href = "home.html";
}
}
document.getElementById("message").style.color="red";
document.getElementById("message").innerHTML=message;
}
</script>
This function is called by a buttons onclick like so
<input id="register" type="button" value="Submit" data-role="button" data-inline="true" data-theme="b" onclick="doRegister()" />
It appears that when the button is clicked it is trying to call doRegister() on home.html. When I click the button i get Uncaught ReferenceError: doRegister is not defined at file:///android_asset/web/home.html:1
To confirm this, I added a JavaScript function to home.html that just displays an alert and this did indeed execute when I clicked the button in register.html
Any help on this problem would be greatly appreciated. Thanks.
Update: Forgot to mention, the JavaScript executes fine in the eclipse web browser as well as firefox. Here is my home.html
<!doctype html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css">
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="pagination/jquery.simplePagination.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript>
function doSubmit() {
alert("test");
}
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-theme="b">
<h1>Home</h1>
</div>
<div data-role="content">
<ul data-role=listview>
<li> <a href = professors.html> Browse Professors </a> </li>
<li> <a> Search Professors </a> </li>
<li> <a> Browse Course </a> </li>
<li> <a> Search Course </a> </li>
<li> <a href = login.html> Login </a> </li>
<li> <a href = register.html> Register </a> </li>
</ul>
</div>
<div data-role="footer">
<h4>footer</h4>
</div>
</div>
</body>
</html>
Basically webview is not able to find the function doRegister() , sine that is in a different html page register.html, which is not loaded. Try this
1. Move the js portion in register.html to some .js file say func.js
2. Then refer to func.js from your home.html as
<script type="text/javascript" src="func.js"></script>
3. once page is loaded, clicking on the button should call doRegister()