How to get piece of information from url given - javascript

Hi i have this html code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link type="text/css" rel="stylesheet" href="/style.css"/>
<link rel="icon" href="">
<title>Submit</title>
</head>
<body>
<script>
function show_alert() {
alert("Animes score is: ");
}
</script>
<div class=střed>
<form>
<div id="one"><input style="width: 500px" type="text" name="url" value="Enter myanimelist URL" onfocus="if (this.value=='Enter myanimelist URL') this.value='';"/></div>
<div id="two"><input type="image" onclick="show_alert();" name="submit" src="/Button1.png" border="0" alt="Submit" />
</div>
</form>
</div>
</body>
</html>
Now i want to get from user's url (for example: https://myanimelist.net/anime/5114/Fullmetal_Alchemist__Brotherhood) the anime's score from page's html (this part: <span itemprop="ratingValue">9.26</span> - so in this case it would be 9.26) and show it in alert box (doesn't need to be alert box thought, just somehow show it to user). Thanks for any help.

Related

Separate the user input with semicolon javascript html

I am not javascript html php expert but I would like to study I just wanted to ask for advice Is it possible to make the user can enter single or Multiple input of email in textbox separated by ; using javascript just like in outlook,yahoo,email?
<!DOCTYPE html>
<html>
<body>
<form action="/action_page.php">
email <input type="text" name="FirstName" value="Mickey"><br>
</form>
</body>
</html>
Just Enter the text and click in the text box emails are separated
<html lang="en">
<head>
<title>Jquery - input tags plugin example</title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-tagsinput/1.3.6/jquery.tagsinput.min.js"></script>
</head>
<body style="background: #337AB7">
<div style="width: 500px; margin: 0px auto;">
<h2 style="font-family:cursive;">Jquery - input tags plugin example</h2>
<input name="tags" id="input-tags" style="width:500px !important" />
</div>
<script type="text/javascript">
$('#input-tags').tagsInput();
</script>
</body>
</html>

I dont get a response from Google Books API?

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.

Thymeleaf + HTML5 - why can't I access my javascripts?

