Okay, so I have the following HTML code:
<!DOCTYPE html>
<html>
<head>
<title>FastCast</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/footer.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
<link rel="shortcut icon" href="favicon1.ico"/>
</head>
<body>
<center>
<h1><b>Welcome to FastCast!</b></h1>
<div>
<p><font size="3">FastCast is a web application designed to gather weather information from various sources and display it in an easy-to-read format.</font></p>
<hr></hr>
<div id="picDiv">
<img id="imgDisp" src="logo.jpg">
</div>
<p><font size="6">Enter you location to get started.</font></p>
</div>
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" class="form-control" id="Location" placeholder="ex. Boston, MA">
</div>
</form>
<p><i>Press enter to continue.</i></p>
<a id="test">Click me</a>
<script>
window.onkeydown = function(event) {
if (event.keyCode === 13) {
var x = document.getElementById("Location").value;
var last2 = x.slice(-2);
alert(last2);
}
}
var i = 0;
$('a#test').click(function() {
i += 1;
$('a#test').popover({
trigger: 'manual',
placement: 'right',
content: function() {
var message = last2;
return message;
}
});
$('a#test').popover("show");
});
</script>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</center>
</body>
<div class="footer" id="footer">Developed in Twitter Bootstrap | Information from openweathermap.org | Tyler Jablonski, 2014+</div>
</html>
Towards the end I have a link that says "Click me". As you can see, in the script tags that follow, I have a bit of code that looks like this:
var i = 0;
$('a#test').click(function() {
i += 1;
$('a#test').popover({
trigger: 'manual',
placement: 'right',
content: function() {
var message = last2;
return message;
}
});
$('a#test').popover("show");
});
I was hoping that this code would active a popover when the link is clicked, but for some reason, it doesn't work. Nothing happens at all. Why is this, and how can I properly make a popover in Bootstrap and then have it display a JavaScript variable?
Thanks!
You are missing some things in your popover element <a> tag, have the format be something like this:
<a id="test" data-toggle="tooltip" rel="popover">Click Me</a>
Then it should work, for example: http://jsfiddle.net/52VtD/1983/
Related
I have seen many questions similar to this one on here but none of them seem to fix the problem I am having.
I keep getting the following error-
Uncaught SyntaxError: Unexpected token <
It says the error is in line one of the js file but the sources only shows a red line on line one of the html file.
Should also mention it is running on a go server.
Thanks a mil!
Here is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello, world!</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Sourcing jquery and ajax -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!--external script.js file-->
<script type = "text/JavaScript" src="ChatBot.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<style>
body {
padding-top: 65px;
padding-bottom: 100px;
}
</style>
</head>
<body>
<nav class="navbar fixed-top navbar-dark bg-dark">
<a class="navbar-brand" href="#">Eliza chat bot</a>
</nav>
<div class="container-fluid">
<ul class="list-group">
<div class="fixed-bottom bg-dark p-2">
<div class="container">
<div>
<ul class="list-group"></ul>
</div>
<form action="/Chat" method="GET">
<div class="form-group">
<input type="text" class="form-control" id="userInput" placeholder="Talk to eliza...">
</div>
</form>
</div>
</div>
</ul> </div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
</body>
</html>
and here is my js
const form = $("#userInput");
const listItem = $("#list-group");
//add the keypress function for when the user types an input for eliza to compute
$(document).ready(()=>{
form.keypress(function(event){
const keyCodes = {
ENTER : 13
}
let keyCode = event.keyCode;
//for enter
if(event.keyCode != keyCodes.ENTER){
return;
}
event.preventDefault();
const input = form.val();
form.val(" ");
listItem.append("<li class='list-group-item list-group-item-success'>"+"User : " + input + "</li>");
// GET/POST
const queryParams = {"userInput" : input }
$.get("/Chat", queryParams)
.done(function(response){
var nextListItem = "<li class='list-group-item list-group-item-info'>"+"ELiza : " + response + "</li>";
setTimeout(function(){
listItem.append(nextListItem)
}, 1000);//set timeout to give wait to response
}).fail(function(){
var nextListItem = "<li class='list-group-item list-group-item-danger' >Sorry I'm not home right now.</li>";
list.append(nextListItem);
});
});
});
Does your webserver happen to have a rule where if the requested resources is not found it will default to serving the index.html file? This is a popular configuration for Single Page Applications.
If that is the case, if the server can not find the js file requested it will serve the contents of the html file, which the browser will try parse as JavaScript. Since the first character on the first line of the html file is < you'll get a syntax error since that is not valid JavaScript.
Hay I have a problem with sorting divs from createElement function.
Problem:
I create divs from database-items which are align in row (latest item on the end)
What I want:
Display the Items in reversed direction. The latest item added to the database should appear as first item in the stream (like a newsstream on facebook).
Question:
How can I change just the direction the divs are loaded/created?
Further I thought about a technique to set an individual ID to each div created, for sorting them later by ID (Id could be ongoing numbers).
I found this one but it don´t works while i does not increment the ID-number: Javascript create divs with different ids
I know there are many Questions like this on stackoverflow, and I tried several before, with no success for my issue.
Check out my Code:
//create firebase reference
var dbRef = new Firebase("….com/");
var contactsRef = dbRef.child('contacts')
//load all contacts
contactsRef.on("child_added", function(snap) {
//console.log(snap.val())
snap.forEach(function(childSnapshot) {
var key = childSnapshot.key();
var childData = childSnapshot.val();
var divCount = 0;
//create divs from database-elements
var card = document.createElement('div');
card.id = 'div'+divCount;
card.setAttribute('class', 'linkprev');
document.body.appendChild(card);
var cardtitle = document.createElement('div');
cardtitle.setAttribute('class', 'cardtitle');
cardtitle.innerHTML = childData;
card.appendChild(cardtitle);
document.guteUrls.execute();
divCount++;
console.log(event);
//linkify plugin to convert div-elements (strings) to hyperlinks
$('div').linkify();
$('#sidebar').linkify({
target: "_blank"
});
});
});
//save contact
document.querySelector(".addValue").addEventListener("click", function( event ) {
event.preventDefault();
if( document.querySelector('#url').value != '' && document.querySelector('#url').value.charAt(0) == "h" && document.querySelector('#url').value.charAt(3) == "p"){
contactsRef.push({
name: document.querySelector('#url').value,})
contactForm.reset();}
else {
alert('Oops, seems like an error…');
}
}, false);
<!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">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>frontendpublishing-test</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.embed.ly/jquery.preview-0.3.2.css" />
<link href="css/flexboxgrid.min.css" rel="stylesheet">
<style type="text/css">
#contacts p,
#contacts p.lead{
margin: 0;
}
</style>
</head>
<body>
<div class="container">
<h1>Titel h1</h1>
<hr/>
<div class="row">
<div class="col-md-6">
<form method="post" name="contactForm">
<div class="form-group">
<input id="url" type="url" required name="url" placeholder="share a good article/blog/topic" class="input">
<button type="submit" class="btn btn-primary addValue">Submit</button>
</form>
<!-- <script>
$document.ready(function){
document.getElementsByClassName('linkified');
{console.log("linkified")};
};
</script>
-->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- Latest compiled and minified Bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Include Firebase Library -->
<script src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></script>
<!-- Contacts Store JavaScript -->
<script src="script.js"></script>
<script src="linkify.min.js"></script>
<script src="linkify-jquery.min.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script async src="https://guteurls.de/guteurls.js"
selector='.linkprev'
gif="http://loading.io/assets/img/default-loader.gif"
callback-a="(function(jqueryElement,url,$){console.log('url:'+url)})"
callback="(function($){console.log('finished')})"
init="(function($){console.log('JS will start to search URLs now')})"
></script>
</body>
</html>
Thanks for helping :)
since you are using jquery instead of
document.body.appendChild(card);
use
$('body').prepend($(card))
you can mark up the area with an id you want to add them into so that it does not insert into the top of your document like
$('#elementid').prepend($(card))
1.Why not query them descendent from db? :))
2.
card.childNodes.length
? card.insertBefore(cardtitle, card.childNodes[0])
: card.appenChild(cardtitle);
I am following a tutorial in Jasmine and serverless. The problem I am facing is around Javascript.
There is a public directory which has an index.html
Jasmine tests are in public/tests directory. It also has an index.html.
Following JS code (SpecHelper.js below) is suppose to find markups with class markup in public/index.html and copy that code in <body> of public/tests/index.html but it isn't doing so. I am unable to find the issue.
public/index.html
<body>
<div class='markup'>
<div class='view-container container'>
<div class='one-half column'>
<h3>Learn JS, one puzzle at a time</h3>
<a href='' class='button button-primary'>Start now!</a>
</div>
<div class='one-half column'>
<img src='/images/HeroImage.jpg'/>
</div>
</div>
</div>
</body>
SpecHelper.js
var fixture;
function loadFixture(path) {
var html;
jQuery.ajax({
url: '/index.html',
success: function(result) {
html = result;
},
async: false
});
return $.parseHTML(html);
}
function resetFixture() {
if (!fixture) {
var index = $('<div>').append(loadFixture('/index.html'));
var markup = index.find('div.markup');
fixture = $('<div class="fixture" style="display: none">').append(markup);
$('body').append(fixture.clone());
} else {
$('.fixture').replaceWith(fixture.clone());
}
}
beforeEach(function () {
resetFixture();
});
public/tests/index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jasmine Spec Runner v2.3.4</title>
<link rel="shortcut icon" type="image/png" href="lib/jasmine-2.3.4/jasmine_favicon.png">
<link rel="stylesheet" type="text/css" href="lib/jasmine-2.3.4/jasmine.css">
<!-- App Dependencies -->
<script src="lib/jquery-2.1.4.js"></script>
<script src="/vendor.js"></script>
<!-- Test libraries -->
<script type="text/javascript" src="lib/jasmine-2.3.4/jasmine.js"></script>
<script type="text/javascript" src="lib/jasmine-2.3.4/jasmine-html.js"></script>
<script type="text/javascript" src="lib/jasmine-2.3.4/boot.js"></script>
<!-- include source files here... -->
<script type="text/javascript" src="/app.js"></script>
<!-- include spec files here... -->
<script type="text/javascript" src="SpecHelper.js"></script>
<script type="text/javascript" src="app_spec.js"></script>
</head>
<body>
<!--This is always empty! -->
</body>
</html>
The test in Jasmine fails with following error
1 spec, 1 failure
Spec List | Failures
learnJS can show problem view
Expected 0 to equal 1.
Try this
fixture = $('<div class="fixture" style="display: none">').append(markup.html());
Then maybe
$('body').append(fixture.clone().html());
got it working..phew ... had to clear browser cache by going to developer tools, networks. I noticed that most files were being picked from memory. Right clicked and cleared cache and cookies.
I am using AngularJS to display results of my API (my first attempt at AngularJS), and want to use Jquery to add some effects to the page.
The problem is, Jquery seems to load before Angular has time to add images and other elements to the page. This prevents the JQuery effects from working I have been through numerous answers and tutorials, which center around the following solutions, none of which have worked for me.
Another approach suggested was to put the JQuery into "directives", but how would I put the contents of 3 large javascript libraries into an AngularJS directive? Sorry, I'm new in Javascript!
Here are the unsuccessful attempts:
$(window).load(function() {
// load JQuery plugins
$.getScript("./js/plugins.all.min.js");
});
<!-- after Angular is loaded !-->
angular.element(document).ready(function () {
// load JQuery plugins
$.getScript("./js/plugins.all.min.js");
});
<!-- after Jquery-main is loaded !-->
$(document).ready(function() {
// load JQuery plugins
$.getScript("./js/plugins.all.min.js");
});
Here are the relevant extracts of my code:
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>MyWebpage</title>
<!-- Template includes !-->
<link media="all" rel="stylesheet" href="./css/slider-revolution.css">
<link media="all" rel="stylesheet" href="./css/all.css">
<link media="all" rel="stylesheet" href="./css/style.css" class="color">
</head>
<body ng-app=“myApp">
<div ui-view></div>
</body>
<!-- Application Dependencies -->
<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/angular-ui-router/build/angular-ui-router.js"></script>
<!-- Template scripts !-->
<!-- Application Scripts -->
<script src="scripts/app.js"></script>
<script src="scripts/indexController.js"></script>
app.js :
...
state('index', {
url: '/',
templateUrl: '../views/indexView.html',
controller: 'IndexController as user'
...
indexView.js
...
<!— JQuery plugin gallery -->
<div class="gallery responsive">
<div class="mask" ng-if=“myStuff.banner">
<ul class="slideset">
<ul style="margin:0px; padding:0px">
<li class="slide" data-transition="slidedown" data-slotamount="10" data-masterspeed="300" data-thumb="" ng-repeat="banner in user.banner" width="300">
<! -- load a big ol’ picture !—>
<img ng-src="../../storage/img/{{banner.image.image_url}}">
<div class="caption text-box lfl lfl" data-x="-91" data-y="140" data-speed="300" data-start="800" data-easing="easeOutExpo">
<h1><span>{{banner.banner_title}}</span></h1>
<a class="more" href="{{banner.banner_link}}">READ MORE</a>
<div style="" class="tp-leftarrow tparrows default"></div>
<div style="" class="tp-rightarrow tparrows default"></div>
</div>
</li>
</ul>
</div>
</div>
...
indexController.js:
...
// gets all the data from my API, including image src
vm.getMyStuff = function() {
$http.get('http://localhost:8888/api/public/myapistuff).success(function(myStuff) {
vm.myStuff = myStuff;
}).error(function(error) {
vm.error = error;
});
}
}
})();
$(window).load(function() {
// load JQuery plugins
$.getScript("./js/plugins.all.min.js");
});
I am developing an application with jQuery mobile and json bring data.
I have a problem loading content when I click on a button but if I enter directly to link the content is there.
Please, look:
if you click on any image it shows a page without content: http://www.example.com.ar/catalogoar/
But if you enter http://www.example.com.ar/catalogoar/arma_ampliada.html?id_arma=1 the content is there.
I can't find the problem. I already try with
$("#tabla_arma").table('refresh');
Please, learn how jQuery Mobile works before you post any more related questions. I am not trying to attack you but people here don't like this kind of questions.
To be able to solve this problem you need to understand how jQuery Mobile page handling works, and you can't solve this problem.
When jQuery Mobile handles pages only first HTML files is fully loaded into the DOM, all intermediate files are loaded only partially. When I say partially I mean HEAD will be stripped away and only FIRST data-role="page" will be loaded.
So if you have 2 pages, for example lets say first one is called index.html and second one is called arma_ampliada.html. When second page is initialized only content inside data-role="page" <div> will load into the DOM, everything else is going to get discarded, including HEAD javascript you need to load your data.
Read more about it here, you will also found solutions.
Your arma_ampliada.html page should look like this:
<html>
<head>
<title>Catálogo de Armas</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<!-- CSS -->
<link rel="stylesheet" href="css/jquery.mobile-1.4.2.css" />
<link rel="stylesheet" href="css/listview-grid.css">
<link rel="stylesheet" href="css/estilos.css">
<!-- JS -->
<script src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(document).on("mobileinit", function()
{
$.mobile.defaultPageTransition = 'slide';
});
</script>
<script src="js/jquery.mobile-1.4.2.min.js"></script>
<!-- <script src="js/cordova.js"></script> -->
</head>
<body>
<div data-role="page" data-theme="a" id="demo-page" class="my-page">
<script>
var armas;
function obtenerArmaAmpliada(id_arma){
$.ajax({
type: 'GET',
data: {'id_arma' : id_arma},
dataType : 'jsonp',
url: 'service/datos.php?jsoncallback=?',
success:function(data){
armas = data.armas;
mostrarArmas();
},
error: function() {
alert("error");
}
});
}
function mostrarArmas ()
{
$("#arma_ampliada").html('');
$.each(armas, function(indice, receta)
{
$("#arma_ampliada").append('<tr><td><img src="'+receta.foto+'" class="ui-li-thumb" ><h2>'+receta.marca+'</h2><p>'+receta.modelo+'</p></td></tr>');
});
$("#tabla_arma").table('refresh');
}
$(function(){
var Url = location.href;
Url = Url.replace(/.*\?(.*?)/,"$1");
Variables = Url.split ("&");
for (i = 0; i < Variables.length; i++)
{
Separ = Variables[i].split("=");
eval ('var '+Separ[0]+'="'+Separ[1]+'"');
}
obtenerArmaAmpliada(id_arma);
});
</script>
<div data-role="header" style="overflow:hidden;">
<h1>Catálogo de Armas</h1>
Opciones
<div data-role="navbar">
<ul>
<li>Marcas</li>
<li>Calibre</li>
<li>Tipo</li>
</ul>
</div>
</div>
<div role="main" class="ui-content">
<div id="tabla_arma">
<table id="arma_ampliada">
</table>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>