I am trying to make a Simple web app that can Search for books details using the Google Books API. The Code seems fine, but i dont understand what am I missing?
Here is the Code for Reference.:-
$(document).ready(function(){
$("#myform").submit(function(){
var search = $("#books").val();
if(search=='')
{
alert("Please enter something in the field");
}
else{
var url='';
var img='';
var title='';
var author='';
console.log("Search for "+search);
$.get("https://www.googleapis.com/books/v1/volumes?q="+search,function(response){
for(i=0;i<response.items.length;i++){
title=$('<h5>'+response.items[i].volumeInfo.title + '</h5>');
author=$('<h5>'+response.items[i].volumeInfo.authors + '</h5>');
img=$('<img><a href=' + response.items[i].volumeInfo.infoLink + '><button>Read More</button></a>');
url=response.items[i].volumeInfo.imageLinks.thumbnail;
img.attr('src',url);
title.appendTo("#result");
author.appendTo("#result");
img.appendTo("#result");
}
});
}
});
return false;
});
Here is the HTML Code for Reference:
<head>
<meta charset="UTF-8">
<title>Your Personal Library</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Antic'>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="style.css">
</head>
<body bgcolor="#232733">
<div align="center">
<div class="login">
<h1>The School Bag</h1>
<form id="myform">
<input type="search" id="books" placeholder="Type the book name" required="required" />
<button class="btn btn-primary btn-block btn-large" >Submit</button>
</form>
</div>
<div id="result">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<script src="myscript.js"></script>
<!--<script src="scripts/googlebooks.js"></script>-->
<script src='https://use.edgefonts.net/amaranth.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script>
</body>
</html>
Everything is running fine, except I cannot log any response to the Console. I am not getting any response In fact. Please help. i am stuck.
The page reloads every time you submit your form, that's why you're not getting any results back.
$("#myform").submit(function(e){
e.preventDefault()
Stop it from reloading with preventDefault() and you should be good.
Related
I am relatively new to javascript and Im trying to create a banner that will display if textbox is empty. But it doesn't show. How can I make an alert using bootstrap banners?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
function validateForm() {
var uname = document.getElementById("uname").value;
if (uname == ""){
bootstrap_alert.warning = function(message) {
$('#alert_placeholder').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><span>'+message+'</span></div>')
}
$('#clickme').on('click', function() {
bootstrap_alert.warning('Please enter your name');
});
return false;
}
}
</script>
</head>
<body>
Name: <input type: "text" name="uname" id="uname" />
<input type = "button" id = "clickme" value="Submit"/>
<div id = "alert_placeholder"></div>
</body>
</html>
Well there are several things that you should consider while writing JS code:
Always include $(document).ready(function(){}); if you want your Jquery
code to wait for html body to load. and once it is loaded you want to
use your JS code.
Another thing that you have created a validateform() which is never calling from your code and your main code exists within that function.
I've modified your code to work perfectly
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script>
$( document ).ready(function() {
$('#clickme').on('click', function() {
bootstrap_alert('Please enter your name');
});
bootstrap_alert = function(message) {
var uname=$("#uname").val();
if (uname.length==0){
$('#alert_placeholder').html('<div class="alert alert-danger alert-dismissable"><button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button><span>'+message+'</span></div>')
}
else{
$('#alert_placeholder').html('');
}
}
});
</script>
</head>
<body>
Name: <input type="text" name="uname" id="uname" />
<input type = "button" id = "clickme" value="Submit"/>
<div id = "alert_placeholder"></div>
</body>
</html>
Let me know.. if you need any help in this regard.. I would be gald to help you. Thanks
Basically, I am creating a list item that generated by jQuery script. I would like to have each list item with an icon chosen from font awesome.
My JS script to create a list and my HTML markup are as below:
<script type="text/javascript">
jQuery(document).ready(function() {
var menuID = 0;
var itemCount = 1;
$('.add-new-id').click(function() {
menuID = $('.menu-id').val();
$('.menu-id, .add-new-id').attr('disabled', 'disabled');
return false;
});
$('#new-parent').submit(function() {
var newParent = $('input.new-parent').val();
$('ol.example:last').append('<li>' + newParent + '<button class="btn btn-default" role="iconpicker"></button></li>');
itemCount++;
$('input.new-parent').val('');
return false;
});
$('body').on('click', 'button[role="iconpicker"]', function() {
$(this).iconpicker();
});
});
</script>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/elusive-icons-2.0.0/css/elusive-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/font-awesome-4.2.0/css/font-awesome.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/ionicons-1.5.2/css/ionicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/map-icons-2.1.0/css/map-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/material-design-1.1.1/css/material-design-iconic-font.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/octicons-2.1.2/css/octicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/typicons-2.0.6/css/typicons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/icon-fonts/weather-icons-1.2.0/css/weather-icons.min.css"/>
<link rel="stylesheet"
href="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/css/bootstrap-iconpicker.min.css"/>
<title>Menu</title>
</head>
<body>
<div class="row">
<div class="container">
<div class="col-sm-12">
<form action="" id="new-parent">
<div class="input-group col-sm-4">
<input type="text" class="form-control new-parent" placeholder="Add parent menu">
<div class="input-group-btn">
<button class="btn btn-default add-new-parent" type="submit">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div>
</div>
</form>
<h4>Available Forms:</h4>
<ol class="example">
</ol>
<button class="btn btn-success" type="submit">Save</button>
</div>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/jquery-sortable-min.js"></script>
<!-- Icon picker script-->
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/iconset/iconset-all.min.js"></script>
<script type="text/javascript"
src="bootstrap-iconpicker-1.7.0/bootstrap-iconpicker-1.7.0/bootstrap-iconpicker/js/bootstrap-iconpicker.js"></script>
<!-- end script-->
</body>
</html>
For each list item icon, I would like to use Bootstrap-Iconpicker from this site. However, it does not work fine for each generated list item as you can see from screen shot and on my site.
Popup Icon Picker
By clicking on left and right arrow, or typing in text box, it does not work at all.
Please kindly test it on my demo site:
I could not find to any way to figure it out.
Please kindly help, your suggestion and solution are very much appreciate, thanks.
Hey guys ive been trying to use routing, still new to angular though :( I have the first page already made, but am trying to make it when you click enter the next page appears on top of the current page (so basically a new page). The reason I want it to be all 1 page is so I can transfer the data from the first page onto the second page, however I can't seem to get it to load the next page... Here's my html and js so far,, not sure where im going wrong -_-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/kandi.css">
</head>
<body data-ng-app="nameBox" class="ng-scope">
<ng-view></ng-view>
<section class="frontPageBox">
<div data-ng-controller="appearCntrl">
<form action="" method="">
<input type="text" data-ng-bind="name" data-ng-model="name" placeholder="Your Name..." id="name-input">
<a type="button" class="button" href="#/kandi2" style="text-decoration:none;color:#ccc;">Enter</a>
</form>
<p style="color:#999; font-size: 1.1em;">{{"Welcome " + name}}</p>
</div>
</section>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript">
var app = angular.module("nameBox", ["ngRoute"]);
app.config(function($routeProvider) {
$routeProvider
.when("/kandi2", {
templateUrl : "kandi2.html"
});
});
app.controller("appearCntrl", function($scope){
$scope.name = "";
$scope.data = [];
$scope.data.push(name);
});
</script>
</body>
</html>
The problem is because of the ng-view tag
<ng-view></ng-view>
Gives an <!-- ngView: undefined --> element in the DOM, there is no place to attach the view.
You could write something like:
<div ng-view></div>
Then it should work.
Hello i am using html 5 app cache to cache some files for offline use.
I am also using HTML 5 navigator online, so when when there is no internet the website redirects the user to another page.
The problem is that once i cached my files, turn off my internet, once i hit reload button or through address bar , it pops infinite tabs until it goes offline, and i only need 1 tab :)
Login.php
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-glyphicons.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<title>Online Drawing for Electricians</title>
</head>
<body>
<div class="jumbotron">
<div class="container text-center">
<h1>Online Drawing for Electricians</h1>
<div class="container">
<form class="form-signin" method="post">
<h2 class="form-signin-heading">(Online)Please login in</h2>
<label for="inputtext" class="sr-only">Username</label>
<input name="username" type="text" id="inputtext" class="form-control" placeholder="Username" required autofocus>
<label for="inputPassword" class="sr-only">Password</label>
<input name="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
</form>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery.js"></script>
<script>
if (navigator.onLine) {
} else {
window.open("http://www.lifeofaris.se/loginjs.php");
}
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Loginjs.php (alternative page while offline)
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" type="text/css" href="css/theme.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap-glyphicons.css">
<link rel="stylesheet" type="text/css" href="css/login.css">
<title>Online Drawing for Electricians</title>
</head>
<body>
<div class="jumbotron">
<div class="container text-center">
<h1>Online Drawing for Electricians</h1>
<div class="container">
<h2 class="form-signin-heading">(Offline)Please login in</h2>
<form class="form-signin" method="post">
<input type="text" id="username" class="form-control">
<input type="password" id="password" class="form-control">
<input type="button" button class="btn btn-lg btn-primary btn-block"value="Log in" onClick="clicked()">
</form>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/login.js"</script>
<script src="js/jquery.js"></script>
<script>
if (navigator.onLine) {
} else {
window.open("http://www.lifeofaris.se/loginjs.php");
}
</script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
change
if (navigator.onLine) {
} else {
window.open("http://www.lifeofaris.se/loginjs.php");
}
to:
if (!navigator.onLine) {
window.location ='http://www.lifeofaris.se/loginjs.php'; //edit, should be '=', not a func
}
and in the second page (offline page), remove the javascript:
if (navigator.onLine) {
} else {
window.open("http://www.lifeofaris.se/loginjs.php");
}
No guarantees, but it should work.
Edit: In the second page (offline page), you're missing a >:
<script src="/js/login.js"</script> Should be:
<script src="/js/login.js"></script>
Edit (2):
The reason for the original 'Spamming' of pages was caused by the repeat of the following snippet:
if (navigator.onLine) {
} else {
window.open("http://www.lifeofaris.se/loginjs.php");
}
In the second page (offline page). This is because when you are redirected to the offline page, the online page's JS has worked out that you are offline and opened a new page. Now you have this offline page opened, you still have the code to check if you are offline, and since you are it will open a new offline page.
Each of these new offline pages contains the same code that checks if you are offline, and since you are looking at the offline page, you are obviously offline, and so will keep on opening new pages, that is why I said to remove the snippet from the 'offline' page.
Im trying something simple below. I want to accept user input for their name click a button save it and when the app loads a second time it displays the name.
Where am I going wrong below?
Do i need to put this code block somewhere else?
<script type="text/javascript">
$(function(){
$('#saveButton').click(function() {
window.localStorage.setItem("name", $('#name').val());
});
$('#newpage').live('pageshow', function() {
var personName = window.localStorage.getItem("name");
if(personName.length>0){
$('#name').val(personName);
}
});
});
</script>
Full html file
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; 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, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="jquery.mobile-1.2.0.css" />
<script type="text/javascript" src="jquery-1.8.2.js"></script>
<script type="text/javascript" src="jquery.mobile-1.2.0.js"></script>
<script type="text/javascript">
$(function(){
$('#saveButton').click(function() {
window.localStorage.setItem("name", $('#name').val());
});
$('#newpage').live('pageshow', function() {
var personName = window.localStorage.getItem("name");
if(personName.length>0){
$('#name').val(personName);
}
});
});
</script>
<title>Hello World</title>
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">
<h1>
Home Page</h1>
</div>
<div data-role="content">
hello Phone Gap and JQuery Mobile! new page
</div>
<div data-role="footer" data-position="fixed">
<h4>
footer</h4>
</div>
</div>
<div id="newpage" data-role="page">
<div data-role="header">
<h1>
new Page</h1>
</div>
<div data-role="content">
<label for="name">what is your name?</label>
<input id="name" type="text" name="name" value="" />
<a id="saveButton" href="" data-role="button">Save</a>
</div>
<div data-role="footer" data-position="fixed">
<h4>
footer</h4>
</div>
</div>
<script type="text/javascript" src="cordova-2.1.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
Yes, you need to place the button click event hookup in the pageinit event - they even specify this in the docs
$(document).on("pageinit","#newpage",function(){
$('#saveButton').click(function() {
localStorage.setItem("name", $('#name').val());
});
});
$(document).on('pageshow','#newpage', function() {
var personName = localStorage.getItem("name");
if(personName.length>0){
$('#name').val(personName);
}
});
For iOS device testing: In case your changes do not reflect on your device, make sure to touch your files before you deploy. Phonegap's default project template already does this, but their command does not work for me. See my answer: https://stackoverflow.com/a/12707386/561545
Small correction! .val should be .html. Please see the below code.
$('#my_name').html(personName);
add:
div id="my_name"