I have an Spring MCV 4 + HTML5 + Thymeleaf based application I can't seem to use javascript on pages.
The webapp structure is:
webapp
assets
css
img
js
i18n
messages.properties
WEB-INF
html
fragments
common.html
default.html
footer.html
header.html
login.html // exclusively for ../login.html
sidebar.html
home
welcomeSignedIn.html
client
home.html
create.html
In my login page, since it is a single page, with only a picture in the background, I have a piece of JS that works flawlessly:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/login :: loginFragment">
<meta charset="UTF-8" />
<title><th:text="#{app.name}"></label></th:text>
</head>
<body>
<div class="login-container animated fadeInDown">
<div class="loginbox bg-white">
<form th:action="#{/login}" method="post">
<div class="loginbox-title">SIGN IN</div>
<div class="loginbox-textbox">
<input type="text" id="ssoId" name="ssoId" class="form-control" placeholder="Username" />
</div>
<div class="loginbox-textbox">
<input type="password" id="password" name="password" class="form-control" placeholder="Password" />
</div>
<div class="loginbox-forgot">
Forgot Password?
</div>
<div class="loginbox-submit">
<input type="submit" class="btn btn-primary btn-block" value="Login"/>
</div>
</form>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#ssoId').focus();
});
</script>
</body>
</html>
Login page has its own fragment, because it's a single, no menus, no sidebar page. All other are.
For may default templating, I have a file called fragments/default.html reponsible for pages organization.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
<head th:include="fragments/common :: commonFragment">
<meta charset="UTF-8" />
<title th:text="#{app.name}"> </title>
</head>
<body>
<div th:id="defaultFragment" th:fragment="defaultFragment">
<div th:replace="fragments/header :: headerFragment"></div>
<div class="main-container container-fluid">
<div class="page-container">
<div th:replace="fragments/sidebar :: sidebarFragment"></div>
<div class="page-content">
<div class="page-body">
<div layout:fragment="content"></div>
</div>
</div>
</div>
</div>
<div th:replace="fragments/footer :: footerFragment"></div>
</div>
</body>
</html>
So that, for every page, I get included the following links and scripts from fragments/common.html:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:id="commonFragment" th:fragment="commonFragment">
<link rel="icon" th:href="#{/assets/img/favicon.png}" type="image/x-icon" />
<link rel="stylesheet" th:href="#{/assets/css/bootstrap.min.css}" />
<link rel="stylesheet" th:href="#{/assets/css/font-awesome.min.css}"/>
<link rel="stylesheet" th:href="#{/assets/css/beyond.min.css}"/>
<link rel="stylesheet" th:href="#{/assets/css/demo.min.css}" />
<link rel="stylesheet" th:href="#{/assets/css/animate.min.css}" />
<link rel="stylesheet" th:href="#{/assets/css/skins/darkred.min.css}" />
<link rel="stylesheet" th:href="#{http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,600,700,300}" />
<!--Skin Script: Place this script in head to load scripts for skins and rtl support-->
<script type="text/javascript" src="/assets/js/skins.min.js" th:src="#{/assets/js/skins.min.js}"></script>
<script type="text/javascript" src="/assets/js/jquery-2.0.3.min.js" th:src="#{/assets/js/jquery-2.0.3.min.js}"></script>
<script type="text/javascript" src="/assets/js/bootstrap.min.js" th:src="#{/assets/js/bootstrap.min.js}"></script>
<script type="text/javascript" src="/assets/js/slimscroll/jquery.slimscroll.min.js" th:src="#{/assets/js/slimscroll/jquery.slimscroll.min.js}"></script>
<script type="text/javascript" src="/assets/js/beyond.js" th:src="#{/assets/js/beyond.js}"></script>
<script type="text/javascript" src="/assets/js/beyond.min.js" th:src="#{/assets/js/beyond.min.js}"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div class="container" />
</body>
</html>
My fragments/header.html is defined as:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="fragments/common :: commonFragment">
</head>
<body>
<div th:id="headerFragment" th:fragment="headerFragment">
// content
</div>
</body>
</html>
fragments/sidebar.html is very similar to `fragments/header.html, just different classes and content.
So, on every page I have on my application, I do something like this:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="fragments/default" xmlns:s="http://www.springframework.org/tags">
<head >
<title th:text="#{view.index.title}">Welcome!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div layout:fragment="content">
// content
</div>
</body
</html>
I'm sure it's something quite stupid, but I'm failing to see why can't I get javascript working on my pages, even for something quite as simple as:
<script type="javascript" >
$(function () {
alert('hello');
});
</script>
And, what's bothering (a lot!) is that if I on the browser something like:
localhost:8080/appName/assets/js/bootstrap.min.js
It will show the contents of the file.
What am I missing here?
Thanks for the input, guys! I got it working. What I did is placing the JavaScript section inside the <div layout:fragment="content">*HERE*</script> area, like on the example bellow.
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="fragments/default" xmlns:s="http://www.springframework.org/tags">
<head >
<title th:text="#{view.index.title}">Welcome!</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div layout:fragment="content">
<script type="text/javascript" >
*JavaScript area*
</script>
// content
</div>
</body
</html>
Hope this will save someone's precious time!
I think you have problems because there are 2 jquery files included to your fragments/common.html (check it via Firebug or something like that):
<head th:id="commonFragment" th:fragment="commonFragment">
...
<script type="text/javascript" src="/assets/js/jquery-2.0.3.min.js" th:src="#{/assets/js/jquery-2.0.3.min.js}"></script>
...
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
Try to remove one of the definitions.

How can i enter an image url and get an image preview

$('[name="thumbnail"]').on('change', function() {
$('img.preview').prop('src', this.value);
});
<input name="thumbnail" placeholder="Post image URL here" />
<br />
<img src="http://webspace.webring.com/people/jv/vladilyich/preview.gif" class="preview" />
i'm looking for something to work like the js fiddle example.
but only i want it to work if a user were to enter img5.jpg for example, an image saved on desktop in the same directory as the index.html folder
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Image preview</title>
<link rel="stylesheet" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('#imgName').bind('input', function() {
$('#imageHolder').attr('src', $(this).val()); //concatinate path if required
});
});
</script>
</head>
<body>
<input type="text" name="" id="imgName" value="" placeholder="Input image name"><br><br>
<img name="imageHolder" id="imageHolder" src="http://i.imgur.com/zAyt4lX.jpg">
</body>
</html>

Jquery printing out a string reorganizes website

I've searched on google but didn't find answer.
Here is jsfiddle so you can see it yourself: http://jsfiddle.net/ohk6ho8a/
When you type text into the line and submit 1 div moves under another.
Any idea how to fix this?
HTML file: - other files at jsFiddle (it's pain to copy paste code here)
<!DOCTYPE html>
<html>
<head>
<title>Text Game</title>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="gameScript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
</head>
<body>
<p id="help" style="display:none;">This is help</p>
<div id="divWrapper">
<div id="console">
<div id="placeholder"></div>
</div>
<div id="menu">
<div id="placeholder2"></div>
</div>
</div>
<form onsubmit="return false;" autocomplete="off">
<center><input type="text" id="command_line" autofocus="autofocus" size="50"></input><center>
<center><input type="submit" id="submit" size="50" ></input><center>
</form>
</body>
</html>
On your #console and #menu remove inline-block and change them both to float:left;
updated fiddle: http://jsfiddle.net/ohk6ho8a/1/
float:left;
instead of
display:inline-block;
You should float the two divs (float: left for both) and apply a clearfix style on the parent.

Categories